Main Header

Accessible header navigation in CSS and Javascript.

How to

The Main Header component is a responsive, accessible website menu navigation. On smaller devices, the navigation visibility is controlled by a menu button.

The two height variables set the 1) default height of the header (mobile-first approach) and 2) the updated height of the header past the md (medium) media query.

:root {
  --main-header-height: 50px;
  --main-header-height-md: 70px;
}

To change the max-width value, you can edit the .max-width-lg class applied to the .container element (check the base/_grid-layout.scss file for more info about the .container and .max-width-{size} utility classes).

If JavaScript is disabled, the navigation preserves its visibility regardless of the device size.

To make sure the link between the menu button and the navigation visibility is clear to users using assistive technologies, the aria-controls value of the button is equal to the ID of the navigation. Also, we toggle the aria-expanded value in JS (false/true) when the button is clicked, and we use the aria-expanded attribute in CSS to target the button status and animate the menu icon.

.main-header__nav-trigger[aria-expanded="true"] .main-header__nav-trigger-icon {
  background-color: transparent;

  &::before {
    transform: rotate(45deg);
  }

  &::after {
    transform: rotate(-45deg);
  }
}

The aria-current="page" attribute is used to mark the current list item. In CSS we use the same attribute to highlight the current item.

.main-header__nav-link { // link within list item
  color: var(--color-contrast-higher);

  &[aria-current] { // style of selected link
    color: var(--color-primary);
  }
}

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

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

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

Categories

• Navigation > Header

Bug report & feedback

Component Github page ↗