Menu ナビゲーションメニュー

サイト/アプリケーションのメインナビゲーションです。水平/垂直の 2 種類のレイアウトをサポートし、サブメニュー、グループ、折りたたみバー、アコーディオンを備えます。

ナビゲーションメニュー

<template>
  <div class="demo-col" style="max-width: 640px; gap: 20px">
    <p class="demo-note">horizontal 水平モード</p>
    <LhMenu v-model="active" mode="horizontal">
      <LhMenuItem index="home">ホーム</LhMenuItem>
      <LhSubMenu index="song" title="宋代絵画">
        <LhMenuItem index="fan">範寛</LhMenuItem>
        <LhMenuItem index="guo">郭熙</LhMenuItem>
      </LhSubMenu>
      <LhMenuItem index="yuan" disabled>元代（無効）</LhMenuItem>
    </LhMenu>
    <p class="demo-note">選択中：{{ active }}</p>
    <p class="demo-note">vertical 垂直モード + アコーディオン（uniqueOpened）+ グループ</p>
    <LhMenu
      v-model="active2"
      mode="vertical"
      :collapse="collapsed"
      unique-opened
      :default-openeds="['g1']"
      style="width: 220px"
    >
      <LhSubMenu index="g1" title="山水巻">
        <LhMenuItemGroup title="北宋">
          <LhMenuItem index="fan2">範寛</LhMenuItem>
          <LhMenuItem index="guo2">郭熙</LhMenuItem>
        </LhMenuItemGroup>
        <LhMenuItemGroup title="南宋">
          <LhMenuItem index="li">李唐</LhMenuItem>
        </LhMenuItemGroup>
      </LhSubMenu>
      <LhMenuItem index="yuan2">元代絵画</LhMenuItem>
    </LhMenu>
    <LhButton size="small" @click="collapsed = !collapsed">{{ collapsed ? '展開' : '折りたたむ' }}（collapse）</LhButton>
  </div>
</template>

<script>
export default {
  data: () => ({
    active: 'home',
    active2: 'fan2',
    collapsed: false,
  }),
}
</script>

Menu Props

プロパティ	説明	型	デフォルト値
v-model	現在アクティブな項目（制御される modelValue、未指定時はコンポーネント内部で管理）	string	—
mode	レイアウトモード	'horizontal' \| 'vertical'	'horizontal'
collapse	垂直モードをアイコンバーに折りたたむ（サブメニューはフライアウトパネルになる）	boolean	false
defaultOpeneds	デフォルトで展開されるサブメニューのキー（非制御）	string[]	—
openeds	制御される展開済みサブメニューのキー	string[]	—
uniqueOpened	アコーディオン：同時に展開できるサブメニューは 1 つのみ	boolean	false
sx	sx によるレイアウト省略記法	—	—

MenuItem Props

プロパティ	説明	型	デフォルト値
index	一意識別子（必須）	string	—
disabled	無効にするかどうか	boolean	false
sx	sx によるレイアウト省略記法	—	—

SubMenu Props

プロパティ	説明	型	デフォルト値
index	一意識別子（必須）	string	—
title	タイトル（title スロットも使用可）	string	—
disabled	無効にするかどうか	boolean	false
sx	sx によるレイアウト省略記法	—	—

MenuItemGroup Props

プロパティ	説明	型	デフォルト値
title	グループのタイトル（title スロットも使用可）	string	—
sx	sx によるレイアウト省略記法	—	—

Slots

スロット	説明
SubMenu title	サブメニューのタイトル
SubMenu default	サブメニューの内容（MenuItem / MenuItemGroup を配置）
MenuItemGroup title	グループのタイトル
MenuItemGroup default	グループ内のメニュー項目