Lism CSS
Search

NavMenu

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

A component for creating navigation menu lists.

Usage

Provided as NavMenu (c--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 c--navMenu_link.)
<NavMenu.Root>
hovC		Outputs --hov-c. (For use when -hov:-c is applied to c--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.

Structure

<NavMenu.Root>
  <NavMenu.Item>
    <NavMenu.Link href="">Menu item</NavMenu.Link>
  </NavMenu.Item>
  <NavMenu.Item>
    <NavMenu.Link href="">Menu item</NavMenu.Link>
    <NavMenu.Nest>
      <NavMenu.Item>
        <NavMenu.Link href="">Nested item</NavMenu.Link>
      </NavMenu.Item>
    </NavMenu.Nest>
  </NavMenu.Item>
</NavMenu.Root>

Use <NavMenu.Nest> to create nested menus.

Source Code

The source code is available on GitHub.

Examples

Simple example

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

Adding icons and badges

↓
Example
<NavMenu.Root>
  <NavMenu.Item>
    <NavMenu.Link href="#menu1" g="15" ai="center" 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" g="15" ai="center" bgc="text" c="base">
      <span>Menu item</span>
      <Icon icon="caret-right" ms="auto" />
    </NavMenu.Link>
  </NavMenu.Item>
  <NavMenu.Item>
    <NavMenu.Link href="#menu3" g="15" ai="center" bgc="text" c="base">
      <span>Menu item</span>
      <Icon icon="caret-right" ms="auto" />
    </NavMenu.Link>
  </NavMenu.Item>
</NavMenu.Root>

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="30" 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>

Nested menus

↓
Nested menus
<NavMenu.Root bd-y 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 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>
          <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>

Horizontal menu with hover-revealed submenu

An example of adding fxd='row' to <NavMenu.Root> to display items horizontally.

↓
Showing nested menu on hover
<Box min-h="15rem">
  <NavMenu.Root fxd="row" hl="s" itemP="10">
    <NavMenu.Item>
      <NavMenu.Link href="#menu1" hov="-o">Menu item</NavMenu.Link>
    </NavMenu.Item>
    <NavMenu.Item set="hov" pos="relative">
      <NavMenu.Link href="#menu3" ai="center" g="5">
        <Fragment>
          Hover Menu Item <Icon icon="caret-down" style={{ translate: '10%' }} />
        </Fragment>
      </NavMenu.Link>
      <NavMenu.Nest fz="s" hov="in:show" pos="absolute" t="100%" ps="0" hl="s" bgc="base" bxsh="20" bdrs="10">
        <NavMenu.Item>
          <NavMenu.Link href="#child-menu1">Nested item</NavMenu.Link>
        </NavMenu.Item>
        <NavMenu.Item>
          <NavMenu.Link href="#child-menu2">Nested Menu item</NavMenu.Link>
        </NavMenu.Item>
      </NavMenu.Nest>
    </NavMenu.Item>
    <NavMenu.Item>
      <NavMenu.Link href="#menu1" hov="-o">Menu item</NavMenu.Link>
    </NavMenu.Item>
  </NavMenu.Root>
</Box>

© Lism CSS. All rights reserved.

TOC