FullscreenMenu

A bar's links when the bar is too narrow for them: a menu button that opens them full screen, on floating white glass — large rows on the brand's left edge, the one call to action at the foot.

Example

Press the menu button. The panel repeats the bar — the brand where it was, the close where the button was — so nothing jumps. Choosing a link shuts the menu, then follows it.

import { FullscreenMenu } from "@/components/shared/fullscreen-menu";

<FullscreenMenu
  label="Menu"
  closeLabel="Close"
  brand={wordmark}
  links={[{ href: "#how-it-works", label: "How it works" }, …]}
  action={<ButtonLink href="#early-access" variant="primary" size="lg" className="w-full">Get early access</ButtonLink>}
  className="lg:hidden"
/>

API reference

Prop	Type	Default	Description
label	string	—	The menu button's and the panel's accessible name: “Menu”, translated.
closeLabel	string	—	The close button's accessible name: “Close”.
brand	ReactNode	—	The panel's top left, as in the bar — pass the same wordmark.
links	{ href, label }[]	—	The rows, in page order. An in-page link (#…) shuts the menu, then scrolls.
action	ReactNode	—	The one call to action, at the panel's foot — a full-width ButtonLink, the black primary.
className	string	—	Layout for the menu button: where it shows (lg:hidden).

Guidelines

Only where the bar can't hold its links: below lg on the landing. From lg up the links sit in the bar and the button goes.
A modal dialog: focus stays inside, Escape and the close button shut it, focus returns to the menu button. The page doesn't scroll under it.
One call to action, at the foot. Under prefers-reduced-motion the panel appears without fading or rising.