ナビ・リスト操作
タブバー
画面下部に固定するモバイル定番のタブバー。アイコン＋ラベルの項目をタップすると選択が切り替わり、現在地が藍色で示される。
プレビュー
クリック
操作クリック／タップで動きます。
実装メモ
プレビューでは枠内に画面を再現するため .tbar-screen を position:static のカードにしています。実ページで画面下端に貼り付けるときは .tbar を position:fixed; bottom:0; left:0; right:0 にし、本文側へタブバー高さぶんの padding-bottom を確保してください。safe-area-inset-bottom で iPhone のホームバーぶんを避けています。
コード（コピーして使えます）
<div class="tbar-screen">
<div class="tbar-body" id="tbar-body">
<p class="tbar-page">ホーム画面</p>
</div>
<nav class="tbar" role="tablist" aria-label="メインナビゲーション">
<button class="tbar-tab is-active" role="tab" aria-selected="true" data-page="ホーム">
<svg class="tbar-ic" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.5V20a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5"/></svg>
<span class="tbar-label">ホーム</span>
</button>
<button class="tbar-tab" role="tab" aria-selected="false" data-page="さがす">
<svg class="tbar-ic" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="16.5" y1="16.5" x2="21" y2="21"/></svg>
<span class="tbar-label">さがす</span>
</button>
<button class="tbar-tab" role="tab" aria-selected="false" data-page="お気に入り">
<svg class="tbar-ic" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20.5 4.5 13a4.5 4.5 0 0 1 7.5-4.9A4.5 4.5 0 0 1 19.5 13z"/></svg>
<span class="tbar-label">お気に入り</span>
</button>
<button class="tbar-tab" role="tab" aria-selected="false" data-page="通知">
<svg class="tbar-ic" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8a6 6 0 0 0-12 0c0 6-3 7-3 7h18s-3-1-3-7"/><path d="M13.5 21a2 2 0 0 1-3 0"/></svg>
<span class="tbar-label">通知</span>
</button>
<button class="tbar-tab" role="tab" aria-selected="false" data-page="マイページ">
<svg class="tbar-ic" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 3.5-6 8-6s8 2 8 6"/></svg>
<span class="tbar-label">マイページ</span>
</button>
</nav>
</div>