Navigation widget

Use this widget to display website navigation. The widget displays only visible pages.

You first configure the Navigation widget when you drop it on a page, then you can use the widget template to customize its behavior and appearance, then you can apply a CSS to style it.

For more information, see Customize the Navigation widget.

After you have dragged the Navigation widget on your page you must configure it to display navigation links. 

1. To do this, click Edit button in the upper-right corner of the widget.
   The Navigation window appears.
2. Choose which pages to display in the navigation, by selecting one of the following:
   
   • Top level pages
     The Navigation widget displays links to pages that are at top level in the structure of pages and have no parent.
   • All pages under particular page
     The system displays links to pages that are children of only one particular page.
     1. To select the page, click Select page button.
     2. In the treeview that appears, select the parent page and click Done selecting.
   • All pages under currently opened page
     The system displays links to pages that are children of the currently opened page.
   • All sibling pages of currently opened page
     The system displays links to pages that are siblings of the currently opened page.
   • Custom selection of pages…
     The system displays links only to pages that you select.
     1. To select pages for the navigation, click Select pages button.
        The Select Pages window appears.
     2. Select one of the following tabs:
        • From this site
          In the treeview that appears, select the checkboxes of the pages, which you want to be part of the navigation.
        • From other sites
          1. Enter the URL of the page.
          2. In Name input field, enter the name to be displayed in the navigation.
          3. Click Add button.
             The page is added to the list of external pages.
             
          4. You can add as many pages as needed. To remove a page, click the respective  button.
     3. When finished, click Done selecting.
        

        NOTE: You can select both external pages and pages from Sitefinity.

3. Select the template used for the navigation.
   In Template dropdown box, choose one of the following:
• Horizontal (one-level)
  The system displays links to the pages horizontally (one next to the other). There is no hierarchy (no links to children pages).
• Horizontal with dropdown menus
  The system displays links to the pages horizontally. If you select a parent page or a group page, the system displays all children pages in a dropdown menu.
• Horizontal with tabs (up to 2 levers)
  The system displays links to the pages horizontally. If you select a parent page or a group page, the system displays all children pages in a tabstrip.
• Vertical (one-level)
  The system displays links to the pages vertically. There is no hierarchy.
• Tree (vertical with sub-pages)
  The system displays links to the pages in a vertical tree with all its nodes expanded. The Tree navigation type enables you to view the hierarchy of the website.
• Sitemaps in columns
  The system displays links to top level pages horizontally. If a top level page is a parent page or a group page, containing other pages, they are displayed in a column below their parent page. Only the first two levels of hierarchy are displayed.
• Sitemaps in rows
  The system displays links to top level pages vertically. If a top level page is a parent page or a group page, containing other pages, they are displayed in a row below their parent page. Only the first two levels of hierarchy are displayed.
4. To apply a CSS, enter the name of the class in CSS class
   You can choose a class name for each navigation. You can then set particular style for this navigation widget or apply a specific responsive design.

For navigation templates that have more than one level of navigation, you can setup the depth of the navigation nodes.

Under Levels to include, select one of the following:

• All
  When you select a parent or a group page, the system always displays its children pages.
• <Number>
  The system displays the children pages only up to the level you have selected in the dropdown box.
  For example, if you have selected 2, the system displays only top level pages and their children.

You can also setup how many navigation levels to display in your navigation, using the widget template.
For more information, see Set the levels of the Navigation widget.

You can apply responsive design for the Navigation widget only. This way its appearance will be different for different devices, used to view the website.

You can do this, using Sitefinity CMS Responsive Design feature. To do this, in the main menu, click Design » Responsive & Mobile Design.
For more information, see Overview: Responsive design.

You can also apply responsive design to the Navigation widget, using the widget template.
For more information, see Create responsive design without Sitefinity CMS Responsive Design feature.

If you have selected to display all nodes under a particular parent page, you can choose whether you want to display the parent node in the beginning of the navigation.

For more information, see Display the parent node in the Navigation widget.