Configure your Navigation element

The Navigation element in Composer dynamically displays site pages from your page tree as a navigation menu, with start and end level settings that control which pages appear. It can show subpages, sibling pages, or a full section hierarchy depending on how the levels are configured.

Navigation is perhaps the most important aspect of your website. It’s vital that users know how to find all the content you’ve made available to them. Considering that, how exactly does the navigation element work? This article will help you understand how to help your users navigate your site by properly setting up a Navigation element.

In this article

• Quick Tutorial: Add a Navigation Element
• Calculating start and end levels
• Using a branch as a navigation starting point
  • Use a hidden container page instead of a branch
  • Build the footer from manual links
• Displaying inaccessible pages
• Displaying thumbnails and descriptions

Your site’s navigation is dynamically generated from the site tree in Composer.

• To change the position of a page on the navigation list, simply drag and drop it on the Page list in Composer.
• If you don’t want a particular page to appear on a navigation menu, you can hide it from navigation, as explained in "Hide pages from search and navigation."

There are two important aspects of your site when it comes to navigation: branches and levels.

A branch is an organizational tool used in Composer that divides up different sections of your site. Learn more about branches in Domains and branches. A branch can be used as a starting point for your navigation.

A level is how we refer to the hierarchy of pages and sub-pages that make up your site tree. Pages that are on the same level are often called “siblings,” while a page that is nested underneath another page is the first page’s “child.” The page above is referred to as a “parent.”

Calculating start and end levels

When you set up a new Navigation element, the first thing to decide is where it starts. You can start the navigation from 0-5 levels:

• Below Current Branch: This option considers the branch itself level 0 and the top-level pages level 1. Because the branch is never shown on the front end of the site, only 1 to 5 levels below the branch can be selected. Current means the branch containing the page the element sits on; no branch is chosen here, and the result changes from page to page. For details, refer to Using a branch as a navigation starting point.
• Below Selected Page: With this option, you select a site page to serve as level 0, and you can display 1-5 levels below of navigation that page. This option does not change according to what page the user is on.
• Above Current Page: This option counts the current page as level 0, and you can choose to start with all of its sibling pages (0 levels above) or up to 5 levels above that page.
• Below Current Page: This option works the same as above, in the opposite direction.

To figure out where your navigation will start, consider the page or branch you have selected “level 0” and count levels above or below. Zero levels will display the selected page and its siblings. Any levels above will show that page’s parent - and all the parent’s sibling pages. Levels below will show that page’s child pages.

Once you have a starting point, decide whether the Navigation element will count levels from the starting level, or the current page. For a flat navigation that only displays one level, choose “0 Levels below Starting Level.” For a dynamic navigation that takes into account the variable levels between the starting page and the current page, choose “Current Page” to calculate the end point.

Using a branch as a navigation starting point

A common request: a branch of linked pages has been built, and those links need to display together as a footer menu, a sidebar, or a quicklinks list. When the Navigation element start settings open, the branch is not there to choose.

That is expected. A branch is an admin-side container, not a page, so it never appears in a page picker. No setting points a Navigation element at one specific branch. The only branch-aware option, Below Current Branch, uses whichever branch the element's own page sits in, so on a footer banner applied site-wide it resolves differently on every page and never returns the linked-pages branch consistently.

Two approaches produce the intended menu.

Use a hidden container page instead of a branch

This approach keeps the menu dynamic, so adding a linked page updates the footer everywhere automatically.

• Step 1: Create a regular page to act as the container. Footer links is a common name. Place it at the top level of the site.
• Step 2: Open the container's Page Settings gear icon, select the General tab, and enable Hide from navigation elements so the container stays out of site menus. The page tree then shows diagonal gray lines across the page title. For details, refer to Hide pages from search and navigation.
• Step 3: Move the linked pages under that container page as sub-pages. Hover over a page, open More Actions, and select Move to a New Parent.
• Step 4: In the footer banner, add a Navigation element and set Starts 1 Level Below Selected Page, choosing the container page.
• Step 5: Set Ends 0 Levels Below Starting Level for a flat list of links, or 1 to 5 levels for a nested menu.

Build the footer from manual links

Footer links that rarely change do not need a dynamic menu at all. A Content element holding manually-entered links is simpler to set up and gives exact control over wording and order. Saving that element as a shared element means one edit updates every instance of it across the site.

The branch of linked pages stays exactly as it is. It continues to manage the vanity URLs, and the footer links to those addresses directly.

Displaying inaccessible pages

Now that you have determined which of the site’s pages to display in your navigation, you have two more options for how to display “inaccessible” pages within that tree: “Display Inaccessible Pages to Unauthenticated Users” and “Display Inaccessible Pages to Authenticated Users.” These options relate to pages that have Access Controls set on them.

An “authenticated user” is simply someone who has logged into your site. When logged in, the site can tell which pages the user is allowed to visit and which pages are off-limits. Before logging in, however, the site doesn’t know what pages the “unauthenticated user” might have access to.

If “Display Inaccessible Pages to Unauthenticated Users” is selected, anyone who visits the site will be able to see the links to pages with Access Controls. If they click on one of those pages, they will be directed to the Login page. If it is not selected, they will not ever even see links to any pages with Access Controls.

When “Display Inaccessible Pages to Authenticated Users” is selected, users will see all pages, whether they can access them or not, as long as they’re logged into the site. If they click on a page they do not have permission to view, a message will be displayed on the page. If this option is not selected, users will only be shown the pages they are permitted to access.

Displaying thumbnails and descriptions

In addition to the page name and link, you can also configure a Navigation element to display a thumbnail image and description for the page. Learn how to edit those for each page in Edit images in navigation elements.