Add navigation

Current version: 10.0

The navigation of your website is a key component that directly impacts you from a marketing perspective. The navigation renderings in SXA help you design navigation in a way that helps website users. When you drag the Navigation rendering 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 and, in the Navigation section, find the Navigation rendering.

  2. When you click and start dragging a rendering, the placeholders where you can drop the rendering light up in blue. Position the Navigation rendering above the desired placeholder, and when the placeholder lights up in green, drop the rendering on the page.


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

  3. In the Styling section, if there is a variant available for the Navigation rendering, for example, one that displays subtitles instead of page titles, you can select it in the Variant field. The variant determines the displayed fields and their appearance.

  4. In the Styles field, select the style(s) you want, click the right arrow and then click OK. For example, you can select:



    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.

    If you are using your own customized theme, and this theme does not provide the CSS implementations for the navigation classes, changing the style of navigation might have no effect.

  5. In the Custom Variants for levels field, you can select a custom appearance for a particular level of navigation.

  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 drop-down list.

    • Flat Structure – select this checkbox to display all items on the same level.

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

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

    • Cacheable – select to enable HTML caching. If your rendering has only one view, this is the only checkbox that you have to select.

    • Clear on Index Update – select if the rendering uses the Sitecore ContentSearch API.

    • Vary by Data – select to cache a separate version of the HTML based on the data source of the rendering.

    • Vary by Device – select to cache copies of the output for each device that is used.

    • Vary by Login – select if the rendering is displayed differently for logged in users.

    • Vary by Param – select to cache the output for each parameter accepted by the rendering.

    • Vary by Query String – select to cache the output for each unique combination of query string parameters.

    • Vary by User – select if the rendering displays user-specific information.

  8. In the Parameters section, you can customize the data that is passed to this instance of the sublayout (beyond the data source). In the Additional Parameters field, add additional properties as key value pairs.

Do you have some feedback for us?

If you have suggestions for improving this article,