Меню навигации

Основная навигация сайта или приложения. Два режима расположения — горизонтальный и вертикальный; поддерживаются подменю, группы, сворачиваемая панель и аккордеон.

Меню навигации

<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	Аккордеон: одновременно развёрнуто только одно подменю	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	Элементы меню внутри группы