NavMenu
このページは現在調整中です
Lism UI (@lism-css/ui) はまだ準備中です。
ナビゲーションメニュー用のリストを作成できるコンポーネントです。
How to use
@lism-css/ui パッケージでNavMenu(c--navMenu)として提供しています。
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.Root> itemP | --_item-p変数を出力します。各リンクのpaddingを一括で調整できます。 |
<NavMenu.Link> hov | hover時のスタイルを指定できます。デフォルトで-bgcが付与され、hover時に背景色が変化します。 |
基本構造
<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>ネスト構造には <NavMenu.Nest> を使用します。
ソースコード
ソースコードは GitHub で公開しています。
Examples
シンプルな例
↓
例
<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>アイコンやバッジを表示する例
↓
例
<NavMenu.Root> <NavMenu.Item> <NavMenu.Link href="#menu1" g="15" ai="center" bgc="text" c="base"> <span>Menu item</span> <Lism as="span" bd px="10" bdrs="10" fz="xs" fw="bold"> New </Lism> <Icon icon="caret-right" ms="auto" /> </NavMenu.Link> </NavMenu.Item> <NavMenu.Item> <NavMenu.Link href="#menu2" g="15" ai="center" bgc="text" c="base"> <span>Menu item</span> <Icon icon="caret-right" ms="auto" /> </NavMenu.Link> </NavMenu.Item> <NavMenu.Item> <NavMenu.Link href="#menu3" g="15" ai="center" bgc="text" c="base"> <span>Menu item</span> <Icon icon="caret-right" ms="auto" /> </NavMenu.Link> </NavMenu.Item></NavMenu.Root>各リストの共通スタイルを一括で指定する方法
一部のプロパティは、NavMenu.Linkに直接propsを指定せずに、NavMenu.Rootから一括で指定できるようになっています。
itemPを指定すると、NavMenu.Linkのpadding（--_item-p）を調整できます。hovBgcでhover時の背景色（--hov-bgc）を渡せます。（NavMenu.Linkに-hov:-bgcが必要です）hovCでhover時の文字色（--hov-c）を渡せます。（NavMenu.Linkに-hov:-cが必要です）
なお、paddingをブレイクポイントごとに変えたい場合は、itemPではなく<NavMenu.Link>それぞれにpを指定してください。
↓
Rootに共通スタイルを指定
<NavMenu.Root bd itemP="30" hovBgc="text" hovC="base"> <NavMenu.Item> <NavMenu.Link href="#menu1" hov="-bgc,-c">Menu item</NavMenu.Link> </NavMenu.Item> <NavMenu.Item bd-t> <NavMenu.Link href="#menu2" hov="-bgc,-c">Menu item</NavMenu.Link> </NavMenu.Item> <NavMenu.Item bd-t> <NavMenu.Link href="#menu3" hov="-bgc,-c">Menu item</NavMenu.Link> </NavMenu.Item></NavMenu.Root>メニューのネスト
↓
メニューのネスト
<NavMenu.Root bd-y hovBgc="base-2"> <NavMenu.Item> <NavMenu.Link href="#menu1"> Menu item 1 </NavMenu.Link> </NavMenu.Item> <NavMenu.Item bd-t> <NavMenu.Link href="#menu2"> Menu item 2 </NavMenu.Link> <NavMenu.Nest bd-t> <NavMenu.Item> <NavMenu.Link href="#child-menu1"> Nested item </NavMenu.Link> </NavMenu.Item> <NavMenu.Item bd-t> <NavMenu.Link href="#child-menu3"> Nested item </NavMenu.Link> <NavMenu.Nest bd-t> <NavMenu.Item> <NavMenu.Link href="#child-menu4"> Nested level 2 item </NavMenu.Link> </NavMenu.Item> <NavMenu.Item bd-t> <NavMenu.Link 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を受け取れます。
↓
例
<NavMenu.Root bd-y hovBgc="base-2"> <NavMenu.Item> <NavMenu.Link 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 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.Panel> </Accordion.Item> </Accordion.Root> </NavMenu.Item></NavMenu.Root>横並びメニューでホバー時に子メニューを表示する例
<NavMenu.Root>にfxd='row'を指定し、横並びにする例を紹介します。
↓
hoverでネストメニューを表示
<Box min-h="15rem"> <NavMenu.Root fxd="row" hl="s" itemP="10"> <NavMenu.Item> <NavMenu.Link href="#menu1" hov="-o">Menu item</NavMenu.Link> </NavMenu.Item> <NavMenu.Item set="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%" ps="0" hl="s" bgc="base" bxsh="20" bdrs="10"> <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" hov="-o">Menu item</NavMenu.Link> </NavMenu.Item> </NavMenu.Root></Box>