# Car Admin Sidebar

> A luxury automotive collapsible sidebar navigation with workspace switching, route color markers, company dropdown, profile dropdown, and dark/light theme toggle. Starts collapsed with icon-only view and tooltips.

- Category: Sidebar
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Triangulum
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: navigation, collapsible
- Page: https://builder.atheros.ai/components/sidebar-car-admin
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_sidebar_car_admin/preview-76128bd6c3e5.webp

## Features

- Neutral semantic surface roles keep structural chrome distinct from accent-bearing states.
- Expand/collapse toggle with smooth transitions
- Workspace switching dropdown with car brand logos
- Search input that auto-expands sidebar on focus
- Search filtering of nav items by label
- Active state tracking across nav links
- Contrast-safe active labels and icons that retain each design system's accent hue
- Accent-tinted semantic surface with design-system card radius and light/dark elevation
- Color-coded route markers
- Notification dot and badge indicators
- User profile with online status
- Profile dropdown with account actions
- Tooltips in collapsed state
- Dark/light theme toggle with persistence
- Keyboard accessible with shortcut support
- Design-system agnostic via design tokens

## Accessibility

- **ARIA labels** — All interactive elements have `aria-label`
- **Theme toggle** — `role="switch"` with `aria-checked`
- **Keyboard nav** — `Enter`/`Space` toggles, `ArrowUp`/`ArrowDown` in dropdowns
- **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
- **Dropdowns** — `role="menu"` with `role="menuitem"` children

## Keyboard shortcuts

- `[` — Toggle sidebar collapse/expand
- `Enter / Space` — Activate nav links, toggle theme
- `ArrowDown / ArrowUp` — Navigate dropdown items
- `Escape` — Close open dropdown and refocus trigger

## Common questions

**Which frameworks is Car Admin Sidebar available in?**

Car Admin 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 Car Admin Sidebar free?**

Car Admin Sidebar is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Car Admin Sidebar support dark mode?**

Yes. Car Admin 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 Car Admin 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-car-admin

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