Lism Tips

NavMenu（ナビゲーションの一覧）

NavMenu は、サイトのメニューのようなリンクの一覧を作る UI コンポーネントです。余白・マウスを乗せたときの色・入れ子の作り方をまとめます。

NavMenu は、サイトのメニューのようなリンクの一覧を作るコンポーネントです。ul（箇条書きのリスト）と li・a に決まったクラスを付けて使います。

どんなときに使う？#

  • ヘッダーや横の欄に置く、サイトのメニュー
  • Modal（モーダル） で作るドロワーメニュー（横から出るメニュー）の中身
  • 項目の下に、さらに小さな項目を入れたメニュー（入れ子のメニュー）

使い方#

ul に b--navMenu、li に b--navMenu_item、a に b--navMenu_link を付けます。リンクの -hov:-bgc は、マウスを乗せると背景の色が変わる指定です。

表示例

html
<ul class="b--navMenu">
  <li class="b--navMenu_item"><a class="b--navMenu_link -hov:-bgc" href="#">メニュー1</a></li>
  <li class="b--navMenu_item"><a class="b--navMenu_link -hov:-bgc" href="#">メニュー2</a></li>
  <li class="b--navMenu_item"><a class="b--navMenu_link -hov:-bgc" href="#">メニュー3</a></li>
</ul>
クラス 付ける場所
b--navMenu 一覧のいちばん外側（ul）
b--navMenu_item 1つの項目（li）
b--navMenu_link 項目のリンク（a）。中身を横に並べ、余白を付ける
b--navMenu_nest 項目の中に入れる、もう1段の一覧（ul）。左に 1em 下げる

b--navMenu_link は、中身を横に並べる（flex）ので、文字とアイコンを並べやすくなっています。文字の色はまわりと同じになり、下線は付きません。

専用の変数#

変数 決めること 初期値
--item-p 各リンクの内側の余白（padding） 0.5em
--hov-bgc マウスを乗せたときの背景の色（-hov:-bgc を付けたリンク用） 指定なし
--hov-c マウスを乗せたときの文字の色（-hov:-c を付けたリンク用） 指定なし

b--navMenu に変数を書くと、中のリンクすべてにまとめて効きます。

表示例

html
<ul class="b--navMenu -bd" style="--hov-bgc:var(--text);--hov-c:var(--base);--item-p:var(--s20)">
  <li class="b--navMenu_item"><a class="b--navMenu_link -hov:-bgc -hov:-c" href="#">メニュー1</a></li>
  <li class="b--navMenu_item -bd-t"><a class="b--navMenu_link -hov:-bgc -hov:-c" href="#">メニュー2</a></li>
  <li class="b--navMenu_item -bd-t"><a class="b--navMenu_link -hov:-bgc -hov:-c" href="#">メニュー3</a></li>
</ul>
補足

画面の幅ごとに余白を変えたいときは、--item-p ではなく、リンク1つずつに -p を付けます。

印やアイコンを並べる#

リンクの中に、小さな印や a--icon（アイコン） を入れられます。-ms:auto（左側の余白を自動にする）を付けた要素は、右のはしへ寄ります。

表示例

html
<ul class="b--navMenu" style="--item-p:1em">
  <li class="b--navMenu_item">
    <a class="b--navMenu_link -hov:-bgc -bgc:text -c:base" href="#">
      <span>メニュー1</span>
      <span class="-bd -px:10 -bdrs:10 -fz:xs -fw:bold">New</span>
      <span class="-ms:auto">›</span>
    </a>
  </li>
  <li class="b--navMenu_item">
    <a class="b--navMenu_link -hov:-bgc -bgc:text -c:base" href="#">
      <span>メニュー2</span>
      <span class="-ms:auto">›</span>
    </a>
  </li>
</ul>

メニューを入れ子にする#

項目の中に b--navMenu_nest の ul を入れると、一段下げた小さなメニューになります。入れ子の中にさらに入れ子を入れることもできます（公式の例は2段です）。

表示例

html
<ul class="b--navMenu" style="--hov-bgc:var(--base-2)">
  <li class="b--navMenu_item"><a class="b--navMenu_link -hov:-bgc" href="#">メニュー1</a></li>
  <li class="b--navMenu_item -bd-t">
    <a class="b--navMenu_link -hov:-bgc" href="#">メニュー2</a>
    <ul class="b--navMenu_nest -bd-t">
      <li class="b--navMenu_item"><a class="b--navMenu_link -hov:-bgc" href="#">子の項目</a></li>
      <li class="b--navMenu_item -bd-t">
        <a class="b--navMenu_link -hov:-bgc" href="#">子の項目</a>
        <ul class="b--navMenu_nest -bd-t">
          <li class="b--navMenu_item"><a class="b--navMenu_link -hov:-bgc" href="#">孫の項目</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

入れ子を開け閉めできるようにする#

入れ子の部分を Accordion（アコーディオン） に入れると、押したときだけ開くメニューになります。アコーディオンのボタンの余白に var(--item-p) を使うと、ほかのリンクと余白がそろいます。

表示例

html
<ul class="b--navMenu -bd-y" style="--hov-bgc:var(--base-2);--item-p:0.75em">
  <li class="b--navMenu_item"><a class="b--navMenu_link -hov:-bgc" href="#">メニュー1</a></li>
  <li class="b--navMenu_item">
    <div class="b--accordion">
      <div class="b--accordion_item">
        <div class="b--accordion_heading" role="heading" aria-level="3">
          <button class="b--accordion_button set--plain -hov:-bgc -p" style="--p:var(--item-p)" aria-controls="demo-nav-acc-1" aria-expanded="false">
            メニュー2（開け閉めできる）
            <span class="b--accordion_icon a--icon" aria-hidden="true"></span>
          </button>
        </div>
        <div class="b--accordion_panel" id="demo-nav-acc-1" hidden="until-found">
          <div class="b--accordion_content l--flow -p:0">
            <ul class="b--navMenu_nest">
              <li class="b--navMenu_item"><a class="b--navMenu_link -hov:-bgc" href="#">子の項目</a></li>
              <li class="b--navMenu_item"><a class="b--navMenu_link -hov:-bgc" href="#">子の項目</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </li>
</ul>

マウスを乗せたときに子のメニューを出す#

b--navMenu に l--flex を付けて横に並べ、項目に set--hov、子のメニューの箱に -hov:in:show を付けると、マウスを乗せたときだけ子のメニューが出ます。子のメニューは -pos:absolute（位置を自由に決める）で項目の下に重ねます。

表示例

html
<div class="l--box -min-h" style="--min-h:10rem">
  <ul class="b--navMenu l--flex -hl:s -pos:relative" style="--item-p:0.5em .75em">
    <li class="b--navMenu_item set--hov -pos:relative">
      <a class="b--navMenu_link -hov:-bgc" href="#">親の項目 ▾</a>
      <div class="l--box -hov:in:show -pos:absolute -t:100% -l:0 -w -pt:5" style="--w:10rem">
        <div class="l--box -fz:s -hl:s -bgc:base -bxsh:30 -bd -ov:hidden -p:5">
          <ul class="b--navMenu">
            <li class="b--navMenu_item"><a class="b--navMenu_link -hov:-bgc" href="#">子の項目A</a></li>
            <li class="b--navMenu_item"><a class="b--navMenu_link -hov:-bgc" href="#">子の項目B</a></li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
</div>

set--hov と -hov:in:show のしくみは マウスを乗せたとき（-hov） で説明しています。子のメニューの中を l--columns で2列にして、画像と説明を並べることもできます。

しくみ#

css
.b--navMenu {
  --link-td: none;
  --hl: var(--hl--s);
  --item-p: 0.5em;
  --focus-offset: -1px;
}
.b--navMenu_nest {
  --item-p: inherit;
  padding-inline-start: 1em;
}
.b--navMenu_link {
  display: flex;
  align-items: center;
  gap: 0.5em;
  color: inherit;
  padding: var(--item-p);
}
.b--navMenu_nest,
.b--navMenu_item {
  --bdc: inherit;
}

--focus-offset: -1px は、アコーディオンにしたときに、キーボードで選んだときの枠線（フォーカスの線）が欠けて見えないようにするためのものです。

React・Astro で書く場合#

@lism-css/ui/react/NavMenu（Astro は @lism-css/ui/astro/NavMenu）から NavMenu を読み込みます。部品は <NavMenu.Root>・<NavMenu.Item>・<NavMenu.Link>・<NavMenu.Nest> です。

jsx
import { NavMenu } from '@lism-css/ui/react/NavMenu';

<NavMenu.Root itemP="20" hovBgc="text" hovC="base">
  <NavMenu.Item>
    <NavMenu.Link href="#menu1" hov="-bgc,-c">メニュー</NavMenu.Link>
  </NavMenu.Item>
</NavMenu.Root>
Props 決めること
hovBgc <NavMenu.Root> 用。--hov-bgc になる（リンクに -hov:-bgc が要る）
hovC <NavMenu.Root> 用。--hov-c になる（リンクに -hov:-c が要る）
itemP <NavMenu.Root> 用。--item-p になる。リンクの余白をまとめて変える
hov <NavMenu.Link> 用。マウスを乗せたときの変化。初期値は -bgc（背景の色が変わる）

関連するページ#

公式ドキュメント

2026年10月5日時点の内容（lism-css 1.0.1・@lism-css/ui 0.40.1）をもとに、やさしい日本語でまとめています。

ページの一覧