Site Header

Navigation

Overview

The site header on desktop view has the main navigation and the language switcher. On mobile view, the main navigation will be grouped in a expandable menu and the language switcher will be visible too unchanged.

Live example

Micaela Avigliano

The wide header moves its current page and opens the language menu. The compact one is the site's header below the lg breakpoint: its menu button opens the same modal sheet, with the page behind it inert.

Usage

My name is the home link and it is plain text.
wide shows the nav links and compact, below the lg breakpoint, swaps them for an icon-only menu button, named "Open menu", that opens a modal dialog under the header.
Place SkipLink before it.

Compact header and its menu

The compact header is the name, the LanguageSwitcher and the menu button in one row. The example opens the same menu the site opens, under its own header and at its width.

Enter or Space on the menu button opens the dialog and moves focus to its close button. The button has aria-haspopup="dialog" and aria-expanded.
The menu is a modal dialog named "Mobile navigation": a close button, then the links as a numbered list (01 Home to 05 Design System), each in large type with an arrow and named "Go to Blog". The current page has a tint and aria-current="page".
Tab and Shift+Tab cycle through the close button and the links without leaving the dialog. Escape, the close button or a press outside closes it, and focus returns to the menu button.
Choosing a link closes the menu. The page behind is inert and does not scroll while the menu is open.

Accessibility

Semantic structure

The header is a native header element. SkipLink is its first child, an a to #main-content, so the keyboard reaches it first.
The name is an a to the home page. It is a link, not a heading or an image.
The wide navigation is a nav named "Main navigation" that holds a links. The current page has aria-current="page". Below lg it is display: none, so it leaves the accessibility tree instead of staying as a hidden duplicate of the menu.
The language switcher is a button with aria-haspopup="listbox" and aria-expanded. Its options are buttons with role="option" and aria-selected.
The compact menu button is a button with aria-haspopup="dialog" and aria-expanded. The menu is a native dialog named by an h2, hidden from sight, through aria-labelledby: "Mobile navigation".
Inside the dialog are a nav and an ol with role="list" of a links, each named "Go to Blog". The numbers are aria-hidden, so the name is read once.

This section is still in progress.

References