コンテンツにスキップ
Lism UI

NavMenu

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

Props

プロパティ説明
<NavMenu>
layout		展開したい Lismコンポーネント を指定できます。
<NavMenu>
hovBgc		--hov-bgcを出力します。（.c--navMenu__linkに.-hov:bgc:を付けた時用）
<NavMenu>
hovC		--hov-cを出力します。 （.c--navMenu__linkに.-hov:c:を付けた時用）
<NavMenuLink>
hov		hover時のスタイルを指定できます。デフォルトはfadeが指定されています。

Import

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

Usage

↓
例
<NavMenu hasDivider bd='y'>
  <NavMenuItem>
    <NavMenuLink href='#menu'>Menu item 1</NavMenuLink>
  </NavMenuItem>
  <NavMenuItem>
    <NavMenuLink href='#menu'>Menu item 2</NavMenuLink>
  </NavMenuItem>
  <NavMenuItem>
    <NavMenuLink href='#menu'>Menu item 3</NavMenuLink>
  </NavMenuItem>
</NavMenu>
↓
アイコンやバッジを表示する例
import { FolderSimple } from "@phosphor-icons/react";


<NavMenu hasDivider bd>
  <NavMenuItem>
    <NavMenuLink href='#menu1' g='10' ai='c'>
      <Icon icon={FolderSimple} />
      <span>Menu item</span>
      <Lism tag='span' bd px='10' bdrs='2' fz='xs' fw='bold' mis='auto'>New</Lism>
    </NavMenuLink>
  </NavMenuItem>
  <NavMenuItem>
    <NavMenuLink href='#menu2' g='10' ai='c'>
      <Icon icon={FolderSimple} />
      <span>Menu item</span>
    </NavMenuLink>
  </NavMenuItem>
  <NavMenuItem>
    <NavMenuLink href='#menu3' g='10' ai='c'>
      <Icon icon={FolderSimple} />
      <span>Menu item</span>
    </NavMenuLink>
  </NavMenuItem>
</NavMenu>

ホバースタイルの調整

<NavMenuLink>からデフォルトで出力されるのは-hov:fadeになっています。
カラーを変化させたい場合、<NavMenu>（.c--navMenu）にhovBgcやhovC(--hov-cや--hov-bgc)を指定し、<NavMenuLink>（.c--navMenu__link）側で-hov:cや-hov:bgcを指定して受け取ります。

hover（hov）の指定について

↓
hover時のカラー指定
<NavMenu bd hasDivider hovBgc='text' hovC='base'>
  <NavMenuItem>
    <NavMenuLink href='#menu1' hov='c:,bgc:'>Menu item</NavMenuLink>
  </NavMenuItem>
  <NavMenuItem>
    <NavMenuLink href='#menu2' hov='c:,bgc:'>Menu item</NavMenuLink>
  </NavMenuItem>
  <NavMenuItem>
    <NavMenuLink href='#menu4' hov='c:,bgc:'>Menu item</NavMenuLink>
  </NavMenuItem>
</NavMenu>

変数をセットしなければ親から受け取れることを利用して、上の例では親の<NavMenu>にだけ変数をセットしています。

各メニューリンク部分を以下のようにしても同じことができます。

<NavMenuLink href='#menu1' hov={{c: 'base', bgc: 'text'}}>Menu item</NavMenuLink>

各リストのpaddingを一括で調整する方法

<NavMenuLink>(.c--navMenu__link)のpaddingは、--pass-p変数を受けとるようになっています。

これにより、<NavMenu>(.c--navMenu)側からpassVars.p(--pass-p)をセットして各メニューリンク部分のpaddingを一括調整できます。

pass-getについて

↓
--pass-p でpaddingを一括指定
<NavMenu bd hasDivider passVars={{p:'30'}}>
  <NavMenuItem>
    <NavMenuLink href='#menu1'>Menu item</NavMenuLink>
  </NavMenuItem>
  <NavMenuItem>
    <NavMenuLink href='#menu2'>Menu item</NavMenuLink>
  </NavMenuItem>
  <NavMenuItem>
    <NavMenuLink href='#menu3'>Menu item</NavMenuLink>
  </NavMenuItem>
</NavMenu>

各<NavMenuLink>にpaddingを指定してももちろん大丈夫ですが、ネストしたメニューをアコーディオン化する場合などを想定し、--pass-pでの管理が可能になっています。

メニューのネスト

↓
メニューのネスト
<NavMenu hasDivider hovBgc='base-2'>
  <NavMenuItem>
    <NavMenuLink hov='bgc:' href='#menu1'>Menu item 1</NavMenuLink>
  </NavMenuItem>
  <NavMenuItem>
    <NavMenuLink hov='bgc:' href='#menu2'>Menu item 2</NavMenuLink>
  </NavMenuItem>
  <NavMenuItem>
    <NavMenuLink hov='bgc:' href='#menu3'>Menu item 3</NavMenuLink>
    <NavMenu hasDivider bd='t' pis='30'>
      <NavMenuItem>
        <NavMenuLink hov='bgc:' href='#child-menu1'>Nested item</NavMenuLink>
      </NavMenuItem>
      <NavMenuItem>
        <NavMenuLink hov='bgc:' href='#child-menu2'>Nested item</NavMenuLink>
      </NavMenuItem>
      <NavMenuItem>
        <NavMenuLink hov='bgc:' href='#child-menu3'>Nested item</NavMenuLink>
        <NavMenu hasDivider bd='t' pis='30'>
          <NavMenuItem>
            <NavMenuLink hov='bgc:' href='#child-menu4'>Nested level 2 item</NavMenuLink>
          </NavMenuItem>
          <NavMenuItem>
            <NavMenuLink hov='bgc:' href='#child-menu5'>Nested level 2 item</NavMenuLink>
          </NavMenuItem>
        </NavMenu>
      </NavMenuItem>
    </NavMenu>
  </NavMenuItem>
</NavMenu>

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

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

↓
例
<NavMenu bd='y' hovBgc='base-2'>
  <NavMenuItem>
    <NavMenuLink hov='bgc:' href='#menu1'>Menu item</NavMenuLink>
  </NavMenuItem>
  <NavMenuItem>
    <NavMenuLink hov='bgc:' href='#menu2'>Menu item</NavMenuLink>
  </NavMenuItem>
  <NavMenuItem>
    <Accordion.Root>
      <Accordion.Header hov='bgc:' get='p'>
        <Accordion.Label>Menu item</Accordion.Label>
        <Accordion.Icon />
      </Accordion.Header>
      <Accordion.Body>
        <NavMenu pis='30'>
          <NavMenuItem>
            <NavMenuLink hov='bgc:' href='#child-menu1'>Nested item</NavMenuLink>
          </NavMenuItem>
          <NavMenuItem>
            <NavMenuLink hov='bgc:' href='#child-menu2'>Nested item</NavMenuLink>
          </NavMenuItem>
        </NavMenu>
      </Accordion.Body>
    </Accordion.Root>
  </NavMenuItem>
</NavMenu>
↓
親メニューのリンクも残してアコーディオンで展開
<NavMenu bd='y'>
  <NavMenuItem>
    <NavMenuLink href='#menu1'>Menu item</NavMenuLink>
  </NavMenuItem>
  <NavMenuItem>
    <NavMenuLink href='#menu2'>Menu item</NavMenuLink>
  </NavMenuItem>
  <NavMenuItem>
    <Accordion.Root>
      <Accordion.Header pr='10'>
        <Accordion.Label>
          <NavMenuLink href='#menu3'>Menu item</NavMenuLink>
        </Accordion.Label>
        <Accordion.Icon isTrigger bd bgc='inherit'/>
      </Accordion.Header>
      <Accordion.Body>
        <NavMenu pis='30'>
          <NavMenuItem>
            <NavMenuLink href='#child-menu1'>Nested item</NavMenuLink>
          </NavMenuItem>
          <NavMenuItem>
            <NavMenuLink href='#child-menu2'>Nested item</NavMenuLink>
          </NavMenuItem>
        </NavMenu>
      </Accordion.Body>
    </Accordion.Root>
  </NavMenuItem>
</NavMenu>

横並びメニュー

<NavMenu>にlayout={Flex}を私、横並びにする例を紹介します。

↓
hoverでネストメニューを表示
<NavMenu layout={Flex} hasDivider lh='xs' passVars={{p:'20 30'}}>
  <NavMenuItem>
    <NavMenuLink href='#menu1'>Menu item</NavMenuLink>
  </NavMenuItem>
  <NavMenuItem hov='pass' pos='r'>
    <NavMenuLink href='#menu3' d='f' ai='c'>
      <>Hover Menu <Icon icon='caret-down' css={{translate:'40%'}} /></>
    </NavMenuLink>
    <NavMenu hov='get:show' pos='a' t='100%' bgc='base' bxsh='2' bdrs='1' hasDivider>
      <NavMenuItem>
        <NavMenuLink href='#child-menu1'>Nested item</NavMenuLink>
      </NavMenuItem>
      <NavMenuItem>
        <NavMenuLink href='#child-menu2'>Nested Menu item</NavMenuLink>
      </NavMenuItem>
    </NavMenu>
  </NavMenuItem>
  <NavMenuItem>
    <NavMenuLink href='#menu1'>Menu item</NavMenuLink>
  </NavMenuItem>
</NavMenu>
↓
アコーディオンでのメニュー展開
<NavMenu layout={Flex} hasDivider lh='xs' passVars={{p:'20 30'}}>
  <NavMenuItem>
    <NavMenuLink href='#menu1'>Menu item</NavMenuLink>
  </NavMenuItem>


  <NavMenuItem pos='r'>
    <Accordion.Root>
      <Accordion.Header get='p'>
        <Accordion.Label>Acc Menu</Accordion.Label>
        <Accordion.Icon />
      </Accordion.Header>
      <Accordion.Body pos='a' bxsh='2' bgc='base' w='100%'>
        <NavMenu hasDivider>
          <NavMenuItem>
            <NavMenuLink href='#child-menu1'>Child item</NavMenuLink>
          </NavMenuItem>
          <NavMenuItem>
            <NavMenuLink href='#child-menu2'>Child item</NavMenuLink>
          </NavMenuItem>
          <NavMenuItem>
            <NavMenuLink href='#child-menu3'>Child item</NavMenuLink>
          </NavMenuItem>
        </NavMenu>
      </Accordion.Body>
    </Accordion.Root>
  </NavMenuItem>


  <NavMenuItem pos='r'>
    <Accordion.Root>
      <Accordion.Header g='0' pr='20'>
        <Accordion.Label>
          <NavMenuLink href='###' pr='20'>Acc(icon trigger)</NavMenuLink>
        </Accordion.Label>
        <Accordion.Icon isTrigger bd bgc='inherit'/>
      </Accordion.Header>
      <Accordion.Body pos='a' bxsh='2' bgc='base' w='100%'>
        <NavMenu hasDivider>
          <NavMenuItem>
            <NavMenuLink href='#child-menu1'>Child item</NavMenuLink>
          </NavMenuItem>
          <NavMenuItem>
            <NavMenuLink href='#child-menu2'>Child item</NavMenuLink>
          </NavMenuItem>
          <NavMenuItem>
            <NavMenuLink href='#child-menu3'>Child item</NavMenuLink>
          </NavMenuItem>
        </NavMenu>
      </Accordion.Body>
    </Accordion.Root>
  </NavMenuItem>
  <NavMenuItem>
    <NavMenuLink href='#menu1'>Menu item</NavMenuLink>
  </NavMenuItem>
</NavMenu>