NavMenu

このページは現在調整中です

Lism UI (@lism-css/ui) はまだ準備中です。

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

TEST

Create Component

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

Source Code

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

Import

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

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

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

↓

例

<NavMenu.Root>
  <NavMenu.Item>
    <NavMenu.Link href='#menu1' g='15' ai='center' bgc="text" c="base" hov='neutral'>
      <span>Menu item</span>
      <Lism tag='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>

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

itemPを指定すると--_item-p変数をセットできるようになっています。

ただし、ブレイクポイントで値を変更させたい場合は、<NavMenu.Link>それぞれにpを指定してください。

↓

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>

メニューのネスト

↓

メニューのネスト

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

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

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

リンクのpaddingは--_item-pで管理されているため、アコーディオン化した時に var(--_item-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' p='var(--_item-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でネストメニューを表示

<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 setHov pos='rel'>
      <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='to:show' pos='abs' t='100%' px-s='0' lh='s' bgc='base' bxsh='20' bdrs='5'>
        <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>