Sample: Create a menu based on page titles

Recently I had to create an informative communication site with multiple pages divide in multiple “chapters”. And because of vast number of pages I didn’t want to use the standard top or left navigation, I wanted something more elaborate and I had the following prerequisites:

• New pages should be added automatically whenever a new page gets published
• Pages and Chapters should be shown in the order of my choosing
• Page-level security should be maintained
• Updates to the menu should be applied to all pages quickly, in other words, I don’t want to update 40 individual pages just because I changed the menu.

My first idea was to create a list to which I could apply a format. Luckily, I quickly realized that this list would simply be a copy of all the pages in my Site pages library.
So instead of creating a separate list, I started to adapt the Sitepages library itself.

Before I show you how to build, integrate and maintain the menu, let me first show you the final result. As you can see in the image below, there are 3 levels of pages:

• there is one starting page “Metadata in SharePoint”,
• there are multiple pages marking the beginning of a chapter, I will refer to these pages as Chapter-pages,
• and in each chapter, there are multiple content pages, to which I refer as Content-pages (the image shows only the Content-pages in the current chapter).

Setup

The key element of this concept is that the menus are views on the Site pages library. To be precise, there will be one view for every chapter allowing that chapter to be expanded.

The bare minimum for this to work are two columns “PageOrder” and “ChapterOrder”, both numerical columns.

• ChapterOrder is the number of the chapter to which a Chapter-page or Content-page belongs to.
• The PageOrder number is the relative number of each page inside the chapter it belongs to.
• The Chapterpages always have the PageOrder value 0. Actually this is the only way Chapter-pages are distinguised from Content-pages.

Adding Columns

Create the views

Once the columns are created, make sure that there are some dummy pages, allowing you to see the impact of the views.

For every chapter you can now create a view that will expand the pages in that specific chapter, in this example I will name it “Chapter # expanded”, but any name will do of course.

After the view is created it is time to apply the correct view-format. The JSON below is the same for every “Chapter # expanded” view, so if you decide to change the look-and-feel, you only have to copy-paste the whole code into every view.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "a",
    "attributes": {
      "href": "= @currentWeb + '/SitePages/' + [$FileLeafRef]",
      "title": "[$Title]"
    },
    "style": {
      "text-decoration": "none"
    },
    "children": [
      {
        "elmType": "div",
        "_comment_": "Main Div",
        "attributes": {
          "class": "ms-borderColor-white"
        },
        "style": {
          "display": "flex",
          "flex-wrap": "wrap",
          "align-items": "stretch",
          "flex-direction": "row",
          "padding": "0",
          "margin-bottom": "2px",
          "min-width": "99%",
          "max-width": "930px",
          "border-width": "1px",
          "border-style": "solid",
          "cursor": "pointer"
        },
        "children": [
          {
            "elmType": "div",
            "_comment_": "Title div",
            "attributes": {
              "class": "=if( [$PageOrder] == 0 , 'ms-bgColor-themePrimary ms-fontColor-neutralLighter ms-borderColor-neutralLight--hover', 'ms-bgColor-themeLighterAlt') + ' ms-bgColor-themePrimary--hover ms-borderColor-themePrimary  ms-borderColor-neutralLight--hover ms-fontColor-neutralPrimary ms-fontColor-neutralLight--hover'"
            },
            "style": {
              "flex-grow": "1",
              "display": "flex",
              "flex-direction": "row",
              "flex-wrap": "nowrap",
              "align-items": "left",
              "width": "230px",
              "padding-top": "5px",
              "padding-bottom": "5px",
              "padding-left": "7px",
              "margin-left": "=if( @rowIndex == 0 ,'0','28px')",
              "border-width": "1px",
              "border-style": "solid",
              "border-radius": "0.2em"
            },
            "children": [
              {
                "elmType": "span",
                "style": {
                  "padding": "7px",
                  "font-size": "14px",
                  "padding-left": "=if([$PageOrder] == 0 , '0', '14px')"
                },
                "attributes": {
                  "iconName": "=if(@rowIndex == 0 , 'HomeSolid',if([$PageOrder] == 0 , 'BulletedTreeList', ''))"
                }
              },
              {
                "elmType": "span",
                "txtContent": "=[$Title]",
                "style": {
                  "display": "=if([$Title] == '', 'none', 'block')",
                  "font-size": "16px"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

Embed the list on a page

To ultimate step is of course to embed the list on our pages. And to do this you mainly have to remember that we are not working on a list but in the actual Site pages library.

Some thoughts…

• When you add new pages. the easiest thing to do is to create a copy of an existing page. This way you do not have to insert the webpart over and over again.
• When you change the order of the pages in Site pages library using the Grid view, don’t forget to republish your pages.
• Currently the page titles are used in the menu, you could opt for creating an additional column ShortTitle with a shorter version of the title. This way you can make sure that menu items don’t use multiple lines.
• I do not see a way to change the look-and-feel of the current page.