Mobile Navigation Sheet
A free mobile navigation menu React component with an inset modal sheet, real links, focus trapping, scroll lock, and six bounded visual controls.
Sailmakers / Falmouth
Cut flat.
Holds its shape.
Every sail is designed here and cut on our own floor, which is why a recut in February costs a fraction of a new headsail in June.
Customise
Code
<NavMobileSheet
brand="Marram Sail Loft"
brandHref="#nav-mobile-wardrobe"
links={[
{
label: "Sail wardrobe",
href: "#nav-mobile-wardrobe",
description: "Cruising, racing, and gaff-rigged classics",
},
{
label: "The loft",
href: "#nav-mobile-loft",
description: "Six sailmakers on the water at Falmouth",
},
{ label: "Repairs and recuts", href: "#nav-mobile-repairs" },
{ label: "Get a quote", href: "#nav-mobile-quote" },
]}
cta={{ label: "Book a rig check", href: "#nav-mobile-quote" }}
/>Mobile Navigation Sheet is a free navbar component for Next.js and React, styled with Tailwind and animated with Motion. It renders a compact branded header below the desktop breakpoint, then opens one labelled modal navigation sheet from either side with real anchors, optional link descriptions, and a final call to action.
The component captures focus on open, moves it to the close button, traps Tab and Shift+Tab, closes on Escape, backdrop press, link selection, or a desktop breakpoint change, and restores focus before the exit animation can finish. Body scrolling locks with scrollbar compensation and exact inline-style cleanup, malformed destinations are filtered at runtime, and reduced motion removes sheet travel and link stagger while preserving the complete navigation experience.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/nav-mobile-sheetUsage
import { NavMobileSheet } from "@/components/nav-mobile-sheet";
const links = [
{
label: "Work",
href: "/work",
description: "Selected launches and digital products",
},
{
label: "Studio",
href: "/studio",
description: "The team and how we work",
},
{ label: "Contact", href: "/contact" },
];
export default function Header() {
return (
<NavMobileSheet
brand="Northline Studio"
brandHref="/"
links={links}
cta={{ label: "Start a project", href: "/contact" }}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | required | Visible navigation brand text. |
| brandHref | string | "/" | Real home destination used by both brand anchors. |
| links | ReadonlyArray<{ label: string; href: string; description?: string }> | required | Two to eight primary links. Malformed or unsafe entries are omitted at runtime. |
| cta | { label: string; href: string } | undefined | Optional final navigation action. |
| side | "left" | "right" | "right" | Edge the sheet enters from. |
| width | number | 360 | Maximum sheet width in CSS pixels, clamped to 280-480. |
| stagger | number | 0.045 | Link reveal stagger in seconds, clamped to 0-0.12. |
| overlayOpacity | number | 0.56 | Backdrop opacity, clamped to 0.2-0.8. |
| blur | number | 8 | Backdrop blur in CSS pixels, clamped to 0-18. |
| radius | number | 24 | Inset sheet radius in CSS pixels, clamped to 0-40. |
| className | string | undefined | Additional classes merged onto the labelled navigation root. |
Customisation
Use the six playground controls for sheet geometry, entry edge, staging, and backdrop treatment. The three Tier 3 tokens below retheme the panel, focus and action accent, and overlay colour without changing the component source:
.my-mobile-nav {
--mobile-sheet-panel: var(--surface);
--mobile-sheet-accent: var(--ring);
--mobile-sheet-overlay: var(--foreground);
}
<NavMobileSheet
brand="Northline Studio"
links={links}
side="left"
width={400}
blur={12}
radius={32}
className="my-mobile-nav"
/>Frequently asked questions
- Is Mobile Navigation Sheet free for commercial use?
- Yes. Mobile Navigation Sheet is MIT licensed, so you can use it in personal and commercial projects without attribution.
- How does Mobile Navigation Sheet handle keyboard access and reduced motion?
- The trigger and close control are native buttons, every destination is a real anchor, and the open sheet is a labelled modal dialog. Focus moves to the close button, Tab and Shift+Tab stay inside, Escape closes, and focus returns immediately. Reduced motion removes panel travel and link stagger while keeping the same focus, close, and scroll-lock behaviour.
- How can I customise the mobile navigation sheet?
- Set side, width, stagger, overlayOpacity, blur, and radius to tune the effect and geometry. Values are clamped to safe ranges. Override the mobile-sheet-panel, mobile-sheet-accent, and mobile-sheet-overlay Tier 3 tokens to match your theme, while brand, link, description, and action wording remain normal component data.