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.

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 will be generated automatically based on the site pages. This is a quick way to place basic navigation on your site. To edit the pages in your site, click Go to Pages.
   • Custom links. Build your own menu with custom links. This option 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.