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

NavMenu

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

Create Component

Section titled “Create Component”

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

Source Code

Section titled “Source Code”
ソースコードを手動でコピー&ペーストしてご利用ください。

Import

Section titled “Import”
 import js from '@/components/lism/NavMenu/index.js';

Props

Section titled “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

Section titled “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='center'>
      <Icon icon={FolderSimpleIcon} />
      <span>Menu item</span>
      <Lism tag='span' bd px='10' bdrs='10' fz='xs' fw='bold' mx-s='auto'>New</Lism>
    </NavMenu.Link>
  </NavMenu.Item>
  <NavMenu.Item>
    <NavMenu.Link href='#menu2' g='10' ai='center'>
      <Icon icon={FolderSimpleIcon} />
      <span>Menu item</span>
    </NavMenu.Link>
  </NavMenu.Item>
  <NavMenu.Item>
    <NavMenu.Link href='#menu3' g='10' ai='center'>
      <Icon icon={FolderSimpleIcon} />
      <span>Menu item</span>
    </NavMenu.Link>
  </NavMenu.Item>
</NavMenu.Root>

ホバースタイルの調整

Section titled “ホバースタイルの調整”

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

カラーを変化させたい場合、<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='between' ai='center'>
      <span>Menu item</span>
      <Icon icon='caret-right' />
    </NavMenu.Link>
  </NavMenu.Item>
  <NavMenu.Item bd-t>
    <NavMenu.Link href='#menu2' hov='c,bgc' jc='between' ai='center'>
      <span>Menu item</span>
      <Icon icon='caret-right' />
    </NavMenu.Link>
  </NavMenu.Item>
  <NavMenu.Item bd-t>
    <NavMenu.Link href='#menu4' hov='c,bgc' jc='between' ai='center'>
      <span>Menu item</span>
      <Icon icon='caret-right' />
    </NavMenu.Link>
  </NavMenu.Item>
</NavMenu.Root>

hover（hov）の指定について

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

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

Section titled “各リストのpaddingを一括で調整する方法”
  • itemPを指定すると--_item-p変数をセットできるようになっています。

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

↓
itemPを指定
<NavMenu.Root bd bdc='line' itemP='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>

メニューのネスト

Section titled “メニューのネスト”
↓
メニューのネスト
<NavMenu.Root bdc='line' hovBgc='base-2' itemP='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>

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

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

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

↓
例
  • Menu item
  • Menu item (Accordion) 
<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>
↓
親メニューのリンクも残してアコーディオンで展開
<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>

横並びメニュー

Section titled “横並びメニュー”

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

↓
hoverでネストメニューを表示
<NavMenu.Root fxd='row' lh='xs' itemP='20 30'>
  <NavMenu.Item>
    <NavMenu.Link href='#menu1'>Menu item</NavMenu.Link>
  </NavMenu.Item>
  <NavMenu.Item setHov pos='rel'>
    <NavMenu.Link href='#menu3' ai='center'>
      <Fragment>Hover Menu Item <Icon icon='caret-down' translate='40%' /></Fragment>
    </NavMenu.Link>
    <NavMenu.Nest hov='to:show' pos='abs' t='100%' px-s='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' itemP='20 30'>
  <NavMenu.Item>
    <NavMenu.Link href='#menu1'>Menu item</NavMenu.Link>
  </NavMenu.Item>


  <NavMenu.Item pos='rel'>
    <Accordion.Root>
      <Accordion.Header p='var(--_item-p)'>
        <Accordion.Label>Accordion Menu</Accordion.Label>
        <Accordion.Icon />
      </Accordion.Header>
      <Accordion.Body pos='abs' bxsh='20' bgc='base' w='100%'>
        <NavMenu.Nest px-s='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='rel'>
    <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='abs' bxsh='20' bgc='base' w='100%'>
        <NavMenu.Nest px-s='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>