> ## Documentation Index
> Fetch the complete documentation index at: https://docs.equa.cc/llms.txt
> Use this file to discover all available pages before exploring further.
# EquaSidebar
> Design system reference for EquaSidebar, including Storybook, Figma, screenshots, and usage guidance
# EquaSidebar
> **Last Verified:** 2026-05-20 | **Storybook source:** `equa-patternlib-nextjs/stories/EquaSidebar.stories.tsx`, Line: 37
## Purpose
Navigation sidebar layouts, including command-center brand alignment.
## Storybook
| Story | Reference |
| ---------------------------- | ------------------------------------------------------------------------------------------ |
| Default | [Storybook](http://localhost:6006/?path=/story/equa-sidebar--default) |
| Collapsed | [Storybook](http://localhost:6006/?path=/story/equa-sidebar--collapsed) |
| With Header | [Storybook](http://localhost:6006/?path=/story/equa-sidebar--with-header) |
| With Footer | [Storybook](http://localhost:6006/?path=/story/equa-sidebar--with-footer) |
| With Badges | [Storybook](http://localhost:6006/?path=/story/equa-sidebar--with-badges) |
| With Disabled | [Storybook](http://localhost:6006/?path=/story/equa-sidebar--with-disabled) |
| Collapsible | [Storybook](http://localhost:6006/?path=/story/equa-sidebar--collapsible) |
| Full Example | [Storybook](http://localhost:6006/?path=/story/equa-sidebar--full-example) |
| Command Center Brand Aligned | [Storybook](http://localhost:6006/?path=/story/equa-sidebar--command-center-brand-aligned) |
| Storybook Exact Reference | [Storybook](http://localhost:6006/?path=/story/equa-sidebar--storybook-exact-reference) |
| Figma Component Matrix | [Storybook](http://localhost:6006/?path=/story/equa-sidebar--figma-component-matrix) |
| Collapsed Command Center | [Storybook](http://localhost:6006/?path=/story/equa-sidebar--collapsed-command-center) |
## API And Props
| Prop or Control | Source | Notes |
| --------------- | ----------------- | ------------------------------------ |
| `collapsed` | Storybook control | See source story for accepted values |
Sources:
* `equa-patternlib-nextjs/src/components/sidebar/sidebar.tsx`, Line: 40
* `equa-patternlib-nextjs/src/components/sidebar/index.ts`
* `equa-patternlib-nextjs/stories/EquaSidebar.stories.tsx`, Line: 37
## Figma
[Open Figma reference](https://www.figma.com/design/Dp3LmaW5KsM2C0YDU4Lzs3/Command-Center---SO?node-id=3-54)
## Screenshots
| State | Asset |
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Equa dark theme | 
|
| Light theme | 
|
## Usage Notes
* Prefer this component over local one-off UI for matching product states.
* Keep new variants represented in Storybook before adding docs references here.
* Use token-backed colors, spacing, radius, and shadows from [Foundations](/architecture/design-system/foundations).
## Accessibility Notes
* Preserve keyboard and focus behavior from the source component.
* Any icon-only controls must provide an accessible label in consuming product code.
* Validate color contrast in both Equa dark and light theme screenshots before release.