Navigation widget | WebForms

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

After you place the Navigation widget on a page, you can configure it, 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.To do this, perform the following:

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

By default, pages are cached, which means that Navigation widgets on pages are cached as well. This may cause issues such as anonymous users being able to see restricted pages or authenticated users not being able to see restricted pages. To avoid such cases, you can modify the output cache settings of Navigation widgets. To do so:

1. Open the widget designer of a Navigation widget.
2. In the Advanced settings section, click the OutputCache button. 
3. Modify one of the following settings:

• VaryByAuthenticationStatus
  Set to true to enable output cache only for anonymous users. Output cache is not enabled for authenticated users.
• VaryByUserRoles
  Set to true to enable having different cache settings for specific roles or set of user roles.