A mobile app bar whose animated hamburger opens a full-height drawer with grouped links, accordion sub-links, a search field and an account footer. Focus is trapped while open and Escape closes it.
npx shadcn@latest add https://hyperblur.dev/r/nav-sidebar-mobile.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/nav-sidebar-mobile.tsx.
import { NavSidebarMobile } from "@/components/hyperblur/nav-sidebar-mobile"
<NavSidebarMobile brand="Harbor" activeHref="#inbox" showBackdrop={false} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Harbor" | Product name in the app bar and the drawer header. |
| groups | NavSidebarMobileGroup[] | Workspace, Team, Account | Link groups. A link with children becomes an accordion; badge adds a count pill. |
| activeHref | string | "#relaunch" | Href of the current page. Its link gets the active style and aria-current. |
| user | { name: string; role: string } | null | { name: "Iris Calder", role: "Design lead" } | Account shown at the bottom of the drawer. Pass null to hide the footer. |
| cta | { label: string; href: string } | null | { label: "Upgrade", href: "#" } | Small button in the drawer footer. |
| open | boolean | Controlled drawer state. Pair with onOpenChange. | |
| defaultOpen | boolean | false | Start with the drawer open when uncontrolled. |
| onOpenChange | (open: boolean) => void | Called when the drawer opens or closes. | |
| defaultExpanded | string[] | ["Projects"] | Labels of accordion links that start expanded. |
| accent | string | "#ff6b4a" | Color of the logo, badges, active markers, search focus and focus rings. |
| showBackdrop | boolean | true | Show the nav inside a phone frame with sample content for previews. When false the bar renders full width and the drawer is fixed to the viewport. |