Components · App chrome
Sidebar
The 240px navigation rail — a brand block, grouped nav items, and a footer profile. The active item takes a brand-bg tint with a brand-coloured icon and bold weight. The rail to your left is the real one; the preview below is a static instance.
Preview
The navigation rail across the three themes; the Home item is active.
Light
Dark
Accessibility
Spec
Values and token references straight from the Zetta spec.
sidebar
- backgroundColor
- {colors.surface-sidebar}
- borderRightColor
- {colors.hairline}
- borderRightWidth
- 1px
- width
- 240px
sidebar-brand-block
- paddingX
- 16px
- paddingY
- 24px
- fontFamily
- Inter
- fontSize
- 16px
- fontWeight
- 700
- lineHeight
- 1.3
- letterSpacing
- -0.01em
- textColor
- {colors.ink}
sidebar-nav-item
- textColor
- {colors.body}
- iconColor
- {colors.muted}
- fontFamily
- Geist
- fontSize
- 14px
- fontWeight
- 500
- lineHeight
- 1.4
- borderRadius
- {rounded.base}
- height
- 32px
- paddingX
- 12px
- paddingY
- 8px
- gap
- 8px
- iconSize
- 20px
- cursor
- pointer
sidebar-nav-item-hover
- backgroundColor
- {colors.surface-muted}
- textColor
- {colors.ink}
- iconColor
- {colors.ink}
sidebar-nav-item-active
- backgroundColor
- {colors.brand-bg}
- textColor
- {colors.ink}
- iconColor
- {colors.brand}
- fontWeight
- 600
sidebar-nav-item-focus
- outline
- 2px solid {colors.border-focus}
- outlineOffset
- 2px
sidebar-nav-section-label
- textColor
- {colors.muted}
- fontFamily
- Geist
- fontSize
- 12px
- fontWeight
- 500
- letterSpacing
- 0.01em
- paddingX
- 12px
- paddingY
- 4px
- marginTop
- 8px
sidebar-footer-profile
- display
- flex
- flexDirection
- row
- alignItems
- center
- paddingX
- 16px
- paddingY
- 16px
- borderTopColor
- {colors.hairline}
- borderTopWidth
- 1px
- gap
- 8px
Build with the skill
No package to install — hand this to your AI to generate the app sidebar in your stack.
Implement the Zetta "Sidebar" component in this project's stack using the zetta-design-md skill.
- Apply the `sidebar` spec from the skill (variants: nav-item, nav-item-active, section-label).
- Use this project's own component conventions and framework idioms.
- Reference the Zetta design tokens (CSS variables) for every color, radius, and shadow — never hardcode values.
- Implement all states (hover, focus, active, disabled, and invalid where applicable) with a visible 2px focus ring.
- Honor the Zetta guardrails (brand never shifts hue, shadows for overlays only, etc.) and verify in Light, Dark, and Accessibility.Anatomy & rules
- 240px wide, sidebar surface, 1px hairline right border. Nav items are 32px tall with a 20px icon at base radius; active =
brand-bgtint,brandicon, weight 600. Section labels are muted 12px. - Group items under short section labels; mark exactly one item active per route. The footer profile is hairline-separated at the bottom.
Accessibility
- Use a
<nav>with a list of links; mark the current item witharia-current="page". The active brand tint plus bold weight keeps it distinguishable without relying on colour alone.
Known gaps
- Collapsed/rail mode, flyout submenus, and mobile drawer behaviour are not specified — the spec defines the expanded 240px rail.