ナビゲーション / 文脈と操作
Topbar
パンくず、テーマ操作、モバイルのナビゲーション切り替えを、一つのヘッダーにまとめます。
基本的な使い方
HTML
<header class="topbar">
<nav class="breadcrumbs" aria-label="パンくずリストの作例">
<a href="../">コンポーネント</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="テーマを切り替える">◐</button></div>
</header>クラスと属性
| クラス / 属性 | 用途 |
|---|---|
.topbar | 画面上部に留まる文書ヘッダー。 |
.breadcrumbs / .breadcrumb-sep / .breadcrumb-current | パンくずのリンク、区切り、現在地。 |
.topbar-tools | ページ操作を横に並べる領域。 |
.nav-toggle / data-dd-nav-toggle | モバイルのサイドバーを開閉します。doc内に置きます。 |
使い方の注意
一つのページに複数のパンくずがある場合は、異なるaria-labelを付けます。
作例はシステムの配色設定に従います。ヘッダーの◐で自動・ライト・ダークを試せます。