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.

Output cache settings 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 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.

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Tags

Was this article helpful?

Next article

Breadcrumb widget