Sidebar Nav
Composable application sidebar with groups, badges, and active states.
Install
npx shadcn@latest add https://plinth.dhrumilkherde.com/r/sidebar-nav.jsonUsage
Layout-agnostic: place it in your own fixed or sticky container and control the width there.
import {
SidebarNav, SidebarNavHeader, SidebarNavGroup, SidebarNavGroupLabel,
SidebarNavItem, SidebarNavBadge, SidebarNavFooter,
} from "@/components/ui/sidebar-nav";
<SidebarNav>
<SidebarNavHeader>{/* logo */}</SidebarNavHeader>
<SidebarNavGroup>
<SidebarNavGroupLabel>Workspace</SidebarNavGroupLabel>
<SidebarNavItem href="/dashboard" active={pathname === "/dashboard"}>
<Home /> Dashboard
</SidebarNavItem>
</SidebarNavGroup>
<SidebarNavFooter>{/* user menu */}</SidebarNavFooter>
</SidebarNav>Items accept a leading icon and an optional trailing SidebarNavBadge. For a
mobile drawer, render the same SidebarNav inside a
Sheet with side="left".
Accessibility
- Semantic
nav; the active item carriesaria-current="page". - Items are real anchors, so middle-click and keyboard behavior come free.