Site Navigation A header navigation component that appears at the top (header) of the page and helps users move between main modules/pages of the site.
  • Use Cases: Site Navigation contains navigation links used to navigate across different pages of the site. 
  • Dependencies
    ​    None required. This component is fully self-contained and does not rely on child items or external data sources.
  • It typically contains a logo which links to the Home page and other Navigation links which are defined in the data source item
  • Added to the "awt-header" placeholder
  • It can optionally include a search icon on the top right corner
  • It includes Menu button (☰) for mobile
The Header navigation of this page is an example of the Site Navigation component
Navigation Component main component is created using the template - /sitecore/templates/Feature/AlexionWebToolkit/Content Types/Navigation/SiteNavBar :
Navigation Component menu and submenu is created using the template - /sitecore/templates/Feature/AlexionWebToolkit/Content Types/Navigation/SiteNavMenuItem :
Creating Site Navigation datasource item
  1. In Content Editor, under Global Folder create Navigation component data item with template - /sitecore/templates/Feature/AlexionWebToolkit/Content Types/Navigation/SiteNavBar (skip if already present).
  2. In Content Editor under the created Navigation component, you can create the Navigation menu with the template - /sitecore/templates/Feature/AlexionWebToolkit/Content Types/Navigation/SiteNavMenuItem or you can add additional navigation links to the existing menu to create submenu links.
  3. Similar to adding menu/submenu links, you can also add action link using the template - /sitecore/templates/Feature/AlexionWebToolkit/Content Types/Navigation/SiteNavActionButton. It appears in the top right corner.
  4. Add/Update the required field values - Logo, Link
  5. Fill in optional fields as necessary.
  6. In Experience Editor, insert the SiteNavigation rendering into the awt-header placeholder.
  7. Associate the created/updated Navigation component data item as the data source.
  • Bordered: Standfirst Text with an outer border
  • Dark mode: Article with black background
  • There are currently no known issues with this component
Original Documentation: Confluence Link Designs: Figma Link Related Documentation: CTA Component, Text Description Card