Set up a Navigation element

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
• 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, you can only choose 1-5 levels below the branch.

• 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.

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.