Header

Header

The site header component containing branding, primary navigation, and utility links. Supports mega menu dropdowns, secondary navigation items, search integration, and responsive mobile hamburger menu behavior.

Control Properties

The Header rendering does not use traditional rendering parameters. Its behavior is controlled through its datasource template fields and nested placeholder content. The header's appearance is governed by site-level CSS theming via --mkl-primary, --mkl-nav-font, and related CSS custom properties.

ConfigurationTypeDescription
TopNavigationItemsMultilistSelects which Top Navigation Item children appear in the global nav bar above the main header.
Placeholders: navigation-itemPlaceholderContains Navigation Item renderings for the primary navbar links (mega menu dropdowns).
Placeholders: secondary-navigation-itemPlaceholderContains Secondary Navigation Item renderings for utility/login links on the right side.
Placeholders: logoPlaceholderContains the site logo rendering.
Placeholders: site-namePlaceholderContains the site name/heading rendering displayed next to the logo.
Placeholders: search-boxPlaceholderContains the search box rendering integrated into the header.

Template Properties

The Header rendering uses the Header datasource template (/sitecore/templates/Feature/Navigation/Header). The site-level navigation root template (_NavigationRoot) also contributes the HeaderLogo field.

FieldTypeDescription
TopNavigationItemsMultilistReferences Top Navigation Item children to render in the global nav bar strip above the main header.
HeaderLogoImageThe site logo image displayed in the navbar brand area (from the _NavigationRoot template).
Placeholder Structure

The Header rendering exposes nested placeholders that accept child renderings for each section:

PlaceholderAcceptsPurpose
navigation-itemNavigation ItemPrimary navbar links with mega menu dropdown support.
secondary-navigation-itemSecondary Navigation ItemUtility links (login, account) displayed on the right side of the navbar.
logoLogoSite logo rendering in the navbar brand.
site-nameSite NameSite name/heading displayed next to the logo.
search-boxSearch BoxSearch input integrated into the header.