Navigation

NavigationRail

A 96px vertical rail on the left, cookie logo and 56×32 pill destinations.

Category: NavigationOpen the preview alone

Live preview

Reference specimen. Example copy comes from the Pelote specs and is in French.

ExpressiveRéférence

VPS ADMIN

UX / UIRègles illustrées

À faire

Overview Services

Trois signaux pour l'actif : pilule, icône remplie, graisse.

À éviter

Overview Services

Actif signalé par la seule couleur du texte.

Variante M3EMême composant, mêmes rôles, autre matière

PlazaWii U / 3DS

AccueilAppsRéglages

Destinations en tuiles, sélection par cadre primary.

ChromeY2K

OverviewContainersServices

Destinations en boutons chromés, l'actif en gel primary.

Reference specimen. Example copy comes from the Pelote specs and is in French.

A 96px vertical rail on the left (web, beyond the Layout breakpoint: 600px M3 or 760px): cookie logo, destinations with a 56×32 pill and a 12px label.

Rules

Active: secc pill, filled icon, 600 label, aria-current="page".
All destinations on desktop; on mobile the first four move to the NavigationBar, the rest to More.
1px sch right border.