Skip to content
Site volume
Colourway

Components

NavSheet

The phone navigation: a full-screen sheet with the Navbar's items as disclosures and the visitor controls.

Import from@maxgrits/overprint-react/nav-sheet
On this page

Example#

Look of this example
Live render of examples/nav-sheet/basic.tsx

Usage#

NavSheet is the phone menu: a full-screen drawer from the top with the logo, the action key and a close key in a sticky header, the navigation in the body and the visitor controls at the foot. Navbar uses it below 64rem.

  • Items with panels become exclusive disclosures listing their links; plain items are links. Rows are 48 px.
  • Focus starts on the first link; Escape, the close key and following a link close it (closeOnNavigate).
  • Controls. The foot holds VisitorControls, so theme, volume and sound are reachable on a phone too.

Anatomy#

The parts of examples/nav-sheet/basic.tsx, numbered:
  1. HeaderSticky: logo, action key, close key..mk-nav-sheet-header
  2. ItemsLinks and disclosures, 48 px rows..mk-nav-sheet-items
  3. FootThe visitor controls..mk-nav-sheet-foot

Volume#

Reading layer: identical at every volume.

  • Quiet

    Docs, forms, legal and long reads. Flat inks, no art in motion.

  • Studio

    The site default. Art on its own plates, one display moment per view.

  • Press

    Hero moments, covers and campaigns. Halftone fields and the second ink.

  • Rave

    Launches, posters and the 404. Every ink, and the words still win.

Content#

  • The same labels as the desktop navbar, in the same order.
  • The close key is named "Close menu".

Do and don't#

Do

The same sections on every screen.

Don't

A phone menu with different section names from the desktop navbar.

Two vocabularies for one site.

People move between phone and desktop. If the menu uses other words, they cannot find what they saw an hour ago.

Accessibility#

  • The Menu key opens it with focus on the first item; Escape, Close menu and any link close it.
  • Items with panels are disclosures, one open at a time; plain items are links.
KeysWhat happens
EnterorSpace on MenuOpens the sheet; focus moves to the first item
TaborShift+TabCycle through the sheet (focus is trapped)
EnterorSpace on an itemOpens its group (one at a time) or follows the link and closes the sheet
EscapeCloses the sheet; focus returns to Menu

The colour pairs it prints, with their contrast on both papers:

TextSurfaceRoleBoneNight
--mk-text--mk-surfaceuinot in this looknot in this look
--mk-text-2--mk-surfaceuinot in this looknot in this look

Process at Studio, normal contrast. Every look: the press check.

Props#

PropTypeDefaultDescription
items requiredreadonly NavSheetItem[]none
logoReactNodenone
actionReactNodenoneThe action key, e.g. `<Button variant="action" size="sm" href="/contact">Get a quote</Button>`.
controlsReactNode<VisitorControls />The foot (default `<VisitorControls />`, D-B12).
openbooleannone
defaultOpenbooleannone
onOpenChange((open: boolean) => void)none
closeOnNavigatebooleantrueClose when a link is activated (default true).
copyPartial<NavSheetCopy>none
specimenbooleannoneDocs and press frames only: the open sheet printed in place.
classNamestringnone

Generated from NavSheetProps in packages/overprint-react/src/reading/nav-sheet/nav-sheet.tsx.

Tokens#

System tokens (33)

Its own properties (1)

  • --mk-nav-sheet-pad

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

Changelog#

Arrived in 0.1.0.

0.1.024 October 2026

  • MinorreactThe reading layer's controls, overlays, forms and visitor prefs (P2-T1 to P2-T5): every Button is the comic hit key, with IconButton, Link and Tooltip; Input, Textarea, Select, Checkbox and CheckboxGroup, Radio and RadioGroup, Switch, Slider with the ruler, RulerReadout and SegmentedControl; Dialog, Drawer, NavSheet, Tabs, Disclosure, Faq and faqJsonLd on Base UI 1.9 where the platform falls short; Field, Fieldset, Form with the site's inline validation, ErrorSummary, Callout, Honeypot, FormTimestamp and QuoteForm; PrefsScript under 1 KB, usePref and setPref with cross-tab sync, ThemeToggle and the visitor VolumeDial; VisuallyHidden.
  • 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