Navigation

Styleguide's left rail contains a navigation. The navigation contains categories of links to a preview of each style in the theme.

Referring to the previous illustration, there are three categories (Lists - Download, Lists - Author, and Lists - Carousel). Within each category there are links to individual styles.

You build the navigation by editing the file /styleguide/_navigation.config.json. This file contains an array navigation of categories (displayName and pages keys). The categories contain an array pages of individual links to previews (displayName and page keys). The value for page is an absolute path to the JSON file corresponding to the template you want to preview. (The path starts from the theme's /styleguide/ directory.)

The following code example renders the above navigation.

{
  "navigation": [{
      "displayName": "Lists - Download",
      "pages": [{
        "displayName": "Download Promo List",
        "page": "/download/list/DownloadList.json"
      }]
    },
    {
      "displayName": "Lists - Author",
      "pages": [{
          "displayName": "Author List A",
          "page": "/author/list/AuthorListA.json"
        },
        {
          "displayName": "Author List B",
          "page": "/author/list/AuthorListB.json"
        },
        {
          "displayName": "Author List B  - 4 column",
          "page": "/author/list/AuthorListB-4column.json"
        }
      ]
    },
    {
      "displayName": "Lists - Carousel",
      "pages": [{
          "displayName": "Page with Carousel Lists",
          "page": "/page/list/Page-withCarouselLists.json"
        },
        {
          "displayName": "Carousel List A",
          "page": "/page/list/PageListCarouselA.json"
        },
        {
          "displayName": "Carousel List B",
          "page": "/page/list/PageListCarouselB.json"
        },
        {
          "displayName": "Carousel List C",
          "page": "/page/list/PageListCarouselC.json"
        },
        {
          "displayName": "Carousel List D",
          "page": "/page/list/PageListCarouselD.json"
        }
      ]
    }
  ]
}

Specifies a category name in the navigation.
Specifies text for a link.
Specifies the JSON file for the style to display. The full path from the theme's root directory is /styleguide/download/list/DownloadList.json.

Caution

Ensure the file _navigation.config.json exists in your Styleguide project. Without it, Styleguide does not render in your browser.