Main Header

Accessible header navigation in CSS and Javascript.

Copy: View demo

Dependencies

All components are built upon the CodyHouse Framework.

How to

The Main Header component is a responsive, accessible website 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 .container--lg class (check the _grid-layout.scss global for more info about the .container class and its modifiers).

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);
  }
}

Bug Report & Feedback

Get in touch: suggest a component or report a bug.