Components
Navigation
Primary bars, sidebars, breadcrumbs and tabs. The current location is marked with a 2px rule in the interactive colour and a heavier weight — never with colour alone.
Primary navigation
A horizontal bar below the masthead, for up to about six destinations. The current page
is marked three ways at once: a 2px rule on the block-end edge, a heavier font weight, and
aria-current="page".
<nav class="tmt-nav" aria-label="Primary">
<ul class="tmt-nav__list">
<li><a class="tmt-nav__link" href="/devices" aria-current="page">Devices</a></li>
<li><a class="tmt-nav__link" href="/schedules">Schedules</a></li>
<li><a class="tmt-nav__link" href="/energy">Energy</a></li>
<li><a class="tmt-nav__link" href="/settings">Settings</a></li>
</ul>
</nav>aria-current="page" is not optional. The
underline and the weight change are invisible to a screen reader user; this attribute is
the only thing that tells them where they are. It also drives the styling, so there is one
source of truth.
Sidebar navigation
For more destinations than a bar can hold, or for documentation-shaped content, use the vertical variant. The active marker moves from the bottom edge to the inline-start edge, which mirrors correctly in Arabic without any extra rules.
<nav class="tmt-nav tmt-nav--vertical" aria-label="Settings">
<p class="tmt-nav__group-title">Account</p>
<ul class="tmt-nav__list">
<li><a class="tmt-nav__link" href="/profile">Profile</a></li>
<li><a class="tmt-nav__link" href="/security" aria-current="page">Security</a></li>
</ul>
</nav>Group titles use the eyebrow treatment — small, wide-tracked, uppercase. They are
paragraphs rather than headings because they label a list rather than introduce a section;
if the groups are genuinely sections of the page, use real headings and let the nav's
aria-label name the whole thing.
This guide's own sidebar is a styled variant of this component.
On small screens
Below 960px a sidebar becomes a drawer behind a toggle button. The rules that keep it usable:
- The toggle is a real
<button>witharia-expandedandaria-controlspointing at the nav's id. - Escape closes it, and so does clicking the scrim behind it.
- The drawer slides from the inline-start edge, so it comes from the right in Arabic.
- Focus moves into the drawer when it opens and returns to the toggle when it closes.
A horizontal primary bar can simply wrap onto two lines on narrow screens — that is usually better than hiding four links behind a menu.
Breadcrumbs
For hierarchies deeper than two levels. The last item is the current page and is not a link.
<nav class="tmt-breadcrumb" aria-label="Breadcrumb">
<ol class="tmt-breadcrumb__list">
<li><a href="/">Home</a></li>
<li><a href="/living-room">Living room</a></li>
<li><span aria-current="page">Ceiling light</span></li>
</ol>
</nav>The separator is a forward slash inserted with CSS, so it is never read aloud and never selected when someone copies the trail. A slash is direction-neutral; an arrow would have to be mirrored, which is why the system does not use one.
Tabs
Tabs switch between panels of the same page. They are not navigation — if the content lives at a different URL, use links, not tabs.
<div class="tmt-tabs" role="tablist" aria-label="Device details">
<button class="tmt-tab" type="button" role="tab"
id="tab-overview" aria-selected="true" aria-controls="panel-overview">
Overview
</button>
<button class="tmt-tab" type="button" role="tab"
id="tab-schedule" aria-selected="false" aria-controls="panel-schedule" tabindex="-1">
Schedule
</button>
</div>
<div id="panel-overview" role="tabpanel" aria-labelledby="tab-overview" tabindex="0">…</div>tabindex="-1" on the others); the arrow keys move
between tabs, and Home and End jump to the first and last. In
Arabic the arrow keys reverse with the visual order. The CSS gives you the appearance —
the behaviour is yours to implement.
In Arabic
Navigation is where right-to-left problems show up first, because it is full of edges and arrows.
- Order is unchanged in the markup. The browser reverses the visual order; the DOM order stays the tab order.
- The sidebar's active marker and the drawer both follow the inline-start edge, so they move to the right automatically.
- A chevron indicating "deeper" must be mirrored. A chevron indicating "expand downward" must not.
- Check it with the RTL toggle on each example above before you ship.
Do and don't
Do
- Give every
<nav>anaria-labelwhen there is more than one on the page. - Mark the current page with
aria-current="page". - Keep labels to one or two words, in sentence case.
- Keep the order identical across the product.
Don't
- Hide primary destinations behind a menu on desktop.
- Use tabs for things that are really separate pages.
- Rely on the underline alone to show the current page.
- Nest more than two levels — that is a sign the information architecture needs work.