Sidebar

Features

• Expand/collapse toggle with smooth transitions
• Search input that auto-expands on focus, filters every navigation item and announces the result count
• Active state tracking across nav links
• Integration links with branded icons
• User profile with online status indicator
• Tooltips in collapsed state
• Dark/light theme toggle
• Responsive — slides off-screen on mobile
• Keyboard accessible, with persistent collapse/expand control, visible focus, Escape dismissal and focus-out closing for the profile menu
• Guaranteed foreground/surface contrast for navigation labels, section labels and count badges in both themes
• Design-system agnostic via design tokens

Accessibility

ARIA labels

Icon controls have specific labels; the collapse and profile controls expose aria-controls and synchronized expanded state; the visually hidden brand link leaves the tab order while collapsed

Search results

The labeled search field filters links and announces its result count through a polite status region; Escape clears it

Theme toggle

role="switch" with aria-checked

Keyboard nav

Enter/Space toggles theme, activates nav links

Focus indicators

:focus-visible outlines on all interactive elements

Reduced motion

prefers-reduced-motion: reduce kills all animations

Tooltips

Visible in collapsed state for icon-only nav items

Popup state

The profile trigger uses aria-haspopup="menu"; the popup synchronizes aria-hidden and closes on outside focus/click

Customise it with AI

Open Sidebar in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the sidebar is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.