Вертикальная навигация

VerticalNavigation объединяет простую навигацию, ссылки с иконками и счётчиками и сгруппированные разделы в одном доступном компоненте на токенах темы.

Пример

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

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

Импортируйте компонент из публичной точки входа пакета.

import { VerticalNavigation } from "denjs-ui";
import { ChartPie, House } from "lucide-react";

const sections = [
  {
    items: [
      {
        label: "Dashboard",
        href: "/dashboard",
        icon: <House aria-hidden="true" />,
        current: true,
      },
      {
        label: "Charts",
        icon: <ChartPie aria-hidden="true" />,
        defaultExpanded: true,
        children: [
          { label: "Area chart", href: "/charts/area" },
          { label: "Bar chart", href: "/charts/bar" },
        ],
      },
    ],
  },
];

export function Example() {
  return (
    <VerticalNavigation
      aria-label="Sidebar"
      sections={sections}
    />
  );
}