·¬ÇÑÉçÇø

Brightspot CMS User Guide

Creating a navigation


A navigation is a set of menus and links that appears at the top of each page in a site. Enterprise-grade navigations typically include links to different pages and sections, such as product offerings, solutions, use cases, company information, and more.

Navigation example.jpg Navigation example.jpg
Navigation example

Navigations follow the rules of content hierarchy. If you define a navigation at the global level, it flows to the site level, then the section level, and finally the asset level.

The following procedure describes how to create a navigation at the site level, however, the steps to do it at lower levels (such as the asset level) are very similar.

To create a navigation:

  1. Click menu > Admin > Sites & Settings.
  2. Select the site for which you want to configure a navigation.
  3. Click search, located to the left of more_horiz, and type Navigation.
  4. From the Navigation list, select Select.
  5. From the dropdown list, select Create New.
    Note
    You can also create a navigation by clicking add, at the top of any Brightspot page, and selecting Navigation. If you choose to use this method, you can use the table below as a reference to complete the fields.
  6. Using the following table as a reference, complete the fields as needed.
  7. Click Save.

Navigation tabs

Click each tab below to see a description of the associated fields.
FieldDescription
Internal NameEnter an internal name for this asset. Brightspot uses this name internally, such as in the search panel and recent activity widget. This name is not visible to visitors to your site.
ItemsClick add_circle_outline and select one of the following options from the list:
  • Simple Navigation Item—Adds a link to an internal or external asset, like a page describing a use case, or a page outlining a solution you provide. You can also place a promo module into a Simple Navigation Item. In the Sub-Navigation tab, you can additionally add sub-navigation items.
  • Social Navigation Item—Adds a link to a post on a social network, like a tweet. Select the service in the Social Service field, then write in the item text in the Text field.
  • User Profile Navigation Item—Adds a link to a login page, allowing the site visitor to authenticate. For details, see Login page.

See the section below this table for more information about adding navigation items.

FieldDescription
PresetSelect:
  • None—applies the default styling to the navigation.
  • Custom—displays a field that allows you to set the alignment of the navigation.
Choose how to align the navigation within the headerSelect:
  • Default
  • Left
  • Right
  • Center

Displays the analytics data for the navigation, based on the timeframe that is selected.

FieldDescription
SearchSelect the time frame for which to view the analytics.

FieldDescription
LocaleSets the content's locale. This setting can also be used to auto-localize content based on the users requested locale.

After you create the navigation, you must add navigation items. Navigation items are the links that show up in the navigation to direct readers to different areas of content.

Navigation items.jpg Navigation items.jpg
Navigation items

There are three types of navigation items you can add:

  • Simple Navigation Item—A simple link to an internal Brightspot asset, website, or a site search.
  • Social Navigation Item—A link to a page within a social media site, such as Facebook.
  • User Profile Navigation Item—A link that prompts the reader to log in to a site to access additional content.

To add navigation items to the navigation:

  1. Click add_circle_outline in the Items field.
  2. Select which type of navigation item you would like to add.
  3. Depending on your selection, refer to the following table for more information about the navigation item.
  4. Click Save.

    Simple Navigation Item fields

    Click each tab below to see a description of the associated fields.

    FieldDescription
    Main tab
    TitleSelect one of the following options from the list:
    • Navigation Text—Adds simple text that is not hyperlinked, unless a link is specified in the Navigation Link field. Adding text in this field while also selecting a Navigation Link overrides the name of the object added to the Navigation Link field.
    • Navigation Link—Adds a link to an asset in Brightspot.
    TextEnter the name of this simple navigation item's link or text.
    DescriptionEnter a description of this simple navigation item to accompany its link.
    Note
    Description is only available for simple navigation items that are links.
    LinkSelect an internal or external asset for the simple navigation item's link.
    Note
    Link is only available for simple navigation items that are links.
    FieldDescription
    PresetSelect:
    • Custom—Exposes fields that allow you to configure how the navigation item is displayed.
    • None—Applies the default styling to the navigation item.
    Choose how many navigation dropdown columns you would likeSelect a number to specify how many columns you want the items in your navigation divided into.
    Check to choose a mosaic style layout for the navigation groupToggle on, to order your links vertically in the navigation.
    Navigation mosaic on vs off.jpg Navigation mosaic on vs off.jpg
    Sample navigation with Mosaic On vs. Mosaic Off

    Social Navigation Item fields

    FieldDescription
    Social ServiceSelect a social network provider from the list. Brightspot displays the icon of the social service provider you select.
    TextEnter text to accompany the social network provider icon.
    URLEnter the URL of the post from the social network.

    User Profile Navigation Item fields

    User Profile Navigation Item

    FieldDescription
    Login PageSelect a login page from the list. For details on how to create a login page, see Login page.
    Log In Navigation TextEnter text that is displayed in the navigation that prompts the visitor to log in.
    Profile Sub NavigationClick add_circle_outline and select one of the following options from the list:
    • Grouped Sub Navigation Item—Adds a grouping of navigation links that pop out underneath the parent simple navigation item.

      Grouped sub navigation item example.png Grouped sub navigation item example.png

    • Navigation Link—Adds an asset as a link that pops out underneath the parent simple navigation item.
    • Social Navigation Item—Adds an asset from a social network you select that pops out underneath the parent simple navigation item.
    FieldDescription
    Preset

    Select:

    • Custom—Exposes fields that allow you to configure how the navigation item is displayed.
    • None—Applies the default styling to the navigation item.
    Choose how many navigation dropdown columns you would likeSelect a number to specify how many columns you want the items in your navigation divided into.
    Check to choose a mosaic style layout for the navigation group

    Toggle on, to order your links vertically in the navigation.

    Navigation mosaic on vs off.jpg Navigation mosaic on vs off.jpg
    Sample navigation with Mosaic On vs. Mosaic Off

Previous Topic
Creating a hat
Next Topic
Creating an action bar
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.

•
•
•
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
• Modules
• Landing pages
Everything you need to know when creating, managing, and administering content within Brightspot CMS.

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

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

• Google Analytics
• Shopify
• Apple News