MobileNav
NavigationSlide-in mobile navigation drawer with one-level nesting.
Full-screen dialog overlay that slides in from the side. Accepts a flat items list with optional children for one level of nesting. Active path highlighted with a Neo Green left border.
Usage
import { MobileNav } from "nosible-ux"
const items = [
{ label: "Signals", href: "/signals" },
{ label: "Watchlist", href: "/watchlist" },
{ label: "Reports", href: "/reports" },
]
export default function Example() {
return <MobileNav items={items} open={false} onOpenChange={() => {}} />
}Examples
With nested items
Accessibility
Dialog-based overlay: focus is trapped inside when open. Escape closes. Active path item has aria-current="page".
Props
| Name | Type | Default | Description |
|---|---|---|---|
className | string | undefined | — | |
currentPath | string | undefined | — | The current page path — used to highlight the active link. |
items | NavItem[] | — | Flat or one-level-nested navigation items. |
onOpenChange | (open: boolean) => void | — | Called when the open state should change (close button, overlay click, Escape). |
open | boolean | — | Controlled open state. |