Grouped sidebar menu with section labels, icon rows, optional counters, and a muted active state.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Nav14 } from "@/components/beste/piece/nav14";
<Nav14
groups={[
{
"label": "Workspace",
"items": [
{
"label": "Home",
"icon": "home",
"active": true
},
{
"label": "Projects",
"icon": "kanban",
"count": 4
},
{
"label": "Team",
"icon": "users"
}
]
},
{
"label": "Admin",
"items": [
{
"label": "Analytics",
"icon": "chart"
},
{
"label": "Settings",
"icon": "settings"
}
]
}
]}
/>Sidebar-style stack of icon + label rows where the active row gets a muted fill and bolder text.
Right-click menu pointed by a corner arrow with icon rows and mono shortcut hints on the right.
Shadow-lifted menu with icon rows, shortcut hints on the right, and a tinted destructive Delete action.
Mobile tab bar with labeled icons, a raised center create button, and a rose unread counter badge.
Docs-style on-this-page list with left borders and a primary active rail on the current section.
Segmented icon tabs inside a bordered tray, where the active tab flips to the foreground color.