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 |
| Collapsed | Storybook |
| With Header | Storybook |
| With Footer | Storybook |
| With Badges | Storybook |
| With Disabled | Storybook |
| Collapsible | Storybook |
| Full Example | Storybook |
| Command Center Brand Aligned | Storybook |
| Storybook Exact Reference | Storybook |
| Figma Component Matrix | Storybook |
| Collapsed Command Center | Storybook |
API And Props
| Prop or Control | Source | Notes |
|---|---|---|
collapsed | Storybook control | See source story for accepted values |
equa-patternlib-nextjs/src/components/sidebar/sidebar.tsx, Line: 40equa-patternlib-nextjs/src/components/sidebar/index.tsequa-patternlib-nextjs/stories/EquaSidebar.stories.tsx, Line: 37
Figma
Open Figma referenceScreenshots
| 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.
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.