Add a Navigation component

Version: 10.4
Note

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

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 Design > Advanced styling 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,