Menu

Sahifaning yuqori darajali navigatsiyasi uchun gorizontal navigatsiya paneli. Dropdown submenyular, badge'lar, ikonlar, mavzular, overflow boshqaruvi, indikator paneli, klaviatura navigatsiyasi va boshqalarni qo'llab-quvvatlaydi.

Vertikal yon panel navigatsiyasi uchun Sidebar'ni ko'ring.

Basic

vue

<script setup>
import { ref } from 'vue'
import { VxMenu } from 'veloxui'

const active = ref('home')

const items = [
  { key: 'home', label: 'Home', icon: 'home' },
  { key: 'inbox', label: 'Inbox', icon: 'mail' },
  { key: 'starred', label: 'Starred', icon: 'star' },
  { key: 'settings', label: 'Settings', icon: 'settings' },
]
</script>

<template>
  <VxMenu v-model="active" :items="items" />
</template>

Borderless

Chegara va burchak radiusini olib tashlash uchun :bordered="false" ni o'rnating.

vue

<VxMenu v-model="active" :items="items" :bordered="false" />

Custom Sizing

Menyu burchak radiusini, element burchak radiusini va element balandligini sozlang.

vue

<VxMenu v-model="active" :items="items" :radius="20" :item-radius="16" :item-height="44" />
<!-- Fully rounded pill style -->
<VxMenu v-model="active" :items="items" :radius="999" :item-radius="999" />

With Badges

vue

<VxMenu v-model="active" :items="[
  { key: 'inbox', label: 'Inbox', icon: 'mail', badge: 12, badgeType: 'primary' },
  { key: 'starred', label: 'Starred', icon: 'star', badge: 'New', badgeType: 'success' },
  { key: 'alerts', label: 'Alerts', icon: 'heart', badge: 3, badgeType: 'danger' },
  { key: 'settings', label: 'Settings', icon: 'settings' },
]" />

Ota elementning dropdown bolalarini ko'rsatish uchun uning ustiga sichqonchani olib boring. Bola faol bo'lganda ota element ajratib ko'rsatiladi.

vue

<VxMenu v-model="active" :items="[
  { key: 'home', label: 'Home', icon: 'home' },
  {
    key: 'projects',
    label: 'Projects',
    icon: 'folder',
    children: [
      { key: 'design', label: 'Design System' },
      { key: 'api', label: 'API Platform' },
    ],
  },
]" />

Notification Dots

Elementlardagi kichik rangli indikatorlar. Standart rangi qizil, dotColor orqali sozlanadi.

vue

<VxMenu v-model="active" :items="[
  { key: 'inbox', label: 'Inbox', icon: 'mail', dot: true },
  { key: 'alerts', label: 'Alerts', icon: 'heart', dot: true, dotColor: '#f59e0b' },
]" />

Active Indicator Bar

Faol elementga siljiydigan animatsiyali pastki panelni ko'rsatish uchun indicator'ni o'rnating.

vue

<VxMenu v-model="active" :items="items" indicator />

Sticky

Menyuni skroll konteyneri yuqorisiga mahkamlash uchun sticky'ni o'rnating.

vue

<VxMenu v-model="active" :items="items" sticky />

Overflow

Elementlar sig'maganda, ortiqcha elementlar "More" dropdown'iga yig'iladi.

vue

<VxMenu v-model="active" :items="items" overflow />

Loading

Ma'lumotlar olinayotgan paytda skeleton placeholder'larini ko'rsatish.

vue

<VxMenu loading :loading-count="5" />

Slots

Elementlar atrofiga kontent qo'shish uchun prefix va suffix slot'laridan foydalaning. Element renderini sozlash uchun item slot'idan foydalaning.

vue

<VxMenu v-model="active" :items="items">
  <template #prefix>
    <img src="/logo.svg" style="height: 24px; margin-right: 12px;" />
  </template>
  <template #suffix>
    <VxButton size="sm" variant="outline">Sign In</VxButton>
  </template>
  <template #item="{ item, active }">
    <button :class="{ 'my-custom-item': true, active }">
      {{ item.label }}
    </button>
  </template>
</VxMenu>

Router Integration

vue-router orqali SPA navigatsiyasi uchun elementlardagi to xususiyatidan foydalaning.

vue

<VxMenu v-model="active" :items="[
  { key: 'home', label: 'Home', icon: 'home', to: '/' },
  { key: 'about', label: 'About', icon: 'user', to: '/about' },
  { key: 'docs', label: 'Docs', icon: 'file', to: { name: 'docs' } },
]" />

Context menyuni ko'rish uchun "Home" yoki "Inbox"'ga o'ng tugmani bosing. Ikonlar, destruktiv (qizil) elementlar va o'chirilgan elementlarni qo'llab-quvvatlaydi.

vue

<VxMenu v-model="active" :items="[
  {
    key: 'inbox',
    label: 'Inbox',
    icon: 'mail',
    contextMenu: [
      { label: 'Mark all read', icon: 'check', action: (item) => {} },
      { label: 'Settings', icon: 'settings', action: (item) => {} },
      { label: 'Delete all', icon: 'trash', destructive: true, action: (item) => {} },
    ],
  },
]" />

Responsive Drawer

Kichik ekranlarda avtomatik ravishda hamburger tugmasiga o'tish uchun responsive'ni o'rnating. O'lchamni o'zgartirish va menyuning desktop va mobil rejimlari o'rtasida almashinishini ko'rish uchun dastani sudrab olib boring.

↔ drag to resize

vue

<VxMenu v-model="active" :items="items" responsive />
<!-- Custom breakpoint (default 768) -->
<VxMenu v-model="active" :items="items" responsive :breakpoint="640" />

O'lchamni o'zgartirish uchun demo'ning pastki o'ng burchagini sudrang. Kenglik breakpoint'dan pastga tushsa, menyu hamburger ikoniga yig'iladi. Silliq chap tomonli drawer'ni ochish uchun uni bosing.

Custom Drawer Title

Header matnini o'zgartirish uchun drawer-title prop'idan foydalaning yoki to'liq nazorat uchun drawer-header slot'idan foydalaning.

vue

<!-- Simple title change -->
<VxMenu v-model="active" :items="items" responsive drawer-title="Navigation" />

<!-- Full custom header via slot -->
<VxMenu v-model="active" :items="items" responsive>
  <template #drawer-header>
    <img src="/logo.svg" style="height: 24px;" />
    <span style="font-weight: 600;">My App</span>
  </template>
</VxMenu>

Custom Drawer Width

Drawer panel kengligini o'zgartirish uchun drawer-width'dan foydalaning. Raqam (px) yoki satrni qabul qiladi.

vue

<VxMenu v-model="active" :items="items" responsive :drawer-width="220" />
<VxMenu v-model="active" :items="items" responsive :drawer-width="360" />
<VxMenu v-model="active" :items="items" responsive drawer-width="50%" />

Custom Burger & Close Icons

Hamburger ikonini almashtirish uchun burger-icon slot'idan va yopish tugmasi ikonini almashtirish uchun drawer-close-icon slot'idan foydalaning.

vue

<VxMenu v-model="active" :items="items" responsive>
  <!-- Three-dot burger icon -->
  <template #burger-icon>
    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>
    </svg>
  </template>
  <!-- Arrow-left close icon -->
  <template #drawer-close-icon>
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="m12 19-7-7 7-7"/><path d="M19 12H5"/>
    </svg>
  </template>
</VxMenu>

Dark Theme

vue

<VxMenu v-model="active" :items="items" theme="dark" />

Menyu to'liq klaviatura navigatsiyasini qo'llab-quvvatlaydi:

Arrow Left/Right — elementlar o'rtasida fokusni siljitish
Arrow Down — submenyuni ochish
Enter / Space — fokuslangan elementni tanlash
Escape — submenyu yoki context menyuni yopish
Home / End — birinchi/oxirgi elementga o'tish

API

VxMenu Props

Prop	Type	Default	Description
`items`	`MenuItem[]`	`[]`	Menyu elementlari
`v-model`	`string`	`''`	Faol element kaliti
`theme`	`'light' \| 'dark'`	`'light'`	Rang mavzusi
`bordered`	`boolean`	`true`	Chegara va burchak radiusini ko'rsatish
`radius`	`number \| string`	`12`	Menyu burchak radiusi (px)
`item-radius`	`number \| string`	`8`	Element burchak radiusi (px)
`item-height`	`number \| string`	`38`	Element minimal balandligi (px)
`overflow`	`boolean`	`false`	Ortiqcha elementlarni "More" dropdown'iga yig'ish
`indicator`	`boolean`	`false`	Animatsiyali faol indikator panelini ko'rsatish
`sticky`	`boolean`	`false`	Yuqoriga sticky joylashuv
`loading`	`boolean`	`false`	Skeleton placeholder'larni ko'rsatish
`loading-count`	`number`	`4`	Skeleton elementlar soni
`responsive`	`boolean`	`false`	Kichik ekranlarda avtomatik burger menyu
`breakpoint`	`number`	`768`	Burger rejimi uchun kenglik chegarasi
`drawer-width`	`number \| string`	`280`	Drawer panel kengligi
`drawer-title`	`string`	`'Menu'`	Drawer header sarlavha matni
`root-class`	`string \| string[] \| object`	—	Root'dagi klass

MenuItem

Property	Type	Required	Description
`key`	`string`	Yes	Noyob identifikator
`label`	`string`	Yes	Ko'rsatiladigan matn
`icon`	`string \| Component`	No	O'rnatilgan ikon nomi yoki Vue komponenti
`disabled`	`boolean`	No	Ushbu elementni o'chirish
`badge`	`string \| number`	No	Badge kontenti
`badgeType`	`'default' \| 'primary' \| 'success' \| 'warning' \| 'danger'`	No	Badge rangi
`divider`	`boolean`	No	Oldin ajratgich ko'rsatish
`action`	`(item) => void`	No	Bosishda callback
`children`	`MenuItem[]`	No	Dropdown submenyu elementlari
`to`	`string \| object`	No	Vue Router navigatsiya manzili
`dot`	`boolean`	No	Bildirishnoma nuqtasini ko'rsatish
`dotColor`	`string`	No	Nuqta rangi (standart qizil)
`contextMenu`	`ContextMenuItem[]`	No	O'ng tugmani bosish menyu elementlari

Slots

Slot	Props	Description
`prefix`	—	Menyu elementlaridan oldingi kontent
`suffix`	—	Menyu elementlaridan keyingi kontent
`item`	`{ item, active }`	O'zgartirilgan element rendering'i
`burger-icon`	—	O'zgartirilgan burger tugmasi ikoni
`drawer-header`	—	O'zgartirilgan drawer header kontenti
`drawer-close-icon`	—	O'zgartirilgan drawer yopish tugmasi ikoni
`drawer-footer`	—	Drawer elementlar ostidagi kontent

Events

Event	Payload	Description
`update:modelValue`	`(key: string)`	Faol element o'zgardi
`select`	`(key, item)`	Element tanlandi
`context-menu`	`(item, event)`	Element ustida o'ng tugma bosildi

Basic

Borderless

Custom Sizing

With Badges

Notification Dots

Active Indicator Bar

Sticky

Overflow

Loading

Slots

Router Integration

Context Menu

Responsive Drawer

Custom Drawer Title

Custom Drawer Width

Custom Burger & Close Icons

Dark Theme

Keyboard Navigation

API

VxMenu Props

MenuItem

Slots

Events

Menu ​

Basic ​

Borderless ​

Custom Sizing ​

With Badges ​

Dropdown Submenus ​

Notification Dots ​

Active Indicator Bar ​

Sticky ​

Overflow ​

Loading ​

Slots ​

Router Integration ​

Context Menu ​

Responsive Drawer ​

Custom Drawer Title ​

Custom Drawer Width ​

Custom Burger & Close Icons ​

Dark Theme ​

Keyboard Navigation ​

API ​

VxMenu Props ​

MenuItem ​

Slots ​

Events ​

Menu

Basic

Borderless

Custom Sizing

With Badges

Dropdown Submenus

Notification Dots

Active Indicator Bar

Sticky

Overflow

Loading

Slots

Router Integration

Context Menu

Responsive Drawer

Custom Drawer Title

Custom Drawer Width

Custom Burger & Close Icons

Dark Theme

Keyboard Navigation

API

VxMenu Props

MenuItem

Slots

Events