Navigation · m.css

Page layout

Where a nav or aside sits decides its role, with no attributes:

A nav directly inside body > header is a sticky top bar. A second one right after it is a subnav that sticks below it.
A nav or aside directly inside body becomes a sticky column beside main on wide screens, like this page's component list and "On this page" rail.
On narrow screens everything stacks, and navs become rows that scroll sideways.

The docs layout shows a top bar, subnav, side nav, and rail together.

A nav with two lists puts them at opposite ends, such as a brand and links.

Label every nav when a page has more than one, so screen reader users can tell them apart.

Links use the text color and turn primary on hover and for aria-current.

A nav whose list is an ol is a breadcrumb trail.

The separators are drawn with CSS and aren't read aloud. Mark the last link with aria-current="page".

The trail uses small, muted text.

An aside inside content is a callout on a raised surface. hr and address round out the page furniture.

m.css
hello@example.com

An aside is a complementary landmark. Give it a label if a page has more than one.

Callouts use the raised surface and --m-radius.