Lism CSS
Docs
検索

NavMenu

ナビゲーションメニュー用のリストを作成できるコンポーネントです。

Overview

↓
Preview
<NavMenu.Root>
  <NavMenu.Item>
    <NavMenu.Link href="#menu">
      Menu item 1
    </NavMenu.Link>
  </NavMenu.Item>
  <NavMenu.Item>
    <NavMenu.Link href="#menu">
      Menu item 2
    </NavMenu.Link>
  </NavMenu.Item>
  <NavMenu.Item>
    <NavMenu.Link href="#menu">
      Menu item 3
    </NavMenu.Link>
  </NavMenu.Item>
</NavMenu.Root>

ネスト構造には <NavMenu.Nest> を使用します。

Styles

NavMenu のベーススタイルは、以下のCSSで定義されています。

_style.css 
@layer lism-block {
  .b--navMenu {
    --link-td: none;
    --hl: var(--hl--s);
    --item-p: 0.5em;
    --focus-offset: -1px; /* アコーディオン化した時にoutlineが一部見えなくなるのを防ぐ */
  }

  .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;
  }
}

ソースコード全体は GitHub で公開しています。

How to use

@lism-css/ui パッケージでNavMenu(b--navMenu)として提供しています。

Import

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

Props

プロパティ説明
<NavMenu.Root>
hovBgc		--hov-bgcを出力します。（b--navMenu_linkに-hov:-bgcを付けた時用）
<NavMenu.Root>
hovC		--hov-cを出力します。 （b--navMenu_linkに-hov:-cを付けた時用）
<NavMenu.Root>
itemP		--item-p変数を出力します。各リンクのpaddingを一括で調整できます。
<NavMenu.Link>
hov		hover時のスタイルを指定できます。デフォルトで-bgcが付与され、hover時に背景色が変化します。

Examples

各リストの共通スタイルを一括で指定する方法

一部のプロパティは、NavMenu.Linkに直接propsを指定せずに、NavMenu.Rootから一括で指定できるようになっています。

  • itemPを指定すると、NavMenu.Linkのpadding（--item-p）を調整できます。
  • hovBgcでhover時の背景色（--hov-bgc）を渡せます。（NavMenu.Linkに-hov:-bgcが必要です）
  • hovCでhover時の文字色（--hov-c）を渡せます。（NavMenu.Linkに-hov:-cが必要です）

なお、paddingをブレイクポイントごとに変えたい場合は、itemPではなく<NavMenu.Link>それぞれにpを指定してください。

↓
Rootに共通スタイルを指定
<NavMenu.Root bd itemP="20" hovBgc="text" hovC="base">
  <NavMenu.Item>
    <NavMenu.Link href="#menu1" hov="-bgc,-c">Menu item</NavMenu.Link>
  </NavMenu.Item>
  <NavMenu.Item bd-t>
    <NavMenu.Link href="#menu2" hov="-bgc,-c">Menu item</NavMenu.Link>
  </NavMenu.Item>
  <NavMenu.Item bd-t>
    <NavMenu.Link href="#menu3" hov="-bgc,-c">Menu item</NavMenu.Link>
  </NavMenu.Item>
</NavMenu.Root>

アイコンやバッジを表示する例

↓
例
<NavMenu.Root>
  <NavMenu.Item>
    <NavMenu.Link href="#menu1" bgc="text" c="base">
      <span>Menu item</span>
      <Lism as="span" bd px="10" bdrs="10" fz="xs" fw="bold">
        New
      </Lism>
      <Icon icon="caret-right" ms="auto" />
    </NavMenu.Link>
  </NavMenu.Item>
  <NavMenu.Item>
    <NavMenu.Link href="#menu2" bgc="text" c="base">
      <span>Menu item</span>
      <Icon icon="caret-right" ms="auto" />
    </NavMenu.Link>
  </NavMenu.Item>
  <NavMenu.Item>
    <NavMenu.Link href="#menu3" bgc="text" c="base">
      <span>Menu item</span>
      <Icon icon="caret-right" ms="auto" />
    </NavMenu.Link>
  </NavMenu.Item>
</NavMenu.Root>

メニューのネスト

↓
メニューのネスト
<NavMenu.Root hovBgc="base-2">
  <NavMenu.Item>
    <NavMenu.Link href="#menu1">
      Menu item 1
    </NavMenu.Link>
  </NavMenu.Item>
  <NavMenu.Item bd-t>
    <NavMenu.Link href="#menu2">
      Menu item 2
    </NavMenu.Link>
    <NavMenu.Nest bd-t>
      <NavMenu.Item>
        <NavMenu.Link href="#child-menu1">
          Nested item
        </NavMenu.Link>
      </NavMenu.Item>
      <NavMenu.Item bd-t>
        <NavMenu.Link href="#child-menu3">
          Nested item
        </NavMenu.Link>
        <NavMenu.Nest bd-t>
          <NavMenu.Item>
            <NavMenu.Link href="#child-menu4">
              Nested level 2 item
            </NavMenu.Link>
          </NavMenu.Item>
          <NavMenu.Item bd-t>
            <NavMenu.Link href="#child-menu5">
              Nested level 2 item
            </NavMenu.Link>
          </NavMenu.Item>
        </NavMenu.Nest>
      </NavMenu.Item>
    </NavMenu.Nest>
  </NavMenu.Item>
</NavMenu.Root>

ネストしたメニューをアコーディオンで展開する

リンクのpaddingは--item-pで管理されているため、アコーディオン化した時に var(--item-p)を使えば同じ量のpaddingを受け取れます。

↓
例
<NavMenu.Root bd-y itemP="0.75em" hovBgc="base-2">
  <NavMenu.Item>
    <NavMenu.Link href="#menu1">
      Menu item
    </NavMenu.Link>
  </NavMenu.Item>
  <NavMenu.Item>
    <Accordion.Root>
      <Accordion.Item>
        <Accordion.Heading>
          <Accordion.Button hov="-bgc" p="var(--item-p)">
            Menu item (Accordion)
          </Accordion.Button>
        </Accordion.Heading>
        <Accordion.Panel p="0">
          <NavMenu.Nest>
            <NavMenu.Item>
              <NavMenu.Link href="#child-menu1">
                Nested item
              </NavMenu.Link>
            </NavMenu.Item>
            <NavMenu.Item>
              <NavMenu.Link href="#child-menu2">
                Nested item
              </NavMenu.Link>
            </NavMenu.Item>
          </NavMenu.Nest>
        </Accordion.Panel>
      </Accordion.Item>
    </Accordion.Root>
  </NavMenu.Item>
</NavMenu.Root>

ホバー時にサブメニューを表示する例

<NavMenu.Root>をlayout='flex'で横並びにし、 <NavMenu.Item>にset='hov'、サブメニュー要素にhov='in:show'を付与することで、hover時に子メニューを表示することができます。

↓
hoverでネストメニューを表示
<Box min-h="15rem">
  <NavMenu.Root layout="flex" hl="s" itemP="0.5em .75em" pos="relative">
    <NavMenu.Item set="hov" pos="relative">
      <NavMenu.Link href="#menu3">
          Parent Item <Icon icon="caret-down" />
      </NavMenu.Link>
      <Box hov="in:show" pos="absolute" t="100%" l="50%" w="12rem" pt="5" style={{ translate: '-50% 0' }}>
        <Box fz="s" hl="s" bgc="base" bxsh="30" bd ov="hidden" p="5">
          <NavMenu.Root>
            <NavMenu.Item>
              <NavMenu.Link href="#child-menu1">Nested item A</NavMenu.Link>
            </NavMenu.Item>
            <NavMenu.Item>
              <NavMenu.Link href="#child-menu2">Nested item B</NavMenu.Link>
            </NavMenu.Item>
          </NavMenu.Root>
        </Box>
      </Box>
    </NavMenu.Item>
    <NavMenu.Item set="hov" pos="static">
      <NavMenu.Link href="#menu3">
        Parent Item <Icon icon="caret-down" />
      </NavMenu.Link>
      <Box hov="in:show" pos="absolute" t="100%" l="0" w="100%" pt="5">
        <Box fz="s" hl="s" bgc="base" bxsh="30" bd ov="hidden" p="5">
          <NavMenu.Root layout="columns" cols="2" g="5" itemP="10">
            <NavMenu.Item>
              <NavMenu.Link href="#child-menu-a" g="10">
                <Frame ar="1/1" bgc="base-2" w="3rem" bdrs="10">
                  <img src="https://cdn.lism-css.com/img/a-1.jpg" alt="" width="960" height="640" />
                </Frame>
                <Stack>
                  <span>Nested item A</span>
                  <span class="-fz:s -o:p">This is the description for the item.</span>
                </Stack>
              </NavMenu.Link>
            </NavMenu.Item>
            <NavMenu.Item>
              <NavMenu.Link href="#child-menu-b" g="10">
                <Frame ar="1/1" bgc="base-2" w="3rem" bdrs="10">
                  <img src="https://cdn.lism-css.com/img/a-2.jpg" alt="" width="960" height="640" />
                </Frame>
                <Stack>
                  <span>Nested item B</span>
                  <span class="-fz:s -o:p">This is the description for the item.</span>
                </Stack>
              </NavMenu.Link>
            </NavMenu.Item>
            <NavMenu.Item>
              <NavMenu.Link href="#child-menu-c" g="10">
                <Frame ar="1/1" bgc="base-2" w="3rem" bdrs="10">
                  <img src="https://cdn.lism-css.com/img/a-3.jpg" alt="" width="960" height="640" />
                </Frame>
                <Stack>
                  <span>Nested item C</span>
                  <span class="-fz:s -o:p">This is the description for the item.</span>
                </Stack>
              </NavMenu.Link>
            </NavMenu.Item>
            <NavMenu.Item>
              <NavMenu.Link href="#child-menu-d" g="10">
                <Frame ar="1/1" bgc="base-2" w="3rem" bdrs="10">
                  <img src="https://cdn.lism-css.com/img/a-4.jpg" alt="" width="960" height="640" />
                </Frame>
                <Stack>
                  <span>Nested item D</span>
                  <span class="-fz:s -o:p">This is the description for the item.</span>
                </Stack>
              </NavMenu.Link>
            </NavMenu.Item>
          </NavMenu.Root>
        </Box>
      </Box>
    </NavMenu.Item>
  </NavMenu.Root>
</Box>

© 2026 Lism CSS.