Components
Vertical nav
A stacked sidebar navigation column. Items hover to an alt background; the active item carries is-active for full-ink text and an accent left bar. Group links under an uppercase ds-vnav__label.
Grouped
Wrap related links in a ds-vnav__group with a ds-vnav__label. Mark the current link with is-active.
<nav class="ds-vnav" aria-label="Sidebar">
<div class="ds-vnav__group">
<span class="ds-vnav__label">Pricing</span>
<a class="ds-vnav__item is-active" href="#" aria-current="page">Matrix</a>
<a class="ds-vnav__item" href="#">Profiles</a>
<a class="ds-vnav__item" href="#">Rate cards</a>
</div>
<div class="ds-vnav__group">
<span class="ds-vnav__label">Settings</span>
<a class="ds-vnav__item" href="#">Entities</a>
<a class="ds-vnav__item" href="#">Members</a>
</div>
</nav>Collapsible
A ds-vnav__item--collapsible button toggles aria-expanded to reveal an indented ds-vnav__children list. Click the parent to expand it.
<nav class="ds-vnav" aria-label="Sidebar">
<a class="ds-vnav__item" href="#">Overview</a>
<button class="ds-vnav__item ds-vnav__item--collapsible" aria-expanded="true">
<span>Reports</span>
<span class="ds-vnav__caret" aria-hidden="true">›</span>
</button>
<div class="ds-vnav__children">
<a class="ds-vnav__item is-active" href="#" aria-current="page">Margins</a>
<a class="ds-vnav__item" href="#">Utilisation</a>
<a class="ds-vnav__item" href="#">Export</a>
</div>
<a class="ds-vnav__item" href="#">Audit log</a>
</nav>React
Pass an items tree; an item with a children array renders as a collapsible group, open by default when it holds the active link.
import { VerticalNav } from "@diametral/design-system/react";
<VerticalNav
items={[
{ label: "Overview", href: "/" },
{
label: "Reports",
children: [
{ label: "Margins", href: "/reports/margins", active: true },
{ label: "Utilisation", href: "/reports/utilisation" },
],
},
{ label: "Audit log", href: "/audit" },
]}
/>