<nav> - ナビゲーション

目次

概要

形式
<nav></nav>
サポート
https://caniuse.com/mdn-html_elements_nav
カテゴリ
フローコンテンツ
セクショニングコンテンツ
パルパブルコンテンツ
親要素
フローコンテンツ を子要素に持てるもの
子要素
フローコンテンツ(ただし、main 要素を子孫に持つことはできない)
タグの省略
開始タグ:必須 / 終了タグ:必須
属性
グローバル属性

説明

左メニューやパンくずリストなど、他のページやページ内のポジションへのナビゲーション情報を記述します。

Header
Main

属性

グローバル属性
詳細は グローバル属性 を参照してください。

使用例

左メニューの例

HTML
<nav class="menu">
  <ul>
    <li><a href="/menu1">メニュー1</a></li>
    <li><a href="/menu2">メニュー2</a></li>
    <li><a href="/menu3">メニュー3</a></li>
  </ul>
</nav>
CSS
.my-breadcrumb { margin: 0; padding: 0; }
.my-breadcrumb li { display: inline; }
.my-breadcrumb li:not(:last-of-type)::after { content: " / "; }
HTML
<nav>
  <ul class="my-breadcrumb">
    <li><a href="/">Top</a></li>
    <li><a href="/html">HTML</a></li>
    <li>nav</li>
  </ul>
</nav>
表示