Header

Navigation consists of a menu and utility section meant to help a user orient themselves and move through the website. It’s persistent on every page to ensure a consistent experience across websites.

Standard Header

To obtain this result, use header tag with header-container, header-brand, header-toggle, header-logo, header-nav, header-list, header-item and header-link class name.

Dense Header

To obtain this result, use header tag with header-container, header-brand, header-toggle, header-logo, header-nav, header-list, header-item and header-link class name. Add additional dense-header class name.

Prominent Header

To obtain this result, use header tag with header-container, header-brand, header-toggle, header-logo, header-nav, header-list, header-item and header-link class name. Add additional prominent-header class name.

Collapsed Header

To obtain this result, use header tag with header-container, header-brand, header-toggle, header-logo, header-nav, header-list, header-item and header-link class name. Add additional collapsed-header class name.