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時のスタイルを指定できます。 |
基本構造
<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" 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 as="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>メニューのネスト
↓
メニューのネスト
<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を受け取れます。
↓
例
<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.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 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.Panel> </Accordion.Item> </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 set="var: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%" px-s="0" lh="s" bgc="base" bxsh="20" bdrs="10"> <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>