NavMenu

ナビメニューリストを設置できるコンポーネントの作成例を紹介します。

Create Component

NavMenu(.c--navMenu)というコンポーネントを作って利用する例を紹介していきます。

Source Code

ソースコードを手動でコピー&ペーストしてご利用ください。

Import

 import js from '@/components/lism/NavMenu/index.js';

Props

プロパティ	説明
`<NavMenu.Root>` `hovBgc`	`--hov-bgc`を出力します。（`.c--navMenu_link`に`.-hov:bgc`を付けた時用）
`<NavMenu.Root>` `hovC`	`--hov-c`を出力します。（`.c--navMenu_link`に`.-hov:c`を付けた時用）
`<NavMenu.Link>` `hov`	hover時のスタイルを指定できます。デフォルトは`op`が指定されています。

Usage

↓

例

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

↓

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

import { FolderSimpleIcon } from "@phosphor-icons/react";
// ↑ 外部のiconコンポーネント

<NavMenu.Root bd='y'>
  <NavMenu.Item>
    <NavMenu.Link href='#menu1' g='10' ai='c'>
      <Icon icon={FolderSimpleIcon} />
      <span>Menu item</span>
      <Lism tag='span' bd px='10' bdrs='10' fz='xs' fw='bold' mis='auto'>New</Lism>
    </NavMenu.Link>
  </NavMenu.Item>
  <NavMenu.Item>
    <NavMenu.Link href='#menu2' g='10' ai='c'>
      <Icon icon={FolderSimpleIcon} />
      <span>Menu item</span>
    </NavMenu.Link>
  </NavMenu.Item>
  <NavMenu.Item>
    <NavMenu.Link href='#menu3' g='10' ai='c'>
      <Icon icon={FolderSimpleIcon} />
      <span>Menu item</span>
    </NavMenu.Link>
  </NavMenu.Item>
</NavMenu.Root>

ホバースタイルの調整

<NavMenu.Link>からデフォルトで出力されるのは-hov:opになっています。

カラーを変化させたい場合、<NavMenu.Root>にhovBgc(--hov-c)やhovC(--hov-bgc)を指定しておき、<NavMenu.Link>側で-hov:cや-hov:bgcクラスで受け取ると以下のようになります。

↓

hover時のカラー指定

<NavMenu.Root bd hovBgc='text' hovC='base'>
  <NavMenu.Item>
    <NavMenu.Link href='#menu1' hov='c,bgc' jc='sb' ai='c'>
      <span>Menu item</span>
      <Icon icon='caret-right' />
    </NavMenu.Link>
  </NavMenu.Item>
  <NavMenu.Item>
    <NavMenu.Link href='#menu2' hov='c,bgc' jc='sb' ai='c'>
      <span>Menu item</span>
      <Icon icon='caret-right' />
    </NavMenu.Link>
  </NavMenu.Item>
  <NavMenu.Item>
    <NavMenu.Link href='#menu4' hov='c,bgc' jc='sb' ai='c'>
      <span>Menu item</span>
      <Icon icon='caret-right' />
    </NavMenu.Link>
  </NavMenu.Item>
</NavMenu.Root>

hover（hov）の指定について

上の例では、hover時のカラー変数を親の<NavMenu.Root>にセットすることで、子要素で同じ値を受け取っています。

各リストのpadding, ボーダーカラーを一括で調整する方法

<NavMenu.Item> は data-lism-get='bdc'
<NavMenu.Link> はdata-lism-get='p'

が付与されており、それぞれ親の--pass_bdc,--pass_p変数を受けとるようになっています。これにより、<NavMenu.Root>に--pass_bdcや--pass_pをセットして一括調整できます。

Lismで提案する pass-get について

↓

--pass_bdc（Rootの--bdcが初期セットされます）と--pass_p でpadding, --bdcを一括指定

<NavMenu.Root bd bdc='divider' passVars={{p:'30'}}>
  <NavMenu.Item>
    <NavMenu.Link href='#menu1'>Menu item</NavMenu.Link>
  </NavMenu.Item>
  <NavMenu.Item bd='t'>
    <NavMenu.Link href='#menu2'>Menu item</NavMenu.Link>
  </NavMenu.Item>
  <NavMenu.Item bd='t'>
    <NavMenu.Link href='#menu3'>Menu item</NavMenu.Link>
  </NavMenu.Item>
</NavMenu.Root>

メニューのネスト

↓

メニューのネスト

Menu item 1
Menu item 2
- Nested item
- Nested item
  - Nested level 2 item
  - Nested level 2 item

<NavMenu.Root bdc='divider' hovBgc='base-2' passVars={{p:'10'}} >
  <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>

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

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

↓

例

Menu item
Menu item (Accordion)
- Nested item
- Nested item

<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.Header hov='bgc' data-lism-get='p'>
        <Accordion.Label>Menu item (Accordion)</Accordion.Label>
        <Accordion.Icon />
      </Accordion.Header>
      <Accordion.Body>
        <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.Body>
    </Accordion.Root>
  </NavMenu.Item>
</NavMenu.Root>

↓

親メニューのリンクも残してアコーディオンで展開

Menu item
Menu item (Accordion)
- Nested item
- Nested item

<NavMenu.Root bd='y'>
  <NavMenu.Item>
    <NavMenu.Link href='#menu1'>Menu item</NavMenu.Link>
  </NavMenu.Item>
  <NavMenu.Item>
    <Accordion.Root>
      <Accordion.Header pr='10'>
        <Accordion.Label>
          <NavMenu.Link href='#menu2'>Menu item (Accordion)</NavMenu.Link>
        </Accordion.Label>
        <Accordion.Icon isTrigger bd bgc='inherit' p='10' />
      </Accordion.Header>
      <Accordion.Body>
        <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.Body>
    </Accordion.Root>
  </NavMenu.Item>
</NavMenu.Root>

横並びメニュー

<NavMenu.Root>にfxd='row'を指定し、横並びにする例を紹介します。

↓

hoverでネストメニューを表示

<NavMenu.Root fxd='row' lh='xs' passVars={{p:'20 30'}}>
  <NavMenu.Item>
    <NavMenu.Link href='#menu1'>Menu item</NavMenu.Link>
  </NavMenu.Item>
  <NavMenu.Item hov='set' pos='r'>
    <NavMenu.Link href='#menu3' ai='c'>
      <Fragment>Hover Menu Item <Icon icon='caret-down' css={{translate:'40%'}} /></Fragment>
    </NavMenu.Link>
    <NavMenu.Nest hov='get:show' pos='a' t='100%' pis='0' lh='s' bgc='base' bxsh='20' bdrs='5'>
      <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'>Menu item</NavMenu.Link>
  </NavMenu.Item>
</NavMenu.Root>

↓

アコーディオンでのメニュー展開

<NavMenu.Root fxd='row' lh='xs' passVars={{p:'20 30'}}>
  <NavMenu.Item>
    <NavMenu.Link href='#menu1'>Menu item</NavMenu.Link>
  </NavMenu.Item>

  <NavMenu.Item pos='r'>
    <Accordion.Root>
      <Accordion.Header data-lism-get='p'>
        <Accordion.Label>Accordion Menu</Accordion.Label>
        <Accordion.Icon />
      </Accordion.Header>
      <Accordion.Body pos='a' bxsh='20' bgc='base' w='100%'>
        <NavMenu.Nest pis='0'>
          <NavMenu.Item>
            <NavMenu.Link href='#child-menu1'>Child item</NavMenu.Link>
          </NavMenu.Item>
          <NavMenu.Item>
            <NavMenu.Link href='#child-menu2'>Child item</NavMenu.Link>
          </NavMenu.Item>
        </NavMenu.Nest>
      </Accordion.Body>
    </Accordion.Root>
  </NavMenu.Item>

  <NavMenu.Item pos='r'>
    <Accordion.Root>
      <Accordion.Header g='0' pr='20'>
        <Accordion.Label>
          <NavMenu.Link href='###' pr='20'>Icon trigger Menu</NavMenu.Link>
        </Accordion.Label>
        <Accordion.Icon isTrigger bd bgc='inherit' p='5'/>
      </Accordion.Header>
      <Accordion.Body pos='a' bxsh='20' bgc='base' w='100%'>
        <NavMenu.Nest pis='0'>
          <NavMenu.Item>
            <NavMenu.Link href='#child-menu1'>Child item</NavMenu.Link>
          </NavMenu.Item>
          <NavMenu.Item>
            <NavMenu.Link href='#child-menu2'>Child item</NavMenu.Link>
          </NavMenu.Item>
        </NavMenu.Nest>
      </Accordion.Body>
    </Accordion.Root>
  </NavMenu.Item>
  <NavMenu.Item>
    <NavMenu.Link href='#menu1'>Menu item</NavMenu.Link>
  </NavMenu.Item>
</NavMenu.Root>