How to Create a Custom Vertical Navigation for SharePoint Pages

By João Ferreira Oct 14, 2024 Intranet 0 Comments

In the classic SharePoint world, sites used to have both vertical and horizontal navigation. I did quite a few customizations for both, including creating a collapsible menu for vertical navigation.

In today’s post, I want to show you how you can bring some of those old vibes to the modern SharePoint communication sites and how you can use the Site Pages library to create a collapsible menu for your pages that can be used as a template.

Let’s implement this solution using just standard SharePoint components; you’ll be surprised.

Modifying the site pages library to create a custom menu

To start with this project, the first thing I’ll do is create a new view in the Site Pages library for the navigation and then add two new columns in the Site Pages library in the site collection where this will be added:

• Category – Choice column, this will be used to group the pages in the menu.
• Show In Navigation – Yes/No, this will be used to make the pages visible in the vertical menu.

Group the view by category to enable the collapsing and expanding of items within each navigation group. Apply a filter to show only the pages that are designated to appear in the navigation.

Once the new columns have been added to the library, adjust it to ensure the Title column is visible, as this will serve to display the page name in the navigation.

The final step for the navigation view is to format it with custom JSON Lists formatting, so it resembles a menu. Format your view and apply the code below.

 {
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideSelection": true,
  "hideListHeader": true,
  "groupProps": {
    "headerFormatter": {
      "elmType": "div",
      "style": {
        "flex-direction": "row"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "border-radius": "6px",
            "font-weight": "500"
          },
          "attributes": {
            "class": {
              "operator": "+",
              "operands": [
                "ms-bgColor-themePrimary ",
                "ms-fontColor-white"
              ]
            }
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "display": "inline-flex",
                "padding": "6px 9px"
              },
              "children": [
                {
                  "elmType": "div",
                  "attributes": {
                    "class": "ms-fontWeight-bold"
                  },
                  "txtContent": "@group.fieldData.displayValue"
                }
              ],
              "defaultHoverField": "[$Category]"
            }
          ]
        }
      ]
    }
  },
  "rowFormatter": {
    "elmType": "a",
    "style": {
      "font-size": "14px",
      "font-weight": "400",
      "text-decoration": "none",
      "color": "#323130",
      "padding": "3px 6px 6px 6px",
      "margin-left": "40px"
    },
    "txtContent": "=if([$Title]=='',[$FileLeafRef],'[$Title]')",
    "attributes": {
      "class": "ms-bgColor-neutralLight--hover ms-fontColor-neutralSecondary–hover",
      "href": {
        "operator": "+",
        "operands": [
          "@currentWeb",
          "/SitePages/",
          "[$FileLeafRef]"
        ]
      }
    }
  }
}

Adding the Site Pages navigation to a SharePoint page

Begin with a blank page to create a template for pages using this navigation. This prevents the need to configure the documents web part each time.

1. In the desired page section add the Document Library web part
   
2. Select the Site Pages library
3. Select the view you just created to display the navigation
4. Set the site to fit the number of items, this will ensure that you see all the pages set to be displayed in the menu
5. Hide the Command bar
6. Hide the See all button
   

   

Creating a SharePoint page template with a custom navigation

To avoid repeatedly adding the menu to the page, I recommend creating a page template once you have the document library on the page.

1. Click the arrow located in the Save button to open the save menu
2. Select Save as template and provide a name for your new template page
   

Adding a page to the custom SharePoint menu

With the Site Pages library updated to include additional columns and the Title column visible, and after creating a template for pages with navigation, adding new pages to the menu becomes a straightforward process.

1. When creating a new page, click on the Saved on this site tab, here you will find all the custom templates available in your site collection
2. Select the template you just created
   
3. Click Page details, then in Properties, choose the category and mark the page to display in navigation using the custom columns added to the view

Add the necessary content to your page and then publish it. After publication, the page will automatically be included in all pages that use the menu.

Conclusion

By following these steps, you can create a vertical navigation menu in your modern SharePoint communication site, bringing a touch of the classic SharePoint feel to your current projects. This approach leverages the flexibility of the Site Pages library and list formatting to create a customizable and user-friendly navigation experience.

Happy customizing! If you have any questions or need further assistance, feel free to reach out.

Feel free to adjust the JSON formatting and other settings to better fit your specific needs and design preferences. Enjoy bringing those classic SharePoint vibes to your modern sites!