Navigation menu · Nav link · Navigation panel

Navigation menu — the site’s top bar, fixed 30 down and centred: 856 wide, padding space/8, a frosted ground (surface/glass at 49 % over a 7.3 blur), radius/8, elevation/modal; the Mobupps mark at 122 × 31 (Logo/Mobupps), Nav links at an 8 gap — the component carries five with Products first and its caret, the site’s bar six with Home first, the black CTA at the right.

Beta · Navigation and overlay · packages/css/src/components/navigation-menu.css

.pui-navigation-menu (__logo __links; --fixed for the site’s placement) · .pui-nav-link (--products --cta, __caret, aria-expanded) · .pui-navigation-panel (__link) · .pui-navigation-menu--mobile (__burger, below the tablet breakpoint). Web only.

Navigation menu · Nav link · Navigation panel — every size and every stateOpen in the workshop

Sizes across, states down.

What it is for

Links 1–5 exposed (label, type, state), Has link 5; the CTA exposed, Has CTA
Products opens Navigation panel 4px under it, left-aligned to the link, over motion/menu
One width, 856; below 768 the site swaps to its mobile nav

Use when the top of every site page — mobupps.com and the product marketing pages.

Do not use when inside a product (Sidebar + Topbar); on a landing page that hides navigation on purpose (the 404 keeps it).

Relates to Nav link, Navigation panel, Logo/Mobupps, Sidebar, Topbar, Footer.

Anti-patterns a solid white bar (the frost is the design) · six links · a CTA that is not the one action · the bar without its 30px offset from the top · a fill changed on the instance.

Keywords: navigation menu, site header, top nav, main nav, frosted bar

Figma — page Navigation menu: Navigation menu (1 variants) · Nav link (6 variants) · Navigation panel (1 variants) · Navigation menu - mobile (1 variants)

shadcn: navigation-menu

The markup — copy this

The class, the parts, and nothing that is not in the package. The same block opens navigation-menu.css.

<nav class="pui-navigation-menu"><a class="pui-navigation-menu__logo" href="/">…svg…</a>
  <div class="pui-navigation-menu__links">
    <button class="pui-nav-link pui-nav-link--products" aria-expanded="false">Products<span class="pui-icon pui-nav-link__caret">…</span></button>
    <a class="pui-nav-link" href="…">Case studies</a> …</div>
  <a class="pui-nav-link pui-nav-link--cta" href="…">Contact us</a></nav>
<div class="pui-navigation-panel"><a class="pui-navigation-panel__link" href="…">MAFO</a> …</div>

Accessibility — measured, not assumed

Every number here is measured on the rendered component: contrast (npm run contrast:render), the focus ring (npm run focus) and the keyboard (npm run keyboard). The floors are principle 12’s.

Contrast

ink on ground	reads	floor	the matrix calls it
`#0b0202` on `#ededf0`	17.55	4.5	text.default on surface.glass (undefined)	ok
`#0b0202` on `#fbfbfd`	19.84	4.5	text.default on surface.glass-strong (undefined)	ok
`#ffffff` on `#0b0202`	20.51	4.5	Primary button label (promised)	ok

3 distinct pair(s) rendered, 0 that axe calls a violation.

The focus ring

primitive	on	the indicator	over	the change
Nav link	surface/page	shadow `#6a66e4` 2 px	`#ffffff`	4.53	ok
Navigation panel link	surface/page	shadow `#6a66e4` 2 px	`#ffffff`	4.53	ok
Navigation menu logo	surface/page	shadow `#6a66e4` 2 px	`#ffffff`	4.53	ok
Navigation menu burger	surface/page	shadow `#6a66e4` 2 px	`#ffffff`	4.53	ok

12 of 12 focus stop(s) in this block meet WCAG 2.4.13 on screen — the same crop screenshotted focused and unfocused, and the difference measured.

Keyboard

Nothing in this component claims an ARIA role with a keyboard contract; its controls are ordinary ones and the browser already gives them their keys.

Tab order across the whole library is document order over 344 stops, and Shift+Tab is its exact reverse — no keyboard trap anywhere (WCAG 2.1.2).