Navigation widget

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.

Configure the navigation view

  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.

Define advanced properties

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.

Tags

Was this article helpful?

Next article

Breadcrumb widget