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.Link>` `hov`	hover時のスタイルを指定できます。デフォルトは`op`が指定されています。

Source Code

@layer lism.modules {
	.c--navMenu {
		--link-td: none;
		--hl: var(--hl--s);
		--_item-p: var(--s20);
		--focus-offset: -1px; /* アコーディオン化した時にoutlineが一部見えなくなるのを防ぐ */
	}

	.c--navMenu_nest {
		--_item-p: inherit;
	}

	.c--navMenu_link {
		padding: var(--_item-p);
	}

	.c--navMenu_nest,
	.c--navMenu_item {
		--bdc: inherit;
	}
}

import { Lism, Stack, Flex } from 'lism-css/react';
import { getRootProps, getNestProps, getItemProps, getLinkProps } from '../getProps';
import '../_style.css';

export function Root({ children, ...props }) {
	return <Stack {...getRootProps(props)}>{children}</Stack>;
}

export function Nest({ children, ...props }) {
	return <Stack {...getNestProps(props)}>{children}</Stack>;
}

export function Item({ children, ...props }) {
	return <Lism {...getItemProps(props)}>{children}</Lism>;
}

export function Link({ children, ...props }) {
	return <Flex {...getLinkProps(props)}>{children}</Flex>;
}

/**
 * NavMenu コンポーネントの共通プロパティ処理
 */
import getMaybeCssVar from 'lism-css/lib/getMaybeCssVar';

/**
 * NavMenu.Root のプロパティを処理
 * @param {object} props - コンポーネントのプロパティ
 * @param {string} [props.hovC] - ホバー時のテキストカラー（--hov-c として出力）
 * @param {string} [props.hovBgc] - ホバー時の背景カラー（--hov-bgc として出力）
 * @param {string} [props.itemP] - 各アイテムのパディング（--_item-p として出力）
 * @param {object} [props.style] - スタイルオブジェクト
 */
export function getRootProps({ hovC, hovBgc, itemP, style = {}, ...props }) {
	const computedStyle = { ...style };

	if (hovBgc) computedStyle['--hov-bgc'] = getMaybeCssVar(hovBgc, 'color');
	if (hovC) computedStyle['--hov-c'] = getMaybeCssVar(hovC, 'color');
	if (itemP) computedStyle['--_item-p'] = getMaybeCssVar(itemP, 'space');

	return {
		lismClass: 'c--navMenu',
		tag: 'ul',
		style: computedStyle,
		...props,
	};
}

/**
 * NavMenu.Nest のプロパティを処理
 */
export function getNestProps(props) {
	return {
		lismClass: 'c--navMenu_nest',
		tag: 'ul',
		'px-s': '20',
		...props,
	};
}

/**
 * NavMenu.Item のプロパティを処理
 */
export function getItemProps(props) {
	return {
		lismClass: 'c--navMenu_item',
		tag: 'li',
		...props,
	};
}

/**
 * NavMenu.Link のプロパティを処理
 * @param {string} [props.href] - リンク先URL。指定時は a タグになる
 * @param {string} [props.tag='span'] - HTML タグ
 */
export function getLinkProps({ href, tag = 'span', ...props }) {
	return {
		lismClass: 'c--navMenu_link',
		tag: href ? 'a' : tag,
		href,
		c: 'inherit',
		...props,
	};
}

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

横並びメニューでホバー時に子メニューを表示する例

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