Brightspot CMS Developer Guide


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

Styleguide navigation Styleguide navigation
Styleguide navigation

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.

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

Previous Topic
Next Topic
Theming tutorials
Was this topic helpful?
Thanks for your feedback.
Our robust, flexible Design System provides hundreds of pre-built components you can use to build the presentation layer of your dreams.

Asset types
Module types
Page types
Brightspot is packaged with content types that get you up and running in a matter of days, including assets, modules and landing pages.

Content types
Landing pages
Everything you need to know when creating, managing, and administering content within Brightspot CMS.

Admin configurations
A guide for installing, supporting, extending, modifying and administering code on the Brightspot platform.

Field types
Content modeling
Rich-text elements
A guide to configuring Brightspot's library of integrations, including pre-built options and developer-configured extensions.

Google Analytics
Apple News