All componentsmutedsmmdlg
Sidebar Nav Item
Sidebar navigation buttons with icon, label, and accent-tinted active state.
Variants
Sizes
Install
zsh — sidebar-nav-item
1bunx stylexblocks add sidebar-nav-itemUsage — Ark UI
sidebar-nav-item.tsx
123456789101112131415161718192021222324import { SidebarNavItem, sidebarNavItemActive,} from "#components/ui/ark-ui/sidebar-nav-item.tsx";
export function Example() { return ( // variant/size resolve once on Item; Button, Icon, and EndElement // inherit them via context <ul> <SidebarNavItem.Item variant="muted" size="md"> {/* asChild swaps the button for a link while keeping the styling */} <SidebarNavItem.Button aria-current="page" style={sidebarNavItemActive} > <SidebarNavItem.Icon viewBox="0 0 16 16">{/* icon */}</SidebarNavItem.Icon> Dashboard <SidebarNavItem.EndElement>⌘1</SidebarNavItem.EndElement> </SidebarNavItem.Button> </SidebarNavItem.Item> </ul> );}