Header styles

Story includes several header styles and configuration options

Flexible layout options allow you to easily configure your brand logo, menu items, and links.

Adding an optional toolbar block on top provides additional options to hold language and currency drop-downs, also additional navigation:

Using a transparent header provides even more design options. Explore with the Header settings to find additional flexible layouts and icon options.

Mobile devices will be served with the Mobile drawer menu version.

Places the brand logo centered and above the navigation. Allows space on the left for social icons. Cart and optional search and account icons are placed on the right-side:

Tip: Ideal when using a larger top-level navigation menu

Moves the brand logo to the left side. This option provides a more compact header as all items are placed in one row. When the logo is placed above the menu, two rows are used and additional space is required. Logo beside menu is a good option when your top-level navigation is compact:

Social icons are not displayed with this menu style.

Adapted from the popularity of mobile design, this option provides the most compact and minimal header style. This style is also consistent between both desktop and mobile devices. Animations are used to make the experience fluid:

Social icons are placed at the bottom of the menu drawer.