Navigation

All websites need to have navigation of some sort, and the Baseline features (hopefully) all the various types of navigation you would need.

Main Navigation

The Main navigation is built using the Generic.Navigation Page type that is included with the baseline. It then uses the <vc:main-navigation/> view component to render. The navigation views can be easily modified to suit your needs. Here are some features of the Navigation:

1. Manual Navigation (set Text and Link) or Automatic Navigation (Select Page)
2. Single Level, Multi-Level, and Mega Menu support (Mega Menus use the Page Builder tab)
3. Alt Text, On Click and Link CSS Class specifiers
4. Dynamic Sub-menu based (select path, page types, order / where, etc) for navigation that you wish to reflect the content tree.
5. Current page selection via <navigation-page-selector /> tag helper, this allows the entire navigation to be cached and the "current" class to be applied client-side.

See these features on the _layout.cshtml.

Secondary Navigation

Along with the main navigation, often pages have side navigation or secondary navigation to show pages at or below the current page. The baseline has a <vc:secondary-navigation/> view component that allows you to pass it Path, level, and other items to show the navigation. You can see it on the Basic Page. Unlike the main navigation, the secondary navigation is purely generated from the content tree.

The views for the secondary navigation are different than the main navigation so you can modify them as needed.

The parameters may be slightly confusing, so let me list them out:

• Path: The Path you wish to start at. If empty or null will use the current page's path.
• Level + LevelIsRelative: The level you wish to start the navigation at. If LevelIsRelative is false, then 0 = root. If LevelIsRelative is true, then 0 = Current Page's level, 1 = Parent of current page, 2 = grandparent, etc.
• MinimumAbsoluteLevel: How deep the navigation should display. 1 = only children, 2 = children and grandchildren, etc.
• CssClass: A wrapper class for the navigation. Useful for using the <navigation-page-selector/> tag helper.
• IncludeSecondaryNavSelector: This will automatically include the <navigation-page-selector/> tag helper using the given Path as the current page.

To make things easy, you can pass a null to the <vc:secondary-navigation navigation-properties=null /> for a default side navigation.

Breadcrumbs

Breadcrumbs are another key navigation element, and you can add them easily through the <vc:breadcrumbs/> view component. It has two properties, include-default-breadcrumbs (default breadcrumb is set through Localization -> Resource String within Kentico Xperience), and nodeid. You can pass -1 to the node id and it will use the current page as its context.

<vc:breadcrumbs include-default-breadcrumb="true" nodeid="-1" />

Breadcrumb JSON+LD

There is a variant of the breadcrumbs that renders out the JSON+LD for the breadcrumbs for SEO purposes. Same parameters, just: <vc:breadcrumbs-json include-default-breadcrumb="true" nodeid="-1" /> and should be included in the header of your page.