Add a Navigation component

Note

Use the Experience Editor for the steps described in this topic.

Navigation is an important part of any page. SXA comes with a set of navigation styles. By default, the following navigation components are available:

  • Link list - displays lists with items that contain a title, link, and text.

    The Link list component.
  • Navigation - generates a navigation menu. The navigation components in SXA help you design navigation in a way that helps website users. See Add a Navigation component for more details on styling.

    Big/Fat navigation component.

The Navigation component helps you design navigation in a way that helps website users. When you drag the Navigation component to a page, it generates a navigation menu. In the Control Properties dialog, you can specify the styling of the navigation.

To add a Navigation component to a page:

  1. Open the Toolbox.

  2. From the Navigation section, drag and drop the Navigation component on the placeholder that you want to add the component to.

    Note

    In the Control Properties dialog box, do not change the Placeholder and Data Source properties. Changing these properties can cause the component to disappear or lead to other unexpected behavior.

  3. To select a variant, for example one that displays subtitles instead of page titles, in the floating toolbar, in the Variant list, select the variant you want. The variant determines the displayed fields and their appearance.

    The toolbar of the Navigation component
  4. To apply styles to the navigation menu, click Edit style and behavior of the component.

  5. In the dialog box, select the styles you want and then click OK. For example, you can select:

    Navigation

    Description

    Example in wireframe mode

    Main navigation - drop down vertical

    Standard vertical drop-down navigation

    Main navigation drop down vertical example.

    Main navigation- drop-down horizontal

    Drop-down navigation with child items in a single line

    Main navigation- drop-down horizontal example.

    Sidebar navigation

    All child items displayed vertically

    Sidebar navigation example.

    Sitemap navigation

    All child items displayed vertically

    Sitemap navigation example.

    Big/fat navigation

    All child items displayed horizontally

    Big/fat navigation example.

    Mobile navigation

    Navigation for mobile

    Navigation for mobile example.
  6. In the Navigation Settings section, you can specify the following fields:

    • Start page – if you want your site to open on a different page than the home page, select that page here.

    • Top navigation level – click the level (counted from the root) that the navigation should start at.

    • Bottom navigation level – click the level (counted from the root) that the navigation should end at.

    • Navigation filter – click the navigation filter from the list.

    • Flat structure – select this check box to display all items on the same level.

    • Include Root Page – select this check box to include the root page in the navigation lists.

  7. In the Caching section, you can set the caching for the navigation component to help improve website performance:

    • Clear on publish - clears the cache for the component every time you publish.

    • Clear on content update - clears the cache for the component when the associated content changes.

      Note

      The behavior of this setting may vary depending on how the cacheHTML and enablePartialHtmlCacheClear properties are configured.

    • Do not clear - do not clear the component cache on publishing.

Do you have some feedback for us?

If you have suggestions for improving this article,