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

PropertyDescription
<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.

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" hov="-bgc">
      Menu item 1
    </NavMenu.Link>
  </NavMenu.Item>
  <NavMenu.Item>
    <NavMenu.Link href="#menu" hov="-bgc">
      Menu item 2
    </NavMenu.Link>
  </NavMenu.Item>
  <NavMenu.Item>
    <NavMenu.Link href="#menu" hov="-bgc">
      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" hov="neutral">
      <span>Menu item</span>
      <Lism as="span" bd px="10" bdrs="10" fz="xs" fw="bold">
        New
      </Lism>
      <Icon icon="caret-right" mx-s="auto" />
    </NavMenu.Link>
  </NavMenu.Item>
  <NavMenu.Item>
    <NavMenu.Link href="#menu2" g="15" ai="center" bgc="text" c="base" hov="neutral">
      <span>Menu item</span>
      <Icon icon="caret-right" mx-s="auto" />
    </NavMenu.Link>
  </NavMenu.Item>
  <NavMenu.Item>
    <NavMenu.Link href="#menu3" g="15" ai="center" bgc="text" c="base" hov="neutral">
      <span>Menu item</span>
      <Icon icon="caret-right" mx-s="auto" />
    </NavMenu.Link>
  </NavMenu.Item>
</NavMenu.Root>

Adjusting padding for all items at once

Specifying itemP sets the --_item-p variable, allowing you to control the padding of all items in one place.

To change the value at a specific breakpoint, set p on each <NavMenu.Link> directly.

↓
Specifying itemP
<NavMenu.Root bd itemP="30">
  <NavMenu.Item hov="-bgc">
    <NavMenu.Link href="#menu1">Menu item</NavMenu.Link>
  </NavMenu.Item>
  <NavMenu.Item hov="-bgc" bd-t>
    <NavMenu.Link href="#menu2">Menu item</NavMenu.Link>
  </NavMenu.Item>
  <NavMenu.Item hov="-bgc" bd-t>
    <NavMenu.Link href="#menu3">Menu item</NavMenu.Link>
  </NavMenu.Item>
</NavMenu.Root>

Nested menus

↓
Nested menus
<NavMenu.Root bd-y hovBgc="base-2">
  <NavMenu.Item>
    <NavMenu.Link hov="-bgc" href="#menu1">
      Menu item 1
    </NavMenu.Link>
  </NavMenu.Item>
  <NavMenu.Item bd-t>
    <NavMenu.Link hov="-bgc" href="#menu2">
      Menu item 2
    </NavMenu.Link>
    <NavMenu.Nest bd-t>
      <NavMenu.Item>
        <NavMenu.Link hov="-bgc" href="#child-menu1">
          Nested item
        </NavMenu.Link>
      </NavMenu.Item>
      <NavMenu.Item bd-t>
        <NavMenu.Link hov="-bgc" href="#child-menu3">
          Nested item
        </NavMenu.Link>
        <NavMenu.Nest bd-t>
          <NavMenu.Item>
            <NavMenu.Link hov="-bgc" href="#child-menu4">
              Nested level 2 item
            </NavMenu.Link>
          </NavMenu.Item>
          <NavMenu.Item bd-t>
            <NavMenu.Link hov="-bgc" 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 hov="-bgc" 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 hov="-bgc" href="#child-menu1">
                Nested item
              </NavMenu.Link>
            </NavMenu.Item>
            <NavMenu.Item>
              <NavMenu.Link hov="-bgc" 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" lh="s" itemP="10">
    <NavMenu.Item hov="-o">
      <NavMenu.Link href="#menu1">Menu item</NavMenu.Link>
    </NavMenu.Item>
    <NavMenu.Item set="var: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%" px-s="0" lh="s" bgc="base" bxsh="20" bdrs="10">
        <NavMenu.Item hov="-bgc">
          <NavMenu.Link href="#child-menu1">Nested item</NavMenu.Link>
        </NavMenu.Item>
        <NavMenu.Item hov="-bgc">
          <NavMenu.Link href="#child-menu2">Nested Menu item</NavMenu.Link>
        </NavMenu.Item>
      </NavMenu.Nest>
    </NavMenu.Item>
    <NavMenu.Item hov="-o">
      <NavMenu.Link href="#menu1">Menu item</NavMenu.Link>
    </NavMenu.Item>
  </NavMenu.Root>
</Box>

© Lism CSS. All rights reserved.

TOC