# Sidebar

> A collapsible sidebar navigation with search, nav links, integrations section, user profile, and dark/light theme toggle. Collapses to icon-only view with tooltips.

- Category: Sidebar
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Triangulum
- Dark mode: yes
- Access: free (sign in to copy the code)
- Tags: navigation, collapsible
- Page: https://builder.atheros.ai/components/sidebar
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_sidebar/preview-de32b994fc91.webp

## 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

## Keyboard shortcuts

- `Enter / Space` — Activate nav links, toggle theme
- `Escape` — Close the dropdown, or clear a non-empty navigation search

## Common questions

**Which frameworks is Sidebar available in?**

Sidebar ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is Sidebar free?**

Yes. Sidebar is a free component: preview it without an account, and sign in with a free Atheros account to copy or download the full source and customise it with AI.

**Does Sidebar support dark mode?**

Yes. Sidebar ships light and dark themes, both drawn from the Triangulum design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Sidebar live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/sidebar

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt