Navigation

CSNavigationMenu

Меню с вложенными разделами, иконками, badge и chip-индикаторами; поддерживает горизонтальную и вертикальную ориентацию.

Предпросмотр

Интерактивный компонент

Ориентация меню

В примере показаны вложенные пункты, иконки, chip-индикатор, badge и раскрываемые группы.

Использование

Vue · публичный API CS UI Kit

<script setup lang="ts">
const items = [
  {
    label: 'Рабочая область',
    icon: 'i-lucide-layout-dashboard',
    chip: { color: 'success', inset: true },
    defaultOpen: true,
    children: [
      { label: 'Обзор', icon: 'i-lucide-house', to: '/overview' },
      { label: 'Проекты', icon: 'i-lucide-folder-kanban', badge: 4, to: '/projects' },
      { label: 'Команда', icon: 'i-lucide-users', to: '/team' },
    ],
  },
  {
    label: 'Инструменты',
    icon: 'i-lucide-wrench',
    badge: 2,
    children: [
      { label: 'Задачи', icon: 'i-lucide-list-checks', badge: 12, to: '/tasks' },
      { label: 'Аналитика', icon: 'i-lucide-chart-no-axes-column-increasing', to: '/analytics' },
    ],
  },
  { label: 'Поддержка', icon: 'i-lucide-life-buoy', badge: 3, to: '/support' },
]
</script>

<template>
  <CSNavigationMenu :items="items" orientation="horizontal" />
  <CSNavigationMenu :items="items" orientation="vertical" type="multiple" highlight />
</template>

Пример использует компонент библиотеки. Подключите Nuxt-модуль `@cassoft-support/cs-platform-ui-kit/nuxt` или импортируйте компонент из публичного package entry.