Navigation widget | MVC

You use the Navigation widget to display website navigation as navigation links. To do this, after you place the Navigation widget on your page, you configure the widget to define what pages to display as links, customize the widget template, and finally set the widget's styling properties.

NOTE: Navigation links can link only to visible pages.

1. Open the Navigation widget designer.

2. To choose which pages to display as links in the navigation, select one of the following options:

   • Top-level pages (and their child-pages if the widget template allows this)
     The Navigation widget displays links to pages that are on top level in the pages' hierarchical structure and have no parent.

   • All pages under particular page
     The Navigation widget displays links to pages that are children of just one specific page.

     • Click the Select page button.
     • In the treeview, select the parent page and click Done selecting.

   • All pages under currently opened page
     The Navigation widget displays links to pages that are children of the currently opened page.

   • All sibling pages of currently opened page
     The Navigation widget displays links only to pages that are siblings of the currently opened page.

   • Custom selection of pages…
     The Navigation widget displays links only to specific pages you select.

     • Click the Select pages button.
     • In the treeview, select the checkboxes next to the pages that you want to be part of the navigation.
     • When finished, click Done selecting.

3. For navigation templates that have more than one level of navigation, you can setup the depth of the navigation nodes. To do this, under Levels to include, choose one of the following options:

   • All
     When you select a parent or a group page, the Navigation widget always displays its children pages as well.
   • Number
     The Navigation widget displays the children pages only up to a level of your choice. Choose a level from the Number dropdown menu. For example, if you select 2, the system displays only the top two levels of navigation - the top pages and their immediate children.

4. From the Template dropdown menu, select the template you want to use for displaying navigation:

   • Horizontal
     Links to pages are displayed horizontally (one next to the other).
   • Vertical
     Links to pages are displayed vertically and there is no hierarchy.
   • Tabs
     Links to pages are displayed horizontally. If you select a parent page or a group page, all its child pages are displayed in a tabstrip.
   • Sitemap
     Links to top level pages are displayed horizontally. If a top level page is a parent page or a group page that contains other pages, these pages are displayed in a column below their parent page. Only the first two levels of hierarchy are displayed.

5. To apply responsive design for the Navigation widget only, see Use responsive design in MVC.

6. To apply additional CSS classes to the Navigation widget, under the More options section specify the CSS class names.

To define additional advanced properties of the Navigation widget, in the widget designer, click Advanced properties and define the following:

• CssClass
  If you specified a CSS class in the Simple view of the widget, the value is copied in the Advanced view as well.

• LevelsToInclude
  If you specified any value different that 1 in the Simple view of the widget, it is copied in the Advanced view as well.

• SelectionMode
  This property displays the value that you selected in the Display section in the Simple view of the widget. Possible values are:

  • TopLevelPages
  • CurrentPageChildren
  • CurrentPageSiblings

• ShowParentPage
  The default value is False. If you set this property to True, you can see the parent page in the navigation.

• TemplateName
  Reflects your selection in the Template dropdown menu in the Simple view of the 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 the Navigation widget. To do this, perform the following:

1. Open the widget designer of your Navigation widget.
2. Click Advanced button.
   The Advanced settings window appears.
3. Click the OutputCache button.
   The OutputCache window appears.
4. 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.