> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.snapps.ai/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Navigation and Sub-Navigation Links

Add the Navigation Links widget to your site to generate an all-inclusive navigation menu with links to all pages on the site, or build you own menu with only most useful links. Well-structured navigation guides your site visitors and help them quickly locate the information they are looking for.

To add the widget:

1. In the left panel, click **Widgets**.
2. Click and drag the Navigation Links widget into your site.

To learn more about adding widgets to your site, see Add Widgets.

Note

Navigation can have up to 3 levels.

**Content Editor**

To access the content editor:

1. Right-click the widget, and click **Edit Content.** Select one of the following:

* **Site pages.** Populate the content of the navigation links with site pages, navigation folders, and anchors. This menu is generated automatically from the site's page settings. Use this option when the navigation should reflect pages that are shown or hidden in the site builder. To edit the pages in your site, click **Go to Pages.**
* **Custom links.** Build your own menu with custom links. Custom links are managed separately from the site's page settings, so hiding or deleting a page does not automatically remove its custom navigation link. Update or remove the custom link manually, or switch the widget to **Site pages** when the menu should reflect the pages configured in the builder. This option also allows great flexibility in creating quick navigation bars to add inner page navigation, footer navigation with only most useful links, social accounts menu, and more.

  
2. If you select to create navigation with Custom links, the editor will prompt you to populate the list of links with custom elements. Add folders and items to link them to external pages, internal pages, and anchors.

If custom code is not running correctly, disable **AJAX Page Changing (Quick Navigation)** in the Header HTML.

**Design Editor**

To access the design editor:

1. Right-click the widget, and click **Edit Design.**

  
2. On the **Layout** tab, you have the following options:

Select an **Orientation** for the navigation.

Click the navigation layout to select a layout for your site navigation.

Click the sub-navigation layout to select a layout for the sub-pages in your navigation.

  
3. On the **Pages** tab, click **All pages**. You have the following options:

    Link Style. Configure the background color, space between items, navigation item direction, and select a divider style.

* To navigate between pages without refreshing the entire page, click **More design options**, and then click the **Quick navigation** toggle. You must keep this option disabled if you are using custom code in the header that is not shared by all pages on the site.

Note

When the Quick Navigation option is enabled the header and footer will not be reloaded when you switch between pages.

* Link Text. Configure the font for the link text.

  
4. On the **Pages** tab, click **Selected Page & Hover.** You have the following options:

Effect. Select a display effect for the selected page. Some effects including further customizations.

Link Text. Configure the font for the link text.

  
5. On the Subpages tab, you can customize the sub-navigation style:

Link Style. Configure the background color, shadow, spacing between items, and divider.

Link Text. Configure the font for the link text.

For information about design options that are not specific to this widget (for example, layout, style, or spacing), see Widget Design.