Components

Side menu

A side menu provides vertical navigation for app shells and documentation. Use a plain <nav> inside an <aside>. The component styles nested lists, links, buttons, and summaries. It also shares menu-item styling with dropdown popover menus.

Usage

Add a <nav> containing a <ul> inside an <aside>.
Nest additional <ul> elements inside list items to create a hierarchy. Nested lists display an inline border to indicate their hierarchy.
Add native <details> elements to create collapsible sections.

Create a full-height side menu

Add .full-height to the <aside> to fill the dynamic viewport height. The side menu becomes a flex column, its <nav> scrolls when the content overflows, and a direct child <footer> remains at the bottom.

<aside class="full-height">
  <header>Workspace</header>
  <nav><ul>...</ul></nav>
  <footer>Account</footer>
</aside>

.full-height controls sizing and internal overflow; it does not make the side menu sticky. If a page shell needs sticky navigation, define that behavior with the shell's responsive rules in @layer project.

Without .full-height, the <aside> retains its natural height. Use this behavior for tables of contents, related-content panels, and inline callouts that should not fill the viewport.

Accessibility notes

Label the <nav> with aria-label="Documentation" or aria-labelledby so assistive technology can distinguish it from other navigation landmarks. Adding a label does not affect the aside > nav selector.
Add aria-current="page" to the current link or button, not to the <li>. This placement announces the current state with the control.
aria-disabled="true" announces the disabled state but does not remove the control from the tab order or prevent keyboard activation. Add tabindex="-1" to prevent disabled links and buttons from receiving keyboard focus.
Use <li><hr></li> for a thematic break. The <hr> element already has separator semantics, so do not add role="separator". To create a named group, use a heading followed by a separate <ul>.