Navigation widget

ASP.NET Core

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 Navigationwidget only inside a Sectionwidget.
To do this, perform the following:

1. Inside a column from the Sectionwidget, 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 Sectionwidget.

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 Navigationwidget displays links to pages that are children of the selected page only.
   • All pages under currently opened page
     The Navigationwidget displays links to pages that are children of the currently opened page.
   • All sibling pages of currently opened page
     The Navigationwidget 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 Navigationwidget. You can display pages from the site or external pages, or a combination of both. When you select this option, the Select pages page opens, displaying the following tabs:
     • All pages
       On this tab, you can make a custom selection of paged from the site.
     • External URLsOn this tab, you can enter the titles and the URLs of external pages, and you can choose whether you want to open the links in a new window.
     • Selected
       On this tab, you can see the pages that you have already selected to be displayed in the Navigationwidget.
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 Navigationwidget page, click  (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 Navigationwidget.
• 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 Sectionwidget, click Add widget here…
3. Select the Navigation tab.
   The new template is automatically listed with user friendly name, such as My custom navigation.