Обзор

AI-компоненты

Хуки

Ресурсы

llms.txt

import {
  IconPlayerPause,
  IconPlayerPlay,
  IconPlayerSkipBack,
  IconPlayerSkipForward,
  IconTrash,
} from "@tabler/icons-react";
import { Button } from "@/components/ui/button";
import {
  Menu,
  MenuCheckboxItem,
  MenuGroup,
  MenuGroupLabel,
  MenuItem,
  MenuPopup,
  MenuRadioGroup,
  MenuRadioItem,
  MenuSeparator,
  MenuShortcut,
  MenuSub,
  MenuSubPopup,
  MenuSubTrigger,
  MenuTrigger,
} from "@/components/ui/menu";

export default function Particle() {
  return (
    <Menu>
      <MenuTrigger render={<Button variant="outline" />}>
        Открыть меню
      </MenuTrigger>
      <MenuPopup>
        <MenuGroup>
          <MenuGroupLabel>Воспроизведение</MenuGroupLabel>
          <MenuItem>
            <IconPlayerPlay aria-hidden="true" stroke={1.5} />
            Воспроизвести
            <MenuShortcut>⌘P</MenuShortcut>
          </MenuItem>
          <MenuItem disabled>
            <IconPlayerPause aria-hidden="true" stroke={1.5} />
            Пауза
            <MenuShortcut>⇧⌘P</MenuShortcut>
          </MenuItem>
          <MenuItem>
            <IconPlayerSkipBack aria-hidden="true" stroke={1.5} />
            Предыдущий
            <MenuShortcut>⌘[</MenuShortcut>
          </MenuItem>
          <MenuItem>
            <IconPlayerSkipForward aria-hidden="true" stroke={1.5} />
            Следующий
            <MenuShortcut>⌘]</MenuShortcut>
          </MenuItem>
        </MenuGroup>
        <MenuSeparator />
        <MenuCheckboxItem>Перемешать</MenuCheckboxItem>
        <MenuCheckboxItem>Повтор</MenuCheckboxItem>
        <MenuCheckboxItem disabled>Улучшенный звук</MenuCheckboxItem>
        <MenuSeparator />
        <MenuGroup>
          <MenuGroupLabel>Сортировать по</MenuGroupLabel>
          <MenuRadioGroup>
            <MenuRadioItem value="artist">Исполнителю</MenuRadioItem>
            <MenuRadioItem value="album">Альбому</MenuRadioItem>
            <MenuRadioItem value="title">Названию</MenuRadioItem>
          </MenuRadioGroup>
        </MenuGroup>
        <MenuSeparator />
        <MenuCheckboxItem variant="switch">Автосохранение</MenuCheckboxItem>
        <MenuSeparator />
        <MenuSub>
          <MenuSubTrigger>Добавить в плейлист</MenuSubTrigger>
          <MenuSubPopup>
            <MenuItem>Джаз</MenuItem>
            <MenuSub>
              <MenuSubTrigger>Рок</MenuSubTrigger>
              <MenuSubPopup>
                <MenuItem>Хард-рок</MenuItem>
                <MenuItem>Софт-рок</MenuItem>
                <MenuItem>Классический рок</MenuItem>
                <MenuSeparator />
                <MenuItem>Метал</MenuItem>
                <MenuItem>Панк</MenuItem>
                <MenuItem>Гранж</MenuItem>
                <MenuItem>Альтернатива</MenuItem>
                <MenuItem>Инди</MenuItem>
                <MenuItem>Электроника</MenuItem>
              </MenuSubPopup>
            </MenuSub>
            <MenuItem>Поп</MenuItem>
          </MenuSubPopup>
        </MenuSub>
        <MenuSeparator />
        <MenuItem variant="destructive">
          <IconTrash aria-hidden="true" stroke={1.5} />
          Удалить
          <MenuShortcut>⌘⌫</MenuShortcut>
        </MenuItem>
      </MenuPopup>
    </Menu>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/menu

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

import {
  Menu,
  MenuCheckboxItem,
  MenuGroup,
  MenuGroupLabel,
  MenuItem,
  MenuPopup,
  MenuRadioGroup,
  MenuRadioItem,
  MenuSeparator,
  MenuSub,
  MenuSubPopup,
  MenuSubTrigger,
  MenuTrigger,
} from "@/components/ui/menu"

<Menu>
  <MenuTrigger>Open</MenuTrigger>
  <MenuPopup align="start" sideOffset={4}>
    <MenuItem>Profile</MenuItem>
    <MenuSeparator />
 
    <MenuGroup>
      <MenuGroupLabel>Playback</MenuGroupLabel>
      <MenuItem>Play</MenuItem>
      <MenuItem>Pause</MenuItem>
    </MenuGroup>
 
    <MenuSeparator />
 
    <MenuCheckboxItem>Shuffle</MenuCheckboxItem>
    <MenuCheckboxItem>Repeat</MenuCheckboxItem>
    <MenuCheckboxItem variant="switch">Auto save</MenuCheckboxItem>
 
    <MenuSeparator />
 
    <MenuGroup>
      <MenuGroupLabel>Sort by</MenuGroupLabel>
      <MenuRadioGroup>
        <MenuRadioItem>Artist</MenuRadioItem>
        <MenuRadioItem>Album</MenuRadioItem>
        <MenuRadioItem>Title</MenuRadioItem>
      </MenuRadioGroup>
    </MenuGroup>
 
    <MenuSeparator />
 
    <MenuSub>
      <MenuSubTrigger>Add to playlist</MenuSubTrigger>
      <MenuSubPopup>
        <MenuItem>Jazz</MenuItem>
        <MenuItem>Rock</MenuItem>
      </MenuSubPopup>
    </MenuSub>
  </MenuPopup>
</Menu>

Справочник API

Корневой компонент. Псевдоним для Menu.Root из Base UI. Также экспортируется как DropdownMenu.

MenuTrigger

Кнопка-триггер, открывающая меню. Псевдоним для Menu.Trigger из Base UI. Также экспортируется как DropdownMenuTrigger.

MenuPopup

Контейнер всплывающего меню, отображающий его содержимое. Также экспортируется как DropdownMenuContent.

Свойство	Тип	По умолчанию	Описание
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"bottom"`	Сторона триггера для позиционирования меню
`align`	`"start" \| "center" \| "end"`	`"center"`	Выравнивание относительно триггера
`sideOffset`	`number`	`4`	Расстояние от триггера в пикселях
`alignOffset`	`number`	-	Смещение вдоль оси выравнивания
`portalProps`	`Menu.Portal.Props`	-	Свойства, передаваемые внутреннему порталу (`keepMounted`, `container` и т. д.); см. API портала Menu в Base UI

MenuGroup

Группирует связанные элементы меню. Псевдоним для Menu.Group из Base UI. Также экспортируется как DropdownMenuGroup.

MenuItem

Отдельный элемент меню. Также экспортируется как DropdownMenuItem.

Свойство	Тип	По умолчанию	Описание
`inset`	`boolean`	-	Добавляет левый отступ для выравнивания с элементами, имеющими иконки
`variant`	`"default" \| "destructive"`	`"default"`	Управляет стилизацией элемента

Использование inset: При смешивании элементов с иконками и без них применяйте inset к элементам без иконок, чтобы сохранить выравнивание:

<MenuItem><PencilIcon /> Edit</MenuItem>
<MenuItem><TrashIcon /> Delete</MenuItem>
<MenuItem inset>Profile</MenuItem>  {/* Aligns with icon items above */}

MenuCheckboxItem

Элемент меню с флажком. Также экспортируется как DropdownMenuCheckboxItem.

Свойство	Тип	По умолчанию	Описание
`variant`	`"default" \| "switch"`	`"default"`	Стиль отображения — `switch` показывает индикатор-переключатель

MenuRadioGroup

Группирует элементы меню с радиокнопками. Псевдоним для Menu.RadioGroup из Base UI. Также экспортируется как DropdownMenuRadioGroup.

MenuRadioItem

Элемент меню с радиокнопкой. Стилизованная обёртка для Menu.RadioItem из Base UI. Также экспортируется как DropdownMenuRadioItem.

MenuGroupLabel

Подпись для группы меню. Также экспортируется как DropdownMenuLabel.

Свойство	Тип	По умолчанию	Описание
`inset`	`boolean`	-	Добавляет левый отступ для выравнивания с элементами, имеющими иконки

MenuSeparator

Визуальный разделитель между элементами меню. Стилизованная обёртка для Menu.Separator из Base UI. Также экспортируется как DropdownMenuSeparator.

MenuShortcut

Отображает текст сочетания клавиш. Пользовательский компонент (не обёртка Base UI). Также экспортируется как DropdownMenuShortcut.

MenuSub

Контейнер вложенного меню. Псевдоним для Menu.SubmenuRoot из Base UI. Также экспортируется как DropdownMenuSub.

MenuSubTrigger

Триггер для открытия вложенного меню. Также экспортируется как DropdownMenuSubTrigger.

Свойство	Тип	По умолчанию	Описание
`inset`	`boolean`	-	Добавляет левый отступ для выравнивания с элементами, имеющими иконки

MenuSubPopup

Всплывающее окно для содержимого вложенного меню. Также экспортируется как DropdownMenuSubContent.

Свойство	Тип	По умолчанию	Описание
`align`	`"start" \| "center" \| "end"`	`"start"`	Выравнивание относительно триггера
`sideOffset`	`number`	`0`	Расстояние от триггера в пикселях
`alignOffset`	`number`	`-5`	Смещение вдоль оси выравнивания. По умолчанию `-5`, когда `align` не равно `"center"`

Примеры

Открытие при наведении

import { Button } from "@/components/ui/button";
import {
  Menu,
  MenuItem,
  MenuPopup,
  MenuTrigger,
} from "@/components/ui/menu";

export default function Particle() {
  return (
    <Menu>
      <MenuTrigger openOnHover render={<Button variant="outline" />}>
        Наведите курсор
      </MenuTrigger>
      <MenuPopup>
        <MenuItem>Первый пункт</MenuItem>
        <MenuItem>Второй пункт</MenuItem>
      </MenuPopup>
    </Menu>
  );
}

С Checkbox

import { Button } from "@/components/ui/button";
import {
  Menu,
  MenuCheckboxItem,
  MenuPopup,
  MenuTrigger,
} from "@/components/ui/menu";

export default function Particle() {
  return (
    <Menu>
      <MenuTrigger render={<Button variant="outline" />}>
        Открыть меню
      </MenuTrigger>
      <MenuPopup>
        <MenuCheckboxItem defaultChecked>Автосохранение</MenuCheckboxItem>
        <MenuCheckboxItem>Уведомления</MenuCheckboxItem>
      </MenuPopup>
    </Menu>
  );
}

MenuCheckboxItem поддерживает свойство variant="switch", которое отображает декоративный индикатор-переключатель вместо галочки. Это исключительно визуальный вариант — компонент остаётся элементом с флажком и сохраняет ту же функциональность.

import { Button } from "@/components/ui/button";
import {
  Menu,
  MenuCheckboxItem,
  MenuPopup,
  MenuTrigger,
} from "@/components/ui/menu";

export default function Particle() {
  return (
    <Menu>
      <MenuTrigger render={<Button variant="outline" />}>
        Открыть меню
      </MenuTrigger>
      <MenuPopup>
        <MenuCheckboxItem defaultChecked variant="switch">
          Автосохранение
        </MenuCheckboxItem>
        <MenuCheckboxItem variant="switch">Уведомления</MenuCheckboxItem>
        <MenuCheckboxItem defaultChecked variant="switch">
          Тёмная тема
        </MenuCheckboxItem>
      </MenuPopup>
    </Menu>
  );
}

С Radio Group

import { Button } from "@/components/ui/button";
import {
  Menu,
  MenuPopup,
  MenuRadioGroup,
  MenuRadioItem,
  MenuTrigger,
} from "@/components/ui/menu";

export default function Particle() {
  return (
    <Menu>
      <MenuTrigger render={<Button variant="outline" />}>
        Открыть меню
      </MenuTrigger>
      <MenuPopup>
        <MenuRadioGroup defaultValue="system">
          <MenuRadioItem value="light">Светлая</MenuRadioItem>
          <MenuRadioItem value="dark">Тёмная</MenuRadioItem>
          <MenuRadioItem value="system">Как в системе</MenuRadioItem>
        </MenuRadioGroup>
      </MenuPopup>
    </Menu>
  );
}

Со ссылкой

import Link from "next/link";
import { Button } from "@/components/ui/button";
import {
  Menu,
  MenuItem,
  MenuPopup,
  MenuTrigger,
} from "@/components/ui/menu";

export default function Particle() {
  return (
    <Menu>
      <MenuTrigger render={<Button variant="outline" />}>
        Открыть меню
      </MenuTrigger>
      <MenuPopup>
        <MenuItem render={<Link href="/docs" />}>Документация</MenuItem>
        <MenuItem render={<Link href="/particles" />}>Частицы</MenuItem>
      </MenuPopup>
    </Menu>
  );
}

С подписью группы

import { Button } from "@/components/ui/button";
import {
  Menu,
  MenuGroup,
  MenuGroupLabel,
  MenuItem,
  MenuPopup,
  MenuSeparator,
  MenuTrigger,
} from "@/components/ui/menu";

export default function Particle() {
  return (
    <Menu>
      <MenuTrigger render={<Button variant="outline" />}>
        Открыть меню
      </MenuTrigger>
      <MenuPopup>
        <MenuGroup>
          <MenuGroupLabel>Аккаунт</MenuGroupLabel>
          <MenuItem>Профиль</MenuItem>
          <MenuItem>Оплата</MenuItem>
        </MenuGroup>
        <MenuSeparator />
        <MenuGroup>
          <MenuGroupLabel>Поддержка</MenuGroupLabel>
          <MenuItem>Документация</MenuItem>
          <MenuItem>Связаться с нами</MenuItem>
        </MenuGroup>
      </MenuPopup>
    </Menu>
  );
}

Вложенное меню

import { Button } from "@/components/ui/button";
import {
  Menu,
  MenuItem,
  MenuPopup,
  MenuSub,
  MenuSubPopup,
  MenuSubTrigger,
  MenuTrigger,
} from "@/components/ui/menu";

export default function Particle() {
  return (
    <Menu>
      <MenuTrigger render={<Button variant="outline" />}>
        Открыть меню
      </MenuTrigger>
      <MenuPopup>
        <MenuItem>Первый пункт</MenuItem>
        <MenuSub>
          <MenuSubTrigger>Ещё</MenuSubTrigger>
          <MenuSubPopup>
            <MenuItem>Подпункт А</MenuItem>
            <MenuItem>Подпункт Б</MenuItem>
          </MenuSubPopup>
        </MenuSub>
        <MenuItem>Второй пункт</MenuItem>
      </MenuPopup>
    </Menu>
  );
}

Закрытие по клику

import { Button } from "@/components/ui/button";
import {
  Menu,
  MenuItem,
  MenuPopup,
  MenuTrigger,
} from "@/components/ui/menu";

export default function Particle() {
  return (
    <Menu>
      <MenuTrigger render={<Button variant="outline" />}>
        Открыть меню
      </MenuTrigger>
      <MenuPopup>
        <MenuItem closeOnClick>Профиль</MenuItem>
        <MenuItem closeOnClick>Настройки</MenuItem>
        <MenuItem closeOnClick>Выйти</MenuItem>
      </MenuPopup>
    </Menu>
  );
}

Открытие диалога

"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogClose,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogPopup,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  Menu,
  MenuItem,
  MenuPopup,
  MenuTrigger,
} from "@/components/ui/menu";

export default function Particle() {
  const [dialogOpen, setDialogOpen] = useState(false);
  return (
    <>
      <Menu>
        <MenuTrigger render={<Button variant="outline" />}>
          Открыть меню
        </MenuTrigger>
        <MenuPopup align="start">
          <MenuItem onClick={() => setDialogOpen(true)}>
            Открыть диалог
          </MenuItem>
        </MenuPopup>
      </Menu>
      <Dialog onOpenChange={setDialogOpen} open={dialogOpen}>
        <DialogPopup>
          <DialogHeader>
            <DialogTitle>Настройки</DialogTitle>
            <DialogDescription>Измените свои предпочтения</DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <DialogClose render={<Button variant="ghost" />}>
              Закрыть
            </DialogClose>
          </DialogFooter>
        </DialogPopup>
      </Dialog>
    </>
  );
}