Main Header v3

Accessible header component.

Dependencies

• Switch Icon

How to

The Main Header v3 component is an accessible, website navigation. It includes an animated search form.

On bigger screens (past the medium breakpoint), the list of menu items is based on flexbox: it automatically creates space between items, even if you add/remove navigation items.

The .header-v3__logo and .header-v3__nav-control are hidden on bigger screens and replaced entirely by the .nav-v3 element (which includes a duplicate of the logo).

If you want the header to be fixed, from the .header-v3 element:

• Remove the .position-relative utility class;
• Add the .position-sticky and the .top-0 utility classes.

<header class="header-v3 position-sticky top-0 js-header-v3">
  <!-- header content here -->
</header>

Categories

• Navigation > Header

Bug report & feedback

Component Github page ↗