Navigation widget

Overview

Use this widget to display your website pages as navigation links. You can choose from predefined styled navigation views – Accordion, Horizontal, Vertical, Tabs, or create a custom one.

Place the widget on the page

You can place a Navigation widget only inside a Section widget.
To do this, perform the following:

  1. Inside a column from the Section widget, click Add widget here…
  2. Select the Navigation tab.
  3. Click the desired styling option.
    The widget is placed inside the selected column of the Section widget.

NOTE: All of the available navigation views have the same configuration options.

Configure the properties of the navigation

You can configure the navigation properties in the following way:
  1. To configure the widget, click Edit.
  2. Click Select pages.
  3. In Display field, choose one of the following:
    • Top-level pages (and their child-pages if template allows)
    • All pages under particular page…
      Select a page.
      The Navigation widget displays links to pages that are children of the selected page only.
    • 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 to pages that are on the same level as the currently opened page.
    • Custom selection of pages…
      Select the pages that you want to appear in the Navigation widget.
  4. In Levels to include dropdown box, select one of the following:
    • All
      When you select a parent or a group page, the system displays all of its children pages.
    • <Number>
      The system displays the child pages up to the level that you have selected.
      For example, if you have selected 2, the system displays only top level pages and their children.

Configure the display settings

To configure how to display the Navigation within its column, perform the following:

  1. Expand Display settings.
  2. In Margins, you can choose the margins between the navigation and the column where it is placed.
    Choose from the predefined values of none, small, medium, or large.
  3. Click Save.

Advanced widget settings

To open the advanced settings, in the upper-right corner of the Navigation widget page, click Settings (Advanced settings)

  • In Label, you can enter a specific name for this widget.
    This name will be displayed in:
    • The page editor as a label for the widget
    • In the treeview with the page structure in the right pane of the page editor.
  • In CSS class, you can enter individual CSS class for the Navigation widget.
  • In Show parent page, you can choose whether to display the parent page, in addition to its children.
    This is applicable, if you have selected to display All pages under particular page or All pages under currently opened page.

Save your changes.

Create custom navigation view

To create custom navigation view, perform the following:

  1. Create a .cshtml file and place it in the following location:
    ~\MyWebApp\Views\Shared\Components\SitefinityNavigation\MyCustomNavigation.cshtml
  2. Inside a column from the Section widget, click Add widget here…
  3. Select the Navigation tab.
    The new template is automatically listed with user friendly name, such as My custom navigation.

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.

Was this article helpful?

Next article

Breadcrumb widget