Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProThe phone navigation menu: a labelled hamburger button opens a left sheet with the site links, marks the current page and closes with focus returned on navigate.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use this for the site header below the tablet breakpoint. Show the full link row on wide screens and this button on narrow ones.
Do not use it for app navigation with nested sections (use a sidebar) or put forms or secondary actions in it.
It builds on button and sheet, which the CLI installs for you.
import { SheetNavMobile } from "@/components/sheet-nav-mobile"<SheetNavMobile
links={[
{ href: "/", label: "Home" },
{ href: "/docs", label: "Docs" },
]}
current={pathname}
onNavigate={(href) => router.push(href)}
/>| Prop | Type | Default | Description |
|---|---|---|---|
links | { href, label }[] | - | Navigation links. |
current | string | - | Href of the current page. |
onNavigate | (href: string) => void | - | Handle navigation on the client; the default is a normal link. |
title | string | Menu | Sheet title. |
aria-expanded; the links are in a nav named "Main".aria-current="page" and a visual style.SheetClose) and focus returns to the button; pass onNavigate to route on the client.| Key | Action |
|---|---|
| Enter or Space on the button | opens the menu |
| Tab | through the links |
| Escape | closes and returns focus to the button |
The pattern ships a Testing Library test (sheet-nav-mobile.test.tsx) that covers the labelled navigation and current page, closing with focus return and Escape.