VibeUI

Menu

Nested Submenu

Меню с пунктом-подменю «Переместить в»: второй уровень раскрывается наведением и стрелкой вправо, а стрелка влево возвращает фокус на родителя.

  • menu
  • dropdown
  • submenu
  • keyboard

Превью

1440pxHost theme

Использовать с AI

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из registry.

размести это в шапке: https://vibeui.ru/c/dropdown-006

Отчёт за март.pdf
Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

# Установка и размещение «dropdown-006» (Nested Submenu) из VibeUI

## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/dropdown-006.json

Registry item: https://vibeui.ru/r/dropdown-006.json
Ставится в: components/vibeui/dropdown-006.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.

Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.

## 2. Что это
Меню с пунктом-подменю «Переместить в»: второй уровень раскрывается наведением и стрелкой вправо, а стрелка влево возвращает фокус на родителя.

Меню с вложенным подменю: наведение и стрелка вправо открывают второй уровень, стрелка влево возвращает назад. Один файл, ноль зависимостей.

## 3. Как использовать
import { Dropdown006 } from "@/components/vibeui/dropdown-006"

<Dropdown006
  trigger="Письмо"
  side="right"
  submenuLabel="Переместить в"
  folders={["Входящие", "Архив"]}
/>

Полный список пропсов — в установленном файле.

## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.

Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)

## 5. Сохранить как установлено
- локальную палитру --vibeui-dropdown-006-*: компонент обязан выглядеть одинаково в любом проекте
- подменю обычным слоем внутри popover: второй popover=auto закрыл бы первый, и меню замигает
- пару aria-haspopup и aria-expanded на родительском пункте — скринридер иначе не скажет, что там есть второй уровень
- возврат фокуса на родителя по стрелке влево: без него из подменю нет выхода с клавиатуры
- открытие подменю и по наведению, и по нажатию — мышь и клавиатура ведут себя по-разному
- собственную светлую подложку: на тёмной карточке каталога тёмный текст пропадает

## 6. Можно менять
- подпись кнопки через trigger
- сторону раскрытия подменю через side
- заголовок второго уровня через submenuLabel и его пункты через folders
- цвет фокуса через accent

## 7. Правила
- Третий уровень вложенности не предусмотрен: на нём меню перестают попадать мышью, лучше диалог.
- Подменю закрывается при уходе курсора; если нужен зазор прощения, добавьте задержку в onMouseLeave.
- Подменю не переворачивается у края экрана само — на узком окне поставьте side="left".
- Не выносите CSS-переменные в globals.css: компонент обязан остаться одним файлом.

## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/dropdown-006.json
https://vibeui.ru/r/dropdown-006.json

Один файл, ноль зависимостей, палитра --vibeui-dropdown-006-*. Клиентский: раскрытие подменю держит useState. Первый уровень — HTML popover с якорным позиционированием, второй — обычный абсолютно спозиционированный слой внутри него: вложенный popover=auto закрыл бы родителя, потому что открытие второго auto-попапа гасит первый. Родительский пункт помечен aria-haspopup=menu и aria-expanded, подменю — role=menu с aria-label. Стрелка вправо открывает подменю и ставит фокус на первый пункт, влево — закрывает и возвращает фокус; без этого из подменю не выйти с клавиатуры. Пропс side меняет сторону раскрытия.

Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

"use client"

import { useId, useRef, useState } from "react"
import type {
  ComponentPropsWithoutRef,
  CSSProperties,
  KeyboardEvent,
} from "react"

export type Dropdown006Props = Omit<
  ComponentPropsWithoutRef<"div">,
  "children"
> & {
  trigger?: string
  side?: "right" | "left"
  submenuLabel?: string
  folders?: string[]
  accent?: string
}

// Идея компонента: пункт с вложенным подменю. Подменю — не второй popover, а
// обычный абсолютно спозиционированный слой внутри первого: вложенные popover
// закрывают друг друга, и «переместить в папку» превращается в мигание.
// Подменю открывается наведением и стрелкой вправо, закрывается стрелкой
// влево с возвратом фокуса на родителя — без этого с клавиатуры из него не выйти.
const STYLES = `
:where([data-vibeui-block="dropdown-006"]){
--vibeui-dropdown-006-bg:oklch(1 0 0);
--vibeui-dropdown-006-fg:oklch(0.24 0.014 260);
--vibeui-dropdown-006-muted:oklch(0.56 0.014 260);
--vibeui-dropdown-006-border:oklch(0.9 0.006 260);
--vibeui-dropdown-006-hover:oklch(0.96 0.004 260);
--vibeui-dropdown-006-accent:oklch(0.55 0.19 300);
--vibeui-dropdown-006-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="dropdown-006"]{
display:inline-flex;flex-direction:column;gap:0.4375rem;
box-sizing:border-box;padding:0.625rem 0.75rem;
background:var(--vibeui-dropdown-006-bg);color:var(--vibeui-dropdown-006-fg);
border:1px solid var(--vibeui-dropdown-006-border);border-radius:0.875rem;
font-family:var(--vibeui-dropdown-006-font);
}
[data-vibeui-block="dropdown-006"] [data-part="caption"]{
font-size:0.75rem;color:var(--vibeui-dropdown-006-muted);
}
[data-vibeui-block="dropdown-006"] [data-part="trigger"]{
appearance:none;cursor:pointer;
display:inline-flex;align-items:center;gap:0.4375rem;
height:2.125rem;padding:0 0.875rem;
border:1px solid var(--vibeui-dropdown-006-border);border-radius:0.625rem;
background:var(--vibeui-dropdown-006-bg);color:inherit;
font:inherit;font-size:0.8125rem;font-weight:600;
anchor-name:--vibeui-dropdown-006-anchor;
transition:background-color .16s ease;
}
[data-vibeui-block="dropdown-006"] [data-part="trigger"]:hover{background:var(--vibeui-dropdown-006-hover)}
[data-vibeui-block="dropdown-006"] [data-part="trigger"]:focus-visible{outline:2px solid var(--vibeui-dropdown-006-accent);outline-offset:2px}
[data-vibeui-block="dropdown-006"] [data-part="menu"]{
position:fixed;padding:0.3125rem;min-width:13rem;box-sizing:border-box;
background:var(--vibeui-dropdown-006-bg);color:var(--vibeui-dropdown-006-fg);
border:1px solid var(--vibeui-dropdown-006-border);border-radius:0.75rem;
box-shadow:0 18px 40px -22px oklch(0.2 0.03 260 / 45%);
font-family:var(--vibeui-dropdown-006-font);
opacity:0;transform:translateY(-0.25rem);
transition:opacity .14s ease,transform .14s ease,display .14s allow-discrete,overlay .14s allow-discrete;
}
[data-vibeui-block="dropdown-006"] [data-part="menu"]:popover-open{opacity:1;transform:none}
@starting-style{[data-vibeui-block="dropdown-006"] [data-part="menu"]:popover-open{opacity:0;transform:translateY(-0.25rem)}}
@supports (anchor-name: --a){
[data-vibeui-block="dropdown-006"] [data-part="menu"]{
position-anchor:--vibeui-dropdown-006-anchor;
position-area:bottom span-right;margin:0.375rem 0 0;
position-try-fallbacks:flip-block,flip-inline;
}
}
[data-vibeui-block="dropdown-006"] [data-part="item"]{
display:flex;align-items:center;gap:0.75rem;
width:100%;box-sizing:border-box;
appearance:none;border:0;background:none;cursor:pointer;
padding:0.4375rem 0.5rem;border-radius:0.5rem;
font:inherit;font-size:0.8125rem;color:inherit;text-align:left;
transition:background-color .14s ease;
}
[data-vibeui-block="dropdown-006"] [data-part="item"]:hover,
[data-vibeui-block="dropdown-006"] [data-part="item"][aria-expanded="true"]{background:var(--vibeui-dropdown-006-hover)}
[data-vibeui-block="dropdown-006"] [data-part="item"]:focus-visible{outline:2px solid var(--vibeui-dropdown-006-accent);outline-offset:-2px}
[data-vibeui-block="dropdown-006"] [data-part="arrow"]{
margin-left:auto;width:0.3125rem;height:0.3125rem;flex:none;
border-top:1.5px solid var(--vibeui-dropdown-006-muted);
border-right:1.5px solid var(--vibeui-dropdown-006-muted);
transform:rotate(45deg);
}
[data-vibeui-block="dropdown-006"] [data-part="nest"]{position:relative}
/* Подменю живёт внутри popover обычным слоем: второй popover закрыл бы первый. */
[data-vibeui-block="dropdown-006"] [data-part="sub"]{
position:absolute;top:-0.3125rem;left:calc(100% + 0.25rem);z-index:1;
padding:0.3125rem;min-width:10.5rem;box-sizing:border-box;
background:var(--vibeui-dropdown-006-bg);
border:1px solid var(--vibeui-dropdown-006-border);border-radius:0.75rem;
box-shadow:0 18px 40px -22px oklch(0.2 0.03 260 / 45%);
}
[data-vibeui-block="dropdown-006"][data-side="left"] [data-part="sub"]{left:auto;right:calc(100% + 0.25rem)}
[data-vibeui-block="dropdown-006"] [data-part="rule"]{
height:1px;margin:0.3125rem 0.25rem;background:var(--vibeui-dropdown-006-border);
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="dropdown-006"] *{animation:none!important;transition:none!important}}
`

const DEFAULT_FOLDERS = ["Входящие", "Проекты 2026", "Архив", "Черновики"]

function stepFocus(scope: HTMLElement | null, delta: number) {
  if (!scope) {
    return
  }

  const items = Array.from(
    scope.querySelectorAll<HTMLElement>('[data-part="item"]'),
  ).filter((item) => item.offsetParent !== null)

  if (items.length === 0) {
    return
  }

  const from = items.indexOf(document.activeElement as HTMLElement)
  items[(from + delta + items.length) % items.length].focus()
}

/**
 * Меню с вложенным подменю: наведение, стрелка вправо внутрь, влево — назад.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Dropdown006({
  trigger = "Письмо",
  side = "right",
  submenuLabel = "Переместить в",
  folders = DEFAULT_FOLDERS,
  accent,
  className,
  style,
  ...props
}: Dropdown006Props) {
  const id = useId()
  const menu = useRef<HTMLDivElement>(null)
  const parent = useRef<HTMLButtonElement>(null)
  const sub = useRef<HTMLDivElement>(null)
  const [open, setOpen] = useState(false)

  const enterSub = () => {
    setOpen(true)
    requestAnimationFrame(() =>
      sub.current?.querySelector<HTMLElement>('[data-part="item"]')?.focus(),
    )
  }

  const leaveSub = () => {
    setOpen(false)
    parent.current?.focus()
  }

  const palette = {
    ...(accent ? { "--vibeui-dropdown-006-accent": accent } : null),
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-dropdown-006" precedence="medium">
        {STYLES}
      </style>
      <div
        {...props}
        data-vibeui-block="dropdown-006"
        data-side={side}
        className={className}
        style={palette}
      >
        <span data-part="caption">Отчёт за март.pdf</span>
        <button
          type="button"
          data-part="trigger"
          popoverTarget={`${id}-menu`}
          aria-haspopup="menu"
          onKeyDown={(event) => {
            if (event.key === "ArrowDown") {
              event.preventDefault()
              const node = menu.current

              if (node) {
                if (!node.matches(":popover-open")) {
                  node.showPopover()
                }

                requestAnimationFrame(() =>
                  node
                    .querySelector<HTMLElement>('[data-part="item"]')
                    ?.focus(),
                )
              }
            }
          }}
        >
          {trigger}
        </button>
        <div
          id={`${id}-menu`}
          ref={menu}
          popover="auto"
          role="menu"
          aria-label={trigger}
          data-part="menu"
          onToggle={() => setOpen(false)}
          onKeyDown={(event: KeyboardEvent<HTMLDivElement>) => {
            if (event.key === "ArrowDown") {
              event.preventDefault()
              stepFocus(menu.current, 1)
            } else if (event.key === "ArrowUp") {
              event.preventDefault()
              stepFocus(menu.current, -1)
            }
          }}
        >
          <button
            type="button"
            role="menuitem"
            data-part="item"
            onClick={() => menu.current?.hidePopover()}
          >
            Ответить
          </button>
          <button
            type="button"
            role="menuitem"
            data-part="item"
            onClick={() => menu.current?.hidePopover()}
          >
            Переслать
          </button>
          <div data-part="rule" role="separator" />
          <div
            data-part="nest"
            onMouseEnter={() => setOpen(true)}
            onMouseLeave={() => setOpen(false)}
          >
            <button
              type="button"
              ref={parent}
              role="menuitem"
              data-part="item"
              aria-haspopup="menu"
              aria-expanded={open}
              onClick={() => (open ? setOpen(false) : enterSub())}
              onKeyDown={(event) => {
                if (event.key === "ArrowRight") {
                  event.preventDefault()
                  enterSub()
                }
              }}
            >
              {submenuLabel}
              <span data-part="arrow" aria-hidden="true" />
            </button>
            {open ? (
              <div
                ref={sub}
                data-part="sub"
                role="menu"
                aria-label={submenuLabel}
                onKeyDown={(event) => {
                  if (event.key === "ArrowLeft") {
                    event.preventDefault()
                    leaveSub()
                  }
                }}
              >
                {folders.map((folder) => (
                  <button
                    key={folder}
                    type="button"
                    role="menuitem"
                    data-part="item"
                    onClick={() => {
                      setOpen(false)
                      menu.current?.hidePopover()
                    }}
                  >
                    {folder}
                  </button>
                ))}
              </div>
            ) : null}
          </div>
          <button
            type="button"
            role="menuitem"
            data-part="item"
            onClick={() => menu.current?.hidePopover()}
          >
            В архив
          </button>
        </div>
      </div>
    </>
  )
}