NavMenu

Props

provide.pでpaddingを一括コントロールできます。

Import

import { NavMenu } from '@loos/lism-core';

DEMO

NavMenuの例

<NavMenu>
	<NavMenuItem>
		<NavMenuLink href='#menu1'>Lorem item</NavMenuLink>
	</NavMenuItem>
	<NavMenuItem>
		<NavMenuLink href='#menu2'>Lorem item</NavMenuLink>
	</NavMenuItem>
	<NavMenuItem>
		<NavMenuLink href='#menu3'>Lorem item</NavMenuLink>
	</NavMenuItem>
</NavMenu>

hasDividerと上下ボーダーを指定

<NavMenu hasDivider bd='block'>
	<NavMenuItem>
		<NavMenuLink href='#menu1'>Lorem item</NavMenuLink>
	</NavMenuItem>
	<NavMenuItem>
		<NavMenuLink href='#menu2'>Lorem item</NavMenuLink>
	</NavMenuItem>
	<NavMenuItem>
		<NavMenuLink href='#menu3'>Lorem item</NavMenuLink>
	</NavMenuItem>
</NavMenu>

ボックススタイルにしてprovideでpadding指定

<NavMenu hasDivider bd provide={{ p: 'em10' }}>
	<NavMenuItem>
		<NavMenuLink href='#menu1'>Lorem item</NavMenuLink>
	</NavMenuItem>
	<NavMenuItem>
		<NavMenuLink href='#menu2'>Lorem item</NavMenuLink>
	</NavMenuItem>
	<NavMenuItem>
		<NavMenuLink href='#menu3'>Lorem item</NavMenuLink>
	</NavMenuItem>
</NavMenu>

アイコンやバッジを使った例

import { FolderSimple } from "@phosphor-icons/react";
 
<NavMenu hasDivider bd>
	<NavMenuItem>
		<NavMenuLink href='#menu1' gap={20}>
			<Icon icon={FolderSimple} />
			Lorem item
			<Badge fz='12px' fw='700' variant='outline' ms='auto'>
				New
			</Badge>
		</NavMenuLink>
	</NavMenuItem>
	<NavMenuItem>
		<NavMenuLink href='#menu2' gap={20}>
			<Icon icon={FolderSimple} />
			Lorem item
		</NavMenuLink>
	</NavMenuItem>
	<NavMenuItem>
		<NavMenuLink href='#menu3' gap={20}>
			<Icon icon={FolderSimple} />
			Lorem item
		</NavMenuLink>
	</NavMenuItem>
</NavMenu>

メニューのネスト

<NavMenu hasDivider bd="block">
	<NavMenuItem>
		<NavMenuLink href='#menu1'>Lorem item</NavMenuLink>
	</NavMenuItem>
	<NavMenuItem>
		<NavMenuLink href='#menu2'>Lorem item</NavMenuLink>
	</NavMenuItem>
	<NavMenuItem>
		<NavMenuLink href='#menu3'>Has Child</NavMenuLink>
		<NavMenu hasDivider bd="top" nestLevel={1}>
			<NavMenuItem>
				<NavMenuLink href='#child-menu1'>Lorem item</NavMenuLink>
			</NavMenuItem>
			<NavMenuItem>
				<NavMenuLink href='#child-menu2'>Lorem item</NavMenuLink>
			</NavMenuItem>
			<NavMenuItem>
				<NavMenuLink href='#child-menu3'>Has Child</NavMenuLink>
				<NavMenu hasDivider bd="top" nestLevel={2}>
					<NavMenuItem>
						<NavMenuLink href='#child-menu4'>Lorem item</NavMenuLink>
					</NavMenuItem>
					<NavMenuItem>
						<NavMenuLink href='#child-menu5'>Lorem item</NavMenuLink>
					</NavMenuItem>
				</NavMenu>
			</NavMenuItem>
		</NavMenu>
	</NavMenuItem>
</NavMenu>

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

展開メニューにリンクなし

リサイズ可能エリアです ↑

<NavMenu bd='block'>
	<NavMenuItem>
		<NavMenuLink href='#menu1'>Lorem item</NavMenuLink>
	</NavMenuItem>
	<NavMenuItem>
		<NavMenuLink href='#menu2'>Lorem item</NavMenuLink>
	</NavMenuItem>
	<NavMenuItem>
		<Accordion>
			<AccordionHeader py={0} pl={0} minH='unset' hover='-'>
				<AccordionLabel>
					<NavMenuLink>Lorem item</NavMenuLink>
				</AccordionLabel>
				<AccordionIcon />
			</AccordionHeader>
			<AccordionBody p={0}>
				<NavMenu nestLevel={1}>
					<NavMenuItem>
						<NavMenuLink href='#child-menu1'>Child item</NavMenuLink>
					</NavMenuItem>
					<NavMenuItem>
						<NavMenuLink href='#child-menu2'>Child item</NavMenuLink>
					</NavMenuItem>
				</NavMenu>
			</AccordionBody>
		</Accordion>
	</NavMenuItem>
</NavMenu>

メニューはリンクのままアコーディオン化（アイコンクリックで展開）

リサイズ可能エリアです ↑

<NavMenu bd='block'>
	<NavMenuItem>
		<NavMenuLink href='#menu1'>Lorem item</NavMenuLink>
	</NavMenuItem>
	<NavMenuItem>
		<NavMenuLink href='#menu2'>Lorem item</NavMenuLink>
	</NavMenuItem>
	<NavMenuItem>
		<Accordion>
			<AccordionHeader py={0} pl={0} minH='unset'>
				<AccordionLabel>
					<NavMenuLink href='#menu3'>Lorem item</NavMenuLink>
				</AccordionLabel>
				<AccordionIcon isTrigger />
			</AccordionHeader>
			<AccordionBody p={0}>
				<NavMenu nestLevel={1}>
					<NavMenuItem>
						<NavMenuLink href='#child-menu1'>Child item</NavMenuLink>
					</NavMenuItem>
					<NavMenuItem>
						<NavMenuLink href='#child-menu2'>Child item</NavMenuLink>
					</NavMenuItem>
				</NavMenu>
			</AccordionBody>
		</Accordion>
	</NavMenuItem>
</NavMenu>

横並び

<NavMenu
	isFlex 
	hasDivider
	provide={{ p: 'em7 em10' }}
>
	<NavMenuItem>
		<NavMenuLink href='#menu1'>Lorem item</NavMenuLink>
	</NavMenuItem>
	<NavMenuItem>
		<NavMenuLink href='#menu2'>Lorem item</NavMenuLink>
	</NavMenuItem>
	<NavMenuItem>
		<Accordion>
			<AccordionHeader py={0} pl={0} gap={0} minH='unset'>
				<AccordionLabel>
					<NavMenuLink href='#menu1'>Lorem item</NavMenuLink>
				</AccordionLabel>
				<AccordionIcon isTrigger size='.875em' />
			</AccordionHeader>
			<AccordionBody p={0} shadow={3} pos="absolute" bgc="base">
				<NavMenu nestLevel={1} hasDivider>
					<NavMenuItem>
						<NavMenuLink href='#menu1'>Lorem item</NavMenuLink>
					</NavMenuItem>
					<NavMenuItem>
						<NavMenuLink href='#menu2'>Lorem item</NavMenuLink>
					</NavMenuItem>
					<NavMenuItem>
						<NavMenuLink href='#menu3'>Lorem item</NavMenuLink>
					</NavMenuItem>
				</NavMenu>
			</AccordionBody>
		</Accordion>
	</NavMenuItem>
</NavMenu>

Section Chatbubble