Navigation

Navbar

GdNavbar owns the geometry, surface and stickiness; the app owns what goes in it, through slots — brand, a middle, actions.

The COMPONENT is the shell. The assembled product header — brand, section pills, help, the account, and the rules about what collapses where — is the Navbar block.

User menu

THE identity control — the avatar that opens the account menu. Every GRIDD app has one, and before this existed every GRIDD app had a slightly different one.

Only the destinations are a prop: the map has a certifier desk and Code has neither that nor a settings page. The chip, the chrome, the keyboard and signing out live in the component.

Sign out is always last, always present, and always separated. A slightly destructive action flush beneath "Settings" is how people sign out by accident — it sits under a rule, away from the destinations.
It EMITS rather than acts. A UI package has no business owning a session: the endpoint, the redirect and the cookie are the app's.
The account is named in the trigger's accessible name and its tooltip, not in a head inside the panel — role="menu" may only contain items, groups and separators, and the ARIA is the part that must not bend to fit a design.
The keyboard is GdMenu's. One disclosed difference from v1: ArrowUp on the trigger opens onto the FIRST item, not the last.

Side nav

You are looking at one. The rail on the left of this page is GdSideNav with this site's own sections passed in — sticky, scrolling independently of the page, one tree level.

184–200px wide, white surface, 1px right border. Items are 12.5px at weight 500; exactly one is active — accent wash, accent ink, weight 600.
The active item comes from NuxtLink's own route matching, so it cannot disagree with the URL. A caller-supplied flag can, and does.
An item with children is a real <button aria-expanded>; the group holding the current page opens itself, and navigating never slams a group shut behind you.
Counts ride the row as a badge on the right, same as list rows. No icons in rail items — the words carry it.
A disabled item renders present and visibly inert with an honest reason, never hidden.

Stepper

Where you are in a short, ordered sequence — the lodgement flow. Done steps take the tick; the connector takes the colour of the step it leads to, so the line reads as progress.

Property
2Project
3Review

Accordion

Disclosures for a rulebook. Not exclusive — reading Setbacks should not close Height limits, and an accordion that snaps shut behind you is how people lose their place.

1.5 m to side and rear boundaries, 6 m to the primary street frontage.

Breadcrumb

The last crumb is the current page and is not a link — linking a page to itself is a dead control that a keyboard user still has to tab through. The separators are aria-hidden, because a screen reader announcing "slash" between every crumb turns a three-item trail into six.

Contents rail

The "On this page" list on the right. 11.5px items on a 2px left rule, active in accent.

The active item is derived from scroll position via IntersectionObserver rather than from location.hash, because the hash only changes when someone clicks a link — scrolling past four headings leaves it pointing at the first, and the rail then says you are somewhere you are not. Scroll this page and watch it track.