/ UI
Компоненты

Компонент

Меню

Menu поддерживает выбираемые пункты и разделители, пункты-ссылки и пункты-кнопки, отключённые и деструктивные пункты, позиционирование поповера с учётом границ экрана с переворотом над триггером при нехватке места, полную навигацию с клавиатуры и закрытие по клику вне меню с возвратом фокуса на триггер.

Пример

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

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

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

import { Button, Menu } from "denjs-ui";
import { LogOut, Settings, User } from "lucide-react";

const items = [
  { id: "profile", label: "Profile", icon: <User aria-hidden="true" /> },
  { id: "settings", label: "Settings", icon: <Settings aria-hidden="true" /> },
  { type: "separator" as const, id: "separator" },
  {
    id: "sign-out",
    label: "Sign out",
    icon: <LogOut aria-hidden="true" />,
    tone: "danger" as const,
  },
];

export function Example() {
  return (
    <Menu items={items}>
      <Button variant="outline">Account</Button>
    </Menu>
  );
}