Skip to content
Site volume
Colourway

Components

Navbar

The site header: logo, items with disclosure mega panels, the display utilities and the action key.

Import from@maxgrits/overprint-react/navbar
On this page

Example#

Look of this example
Site volume
Live render of examples/navbar/basic.tsx

Usage#

Every page of the site has one navbar at the top: the logo, the sections, the visitor's utilities and the action key. It is sticky by default and prints on a solid surface, never translucent over moving content.

  • Items. Up to about six sections. An item with a panel becomes a mega panel: the item stays a link to its hub, and a small disclosure key beside it opens the panel (the APG disclosure navigation pattern), so every section works without JavaScript.
  • Panels hold groups of links with descriptions and an optional feature, with the mark lit for the lines the panel covers.
  • Utilities default to the theme toggle and the compact volume dial (D-B12); action holds the page's action key at sm.
  • Phones (below 64rem) show the logo, the action key and a Menu key that opens NavSheet.
  • Current page. current sets aria-current="page" and a 4 px ink rule under the item.

Anatomy#

Site volume
The parts of examples/navbar/basic.tsx, numbered:
  1. Bar64 px on phones, 76 px from 64rem, on the solid surface.data-mk-part="bar"
  2. LogoThe mark alone below 22.5rem.data-mk-part="logo"
  3. Menu keyOpens NavSheet. From 64rem the sections, utilities and action key take its place.data-mk-part="menu"

Volume#

Reading layer: the bar is identical at every volume. The utilities are where visitors turn the volume.

Content#

  • Item labels are one or two words, the names of the sections: "Work", "Pricing".
  • The action key repeats the site's main verb: "Get a quote".
  • Panel link descriptions say who the page is for, in a line.

Do and don't#

Do

Site volume

A few sections, one action.

Don't

A navbar with eleven items, a search field, a phone number and two action keys.

Everything in the bar.

The bar is read in a glance. Every extra item makes the others harder to find; group pages under a section with a panel instead.

Accessibility#

  • Mega panels follow the APG disclosure navigation pattern: the item links to its hub, a separate button (aria-expanded, named "{label} menu") opens the panel, Escape closes it and returns focus.
  • Without JavaScript every item still links to its hub; on phones the fallback menu key links to the footer's map.
  • The current page carries aria-current="page" and a 4 px rule.
  • The bar is solid: no translucency over moving content.

Props#

PropTypeDefaultDescription
logoReactNode<Logo href="/" collapse="phone" />Default `<Logo href="/" collapse="phone" />`.
items requiredreadonly NavItem[]none
utilitiesReactNode<ThemeToggle /> and <VolumeDial appearance="compact" />Default `<ThemeToggle />` and `<VolumeDial appearance="compact" />` (D-B12).
actionReactNodenoneThe action key, e.g. `<Button variant="action" size="sm" href="/contact">Get a quote</Button>`.
phoneMenuReactNodenoneThe phone menu (below 64rem), e.g. `<NavSheet … />`.
menuHrefstring#mk-footerThe fallback menu key's target (default `#mk-footer`, the footer's map) and name (default "Menu").
menuLabelstringnone
navLabelstring"Main"The navigation's name (default "Main").
stickybooleantrueDefault true.

Plus 279 React and DOM attributes passed through to the root element (className, ref, aria-*, event handlers and the rest). Generated from NavbarProps in packages/overprint-react/src/reading/navbar/navbar.tsx.

Tokens#

System tokens (24)

Its own properties (2)

  • --mk-header-h
  • --mk-navbar-bar-h

Scanned from its CSS at build and checked against its registry entry; 16 read but not declared there.

Changelog#

Arrived in 0.1.0.

0.1.024 October 2026

  • MinorreactSection with its plate and Art slot, Plate, VolumeScope, PageHero, SectionHead, Eyebrow, Card, LineCard, InfoPanel, Stack, Cluster, Grid, Container, Main, Rule and the FittedLine client fitter; Navbar with the NavDisclosure mega panels, Footer, FooterMap, BuildStamp, SkipLink, ActionDock and VisitorControls; the Table parts, ComparisonTable with the one-tier switcher, SpecStrip, Numeral, Stat, StatGroup, StatusChip, Badge and ScoreDial; Prose with mdxComponents, Quote, CodeBlock with CopyButton, Figure, ScreenshotFrame and PhoneFrame; and the brand: the three evolved 2 × 2 options in markGeometry (a Overprint by default, b Paper seam, c Key block) with the pixel-snapped px mode and the one-ink seam variant, logoGeometry with the 1x clear-space frame, Mark, Wordmark, Logo, MaxosMark and LineBadge. Read the whole entry
  • Patchreact, threeReact: the label role (14 px, now 600) prints in --mk-text in Eyebrow, the Card and PageHero eyebrows, SpecStrip labels, the stacked table's cell headers, the Navbar panel's meta and the NavSheet group titles, because no secondary ink reaches the label's floor; placeholders, input start and end text and the select's empty choice print in the new --mk-on-control-2; Art interactive marks no layer, so the 3D stage's own art and plate layers decide (its caption and keys never sit inside an art layer). Read the whole entry
  • PatchreactStatGroup lays out by its own width (a size container), SpecStrip keeps 2 × 2 inside a narrow container and the Navbar's desktop bar also needs a 60rem header, so phone-width specimens on wide screens no longer squeeze; the Navbar bar wraps rather than spills under wide text spacing. Read the whole entry