Navigation / Where you are
Sidebar
Keep the current location and the rest of the document within reach.
Basic usage
HTML
<nav aria-label="Example navigation">
<div class="sidebar-section"><p class="sidebar-title">Lists & data</p>
<ul class="sidebar-list"><li class="is-active"><a href="../sidebar/" aria-current="page">Sidebar</a></li>
<li><a href="../table/">Table</a></li><li><a href="../chip/">Chip</a></li></ul>
</div>
</nav>Classes & attributes
| Class / attribute | Purpose |
|---|---|
.sidebar | A scrollable navigation region placed directly inside doc. |
.sidebar-section / .sidebar-title / .sidebar-list | A group, its heading, and its links. |
.is-active / aria-current="page" | Mark the current page with both a bar and an accessible state. |
.sidebar-context / data-dd-toc | A page-level table of contents; the optional script tracks its active heading. |
Usage notes
This example shows the sidebar contents. For a full page, put sidebar on the nav element inside doc and add a mobile toggle in Topbar.
Examples follow your system color scheme. Use ◐ in the header to try automatic, light, and dark themes.