Side Menu — Cayuse Design System

Examples

Side menu with an expandable submenu

html

<nav class="cds-side-menu" aria-label="Section">
  <ul class="cds-side-menu__list">
    <li><a class="cds-menu-link is-active" href="/details" aria-current="page">Proposal details</a></li>
    <li>
      <button type="button" class="cds-menu-link" aria-expanded="false" aria-controls="sm-budget">
        Budget <span aria-hidden="true">▸</span>
      </button>
      <ul class="cds-side-menu__sublist" id="sm-budget" hidden>
        <li><a class="cds-menu-link" href="/budget/personnel">Personnel</a></li>
      </ul>
    </li>
  </ul>
</nav>

The Budget item is live — expand it. Note the caret changes direction and aria-expanded updates with it.

Figma properties

Property	Values	Notes
`Menu`	Closed · Default · Open · Sub	Whether the menu and its submenus are expanded.
`State`	Active · Default · Focus · Hover	Per-item state. Active is the current page.
`Menu Link` / `Submenu Link`	text	Item labels.

The Figma annotation specifies the container: a #CCCCCC stroke with a 3px radius — --menu-border and --radius-3.

Usage

When to use it

Use for navigation within one section, where the list is long enough to need vertical space.
Mark the current item with aria-current="page", a filled background and a 3px left bar.
Expand the submenu containing the current page by default.
Keep labels short enough not to wrap at 240px.

When not to use it

Do not use for top-level product navigation — that is Product Navigation.
Do not nest more than one level deep.
Do not use it to show progress through a form — that is a Form Section List.
Do not collapse the menu containing the current page.

Accessibility

Wrap in <nav> with a label distinguishing it from other navigation regions on the page.
Expandable items are <button> elements with aria-expanded and aria-controls — not links, because they do not navigate.
The current page uses aria-current="page"; the left bar and background are the visual equivalents.
Use a real list so the number of items is announced.

Tokens consumed

Token	Applied to	Resolves to
`--menu-background`	Surface	`--color-white`
`--menu-border`	Container border	`--color-gray-300`
`--menu-hover`	Item hover	`--color-gray-200`
`--menu-active`	Current item fill	`--color-blue-100`
`--navigation-active`	Left bar and label	`--primary-brand-color`