Navigation / Context & actions
Topbar
Bring breadcrumbs, theme controls, and the mobile navigation toggle into one document header.
Basic usage
HTML
<header class="topbar">
<nav class="breadcrumbs" aria-label="Example breadcrumbs">
<a href="../">Components</a><span class="breadcrumb-sep">/</span><span class="breadcrumb-current">Topbar</span>
</nav>
<div class="topbar-tools"><button class="btn" data-dd-theme-toggle data-dd-enhance hidden aria-label="Switch theme">◐</button></div>
</header>Classes & attributes
| Class / attribute | Purpose |
|---|---|
.topbar | The sticky document header. |
.breadcrumbs / .breadcrumb-sep / .breadcrumb-current | Breadcrumb links, separators, and current location. |
.topbar-tools | A row of page actions. |
.nav-toggle / data-dd-nav-toggle | Toggles the mobile sidebar. Place it inside doc. |
Usage notes
Give separate breadcrumb navigations distinct aria-label values when a page contains more than one.
Examples follow your system color scheme. Use ◐ in the header to try automatic, light, and dark themes.