Sidebar Navigation
A collapsible sidebar component for organizing application navigation into structured groups. Supports multiple variants, icon-only collapsed mode, collapsible sections, active state highlighting, and responsive mobile drawer behavior.
Live Preview
Interact with the sidebar component in real time. Toggle collapse, change variants, and click items to see active state.
Active Route
/button1<Sidebar2groups={groups}3activeHref="/button"4variant="default"5onCollapsedChange={setCollapsed}6/>Installation
Install the Aidash Components package using your preferred package manager.
$ pnpm add @aidash/componentsImport
Import the Sidebar component into your file.
import { Sidebar } from '@/components/aidash/sidebar';Basic Usage
The simplest sidebar with a single group and navigation links.
1const groups = [2{3 title: 'Navigation',4 items: [5 { label: 'Dashboard', href: '/dashboard' },6 { label: 'Projects', href: '/projects' },7 { label: 'Settings', href: '/settings' },8 ],9},10];11 12<Sidebar13groups={groups}14activeHref="/dashboard"15/>Collapsible Groups
Groups that expand and collapse with a smooth chevron animation. Click the group header to toggle.
1const groups = [2{3 title: 'Getting Started',4 collapsible: true,5 items: [6 { label: 'Introduction', href: '/intro' },7 { label: 'Installation', href: '/install' },8 ],9},10{11 title: 'Components',12 collapsible: true,13 defaultExpanded: true,14 items: [15 { label: 'Button', href: '/button' },16 { label: 'Input', href: '/input' },17 ],18},19];20 21<Sidebar groups={groups} activeHref="/button" />defaultExpanded: false on a group to have it start collapsed. Users can expand it by clicking the header.With Icons
Add leading icons to sidebar items for better visual scanning and recognition.
1import { Home01Icon, File01Icon, Layers01Icon, Settings01Icon } from '@hugeicons/core-free-icons';2 3const groups = [4{5 title: 'Menu',6 items: [7 { label: 'Home', href: '/home', icon: Home01Icon },8 { label: 'Documents', href: '/docs', icon: File01Icon },9 { label: 'Components', href: '/components', icon: Layers01Icon },10 { label: 'Settings', href: '/settings', icon: Settings01Icon },11 ],12},13];14 15<Sidebar groups={groups} activeHref="/home" />Active State
Highlight the current page or route in the sidebar. The active item receives a distinct background and text color.
Active: /components — click items to change
1// Typically derived from your router2const pathname = usePathname();3 4<Sidebar5groups={groups}6activeHref={pathname}7/>Variants
Four visual variants to match different layout contexts and design aesthetics.
default
bordered
floating
minimal
1<Sidebar variant="default" groups={groups} activeHref="/dashboard" />2<Sidebar variant="bordered" groups={groups} activeHref="/dashboard" />3<Sidebar variant="floating" groups={groups} activeHref="/dashboard" />4<Sidebar variant="minimal" groups={groups} activeHref="/dashboard" />Mobile Drawer
On small screens, the sidebar can be rendered as a slide-in drawer overlay for a mobile-friendly experience.
1import { useState } from 'react';2import { AnimatePresence, motion } from 'framer-motion';3 4function AppLayout() {5const [drawerOpen, setDrawerOpen] = useState(false);6 7return (8 <>9 {/* Mobile menu button */}10 <button onClick={() => setDrawerOpen(true)}>11 <MenuIcon />12 </button>13 14 {/* Drawer overlay */}15 <AnimatePresence>16 {drawerOpen && (17 <>18 <motion.div19 className="fixed inset-0 bg-black/40 z-40"20 initial={{ opacity: 0 }}21 animate={{ opacity: 1 }}22 exit={{ opacity: 0 }}23 onClick={() => setDrawerOpen(false)}24 />25 <motion.aside26 className="fixed top-0 left-0 bottom-0 w-[240px] z-50"27 initial={{ x: -240 }}28 animate={{ x: 0 }}29 exit={{ x: -240 }}30 >31 <Sidebar32 groups={groups}33 activeHref={pathname}34 />35 </motion.aside>36 </>37 )}38 </AnimatePresence>39 </>40);41}Props API
Complete list of props accepted by the Sidebar component and its sub-types.
| Prop | Type | Default | Description |
|---|---|---|---|
| groups | SidebarGroup[] | — | Array of sidebar groups to render |
| activeHref | string | — | Href of the currently active item |
| collapsed | boolean | false | Whether the sidebar is collapsed to icon-only mode |
| onCollapsedChange | (collapsed: boolean) => void | — | Callback fired when collapsed state changes |
| variant | 'default' | 'bordered' | 'floating' | 'minimal' | 'default' | Visual style of the sidebar |
| width | number | 240 | Width of the sidebar in pixels |
| className | string | '' | Additional CSS classes |
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Group heading text |
| items | SidebarItem[] | — | Array of navigation items in the group |
| collapsible | boolean | false | Whether the group can be collapsed |
| defaultExpanded | boolean | true | Whether the group is expanded by default |
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Text label for the item |
| href | string | — | Navigation target URL |
| icon | IconType | — | Optional leading icon component |
| badge | string | number | — | Optional trailing badge content |
| disabled | boolean | false | Disable interaction with this item |
icon field in SidebarItem accepts any HugeIcons icon type. Pass the icon definition directly -- the component handles rendering.Accessibility
Built-in accessibility features following WAI-ARIA Navigation Landmark pattern.
ARIA Landmark
The sidebar renders as a <nav> element with aria-label="Sidebar navigation" for screen reader landmark navigation.
Keyboard Navigation
Navigate between items with Tab / Shift+Tab. Activate links with Enter. Toggle collapsible groups with Enter or Space.
Active State Indication
The active item uses aria-current="page" to indicate the current page to assistive technologies.
Collapsible Group State
Group toggle buttons use aria-expanded to communicate expanded/collapsed state. Hidden items are removed from the tab order when collapsed.
Focus Management
Uses focus-visible for keyboard-only focus indicators. When the mobile drawer opens, focus is trapped within the drawer and returned to the trigger on close.
1{/* Rendered HTML structure */}2<nav aria-label="Sidebar navigation">3<div role="group" aria-labelledby="group-components">4 <button5 id="group-components"6 aria-expanded="true"7 >8 Components9 </button>10 <ul role="list">11 <li>12 <a13 href="/button"14 aria-current="page"15 >16 Button17 </a>18 </li>19 <li>20 <a href="/input">Input</a>21 </li>22 </ul>23</div>24</nav>Related
Other components that work well alongside Sidebar Navigation.