Header Navigation A header navigation is a crucial UI element at the top of a webpage or application that helps users orient themselves and move effortlessly through a website. This will render the top navigation of the site.
  • Use Cases: Used render the top navigation of the site
  • Dependencies
    • None required. The Header navigation is fully self-contained which requires data source which contains navigation items as links
    Title and Link:Click to go through the tiers of navigation (e.g. 3 clicks to get to a level 3 page)
Home 1 Product 1 Product link 2 Events
NavBar (displayed as Navigation Bar)
Path: /sitecore/templates/Project/AlexionWebToolkit/Content Types/Navigation/NavBar
This is the main navigation template, which is the root of the navigation structure. It is created from _NavBar base template

NavigationRoot (displayed as Navigation Root)
 Path: /sitecore/templates/Project/AlexionWebToolkit/Content Types/Navigation/NavigationRoot
This is the first-level navigation template. Items, created with the NavigationRoot template are located under the item, created with the NavBar template in the content tree. It is created from the _NavigationRoot base template
Link
Path: /sitecore/templates/Project/AlexionWebToolkit/Content Types/Navigation/Link
This is the third-level navigation template (leafe). Items, created with the Link template are located under the item, created with the Navigation template in the content tree. It is created from _Link base template


Creating Header Navigation
  1. In Content Editor under Global Folder create a Navigation Folder item. Name it Global Navigation (if already created skip this).
  2. Under Global Folder -> Global Navigation create a Navigation Bar item. Call it Header Navigation (if already created skip this).
  3. Under Global Folder -> Global Navigation -> Header Navigation create a Navigation Root item. This item is the first-level navigation item.
  4. In the created Navigation Root item add the Label field value. If this navigation item does not contain any children, add a Link field value by pressing the Insert link and choosing the corresponding page item in the content tree.
    • Repeat this step to create all first-level navigation items.
  5. Under the first level navigation item, which should have children, create a Navigation item. This item is the second-level navigation item, which will be a child of the first level navigation item.
  6. In the created Navigation item add the Label field value. If this navigation item does not contain any children, add a Link field value by pressing the Insert link and choosing the corresponding page item in the content tree.
    • Repeat this step to create all subsequent second-level navigation items for the given parent navigation item. Then repeat 6, 7steps for all first-level navigation items, which should have children.
  7. Under the second level navigation item, which should have children, create a Link item. This item is the third-level navigation item, which will be a child of the second-level navigation item.
  8. In the created Link item add the Label field value.
  9. Add Link field value by pressing Insert link and choosing the corresponding page item in the content tree.
    • Repeat steps for all third-level navigation items.
  • Normal: Navigation Items with child navigations
Home 1 Product 1 Product link 2 Events
  • Color and NoModal fields has no impact in this component
  • BackgroundColor and TextColor should be set in theme file for this component
Original Documentation: Confluence Link Designs: Figma Link Related Documentation: Top Notification