Lism CSS
Docs
Search

NavMenu

This page is currently under construction
Lism UI (@lism-css/ui) is still in preparation.

A component for creating navigation menu lists.

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>

Use <NavMenu.Nest> for nested structures.

Styles

The NavMenu base styles are defined in the following 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;
  }
}

The full source code is available on GitHub.

Usage

Provided as NavMenu (b--navMenu) from the @lism-css/ui package.

Import

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

Props

PropDescription
<NavMenu.Root>
hovBgc		Outputs --hov-bgc. (For use when -hov:-bgc is applied to b--navMenu_link.)
<NavMenu.Root>
hovC		Outputs --hov-c. (For use when -hov:-c is applied to b--navMenu_link.)
<NavMenu.Root>
itemP		Outputs the --item-p variable. Adjusts the padding of each link at once.
<NavMenu.Link>
hov		Specifies the hover style. Defaults to -bgc, changing the background color on hover.

Examples

Setting common styles for all items at once

Some props can be specified on NavMenu.Root and applied to all links at once, instead of setting them directly on each NavMenu.Link.

  • itemP adjusts the padding (--item-p) of each NavMenu.Link.
  • hovBgc provides the hover background color (--hov-bgc). (Requires -hov:-bgc on NavMenu.Link.)
  • hovC provides the hover text color (--hov-c). (Requires -hov:-c on NavMenu.Link.)

To change the padding per breakpoint, set p on each <NavMenu.Link> instead of using itemP.

↓
Common styles on the 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>

Adding icons and badges

↓
Example
<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>

Nested menus

↓
Nested menus
<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>

Expanding nested menus with an accordion

Since link padding is managed by --item-p, you can use var(--item-p) inside an accordion to apply the same padding amount.

↓
Example
<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>

Displaying submenus on hover

Set layout='flex' on <NavMenu.Root> to lay out items horizontally, then add set='hov' to <NavMenu.Item> and hov='in:show' to the submenu element to reveal the child menu on hover.

↓
Showing nested menu on 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.