Navigation widget

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.

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.

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.
     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 URLs
       On 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 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.

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.

To open the advanced settings, in the upper-right corner of the Navigation widget 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 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.

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.