VibeUI

Navigation

Arrow Menubar

A menubar you walk with arrow keys: left and right move between sections, down opens the list and lands focus on the first item.

  • menubar
  • keyboard
  • menu
  • aria

Preview

1440pxHost theme

Use it with AI

  1. 1. Copy the link.
  2. 2. Write to your agent in your own words and drop the link into the sentence.
  3. 3. The agent opens the link and installs the component from the registry.

put this in the header: https://vibeui.ru/c/menubar-002?lang=en

← → между разделами
Show the full instructions

What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.

# Install and place "menubar-002" (Arrow Menubar) from VibeUI

## 1. Install first — do not skip, do not recreate
Run this exact command before writing any code:
npx shadcn@latest add https://vibeui.ru/r/menubar-002.json

Registry item: https://vibeui.ru/r/menubar-002.json
Installs to: components/vibeui/menubar-002.tsx (the exact path follows this project's components.json aliases).
npm dependencies: none.
Registry dependencies: none.

Install it from the registry. Do not recreate it from the description,
do not substitute a similar component from another library, and do not
rewrite it to match the project's existing style.

## 2. What it is
A menubar you walk with arrow keys: left and right move between sections, down opens the list and lands focus on the first item.

An application menubar with full keyboard support: left and right arrows move between sections in a loop, Home and End jump to the ends, arrow down opens the menu and focuses its first item, Escape closes it and returns focus to the section button. Inside an open list, up and down walk the items. Zero dependencies, one file, its own palette.

## 3. How to use it
import { Menubar002 } from "@/components/vibeui/menubar-002"

<Menubar002
  menus={[
    { label: "File", items: [{ label: "Open…", keys: "⌘O" }] },
    { label: "Edit", items: [{ label: "Undo", keys: "⌘Z" }] },
  ]}
/>

Read the installed file for the full prop list.

## 4. Where to place it
This is a small inline component. Put it exactly where the user asked,
inside the existing markup. Do not create a new page, section or
wrapper for it. If a similar control already sits in that spot,
replace it instead of adding a second one.

Placement: ___
(The user fills this line in. If it is still blank, ask where to put it
instead of guessing.)

## 5. Keep exactly as installed
- the local --vibeui-menubar-002-* palette — do not swap it for your theme tokens (bg-popover, text-muted-foreground and the like)
- the roving tabindex: 0 on the current section and -1 on the rest, otherwise Tab walks the whole menubar instead of passing through it
- returning focus to the section button when Escape closes the menu: without it focus falls back to the start of the document
- aria-expanded on the section button: it is how a screen reader knows whether the list is open
- moving focus together with the section change — a selection without focus splits the keyboard from the eye
- the pointerdown listener that closes the menu on an outside click, and its removal on close — otherwise it piles up with every opening

## 6. You may change
- the menus array: sections, items, shortcuts and the disabled flag
- the item handlers: a click currently only closes the menu
- the accent through the accent prop — it colours the focus ring
- the menubar height and the width of the drop-down lists

## 7. Rules
- The component is a client one: "use client" is there for the state and the key handling.
- The menu is positioned absolutely inside its own wrapper: in a container with overflow:hidden the list gets clipped.
- Type-ahead on item initials is not handled — it is a familiar shortcut in system menus, add it if you need it.
- Do not lift the CSS variables into globals.css: the component has to stay a single file.

## 8. Verify
- it renders with no console errors;
- it looks like the preview on the VibeUI page you copied this from;
- if it does not, you changed something listed in section 5 — put it back.

For developers

npx shadcn@latest add https://vibeui.ru/r/menubar-002.json
https://vibeui.ru/r/menubar-002.json

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-menubar-002-*. Клиентский: "use client" ради состояния открытого меню и клавиатуры. Разметка следует паттерну menubar из WAI-ARIA: role="menubar", кнопки role="menuitem" с aria-haspopup и aria-expanded, списки role="menu". В Tab-порядке живёт только один раздел (roving tabindex), переход между разделами идёт стрелками. Меню позиционируется абсолютно от своей обёртки, поэтому anchor positioning не требуется. Клик мимо закрывает список через слушатель pointerdown, снимаемый вместе с закрытием.

Component source

The same file your agent installs. Here in case you would rather copy it by hand.

"use client"

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

export type Menubar002Item = {
  label: string
  keys?: string
  disabled?: boolean
}

export type Menubar002Menu = {
  label: string
  items: Menubar002Item[]
}

export type Menubar002Props = {
  menus?: Menubar002Menu[]
  accent?: string
  className?: string
  style?: CSSProperties
}

// Идея компонента: строка меню, по которой ходят стрелками, как в системном
// приложении. Влево и вправо переводят раздел, вниз открывает список и ставит
// фокус на первый пункт, Escape возвращает фокус на кнопку раздела. В Tab-порядке
// живёт только один раздел (roving tabindex), поэтому меню не ловит табуляцию.
const STYLES = `
:where([data-vibeui-block="menubar-002"]){
--vibeui-menubar-002-bg:oklch(1 0 0);
--vibeui-menubar-002-fg:oklch(0.24 0.014 265);
--vibeui-menubar-002-muted:oklch(0.58 0.014 265);
--vibeui-menubar-002-border:oklch(0.9 0.006 265);
--vibeui-menubar-002-hover:oklch(0.55 0.02 265 / 10%);
--vibeui-menubar-002-accent:oklch(0.55 0.2 262);
--vibeui-menubar-002-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="menubar-002"]{
box-sizing:border-box;width:100%;max-width:34rem;padding:0.25rem;
display:flex;align-items:center;gap:0.125rem;
background:var(--vibeui-menubar-002-bg);color:var(--vibeui-menubar-002-fg);
border:1px solid var(--vibeui-menubar-002-border);border-radius:0.625rem;
font-family:var(--vibeui-menubar-002-font);
}
[data-vibeui-block="menubar-002"] [data-part="slot"]{position:relative}
[data-vibeui-block="menubar-002"] [data-part="trigger"]{
appearance:none;border:0;background:none;cursor:pointer;
height:1.875rem;padding:0 0.625rem;border-radius:0.4375rem;
font:inherit;font-size:0.8125rem;color:inherit;
transition:background-color .14s ease;
}
[data-vibeui-block="menubar-002"] [data-part="trigger"]:hover{background:var(--vibeui-menubar-002-hover)}
[data-vibeui-block="menubar-002"] [data-part="trigger"][aria-expanded="true"]{background:var(--vibeui-menubar-002-hover)}
[data-vibeui-block="menubar-002"] [data-part="trigger"]:focus-visible{outline:2px solid var(--vibeui-menubar-002-accent);outline-offset:-2px}
[data-vibeui-block="menubar-002"] [data-part="menu"]{
position:absolute;top:calc(100% + 0.375rem);left:0;z-index:30;
min-width:12rem;padding:0.25rem;box-sizing:border-box;
background:var(--vibeui-menubar-002-bg);color:var(--vibeui-menubar-002-fg);
border:1px solid var(--vibeui-menubar-002-border);border-radius:0.625rem;
box-shadow:0 16px 36px -18px oklch(0.2 0.03 265 / 45%);
}
[data-vibeui-block="menubar-002"] [data-part="item"]{
display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
width:100%;min-height:1.875rem;padding:0 0.5rem;box-sizing:border-box;
appearance:none;border:0;background:none;cursor:pointer;border-radius:0.4375rem;
font:inherit;font-size:0.8125rem;color:inherit;text-align:left;
}
[data-vibeui-block="menubar-002"] [data-part="item"]:hover:not(:disabled){background:var(--vibeui-menubar-002-hover)}
[data-vibeui-block="menubar-002"] [data-part="item"]:focus-visible{outline:2px solid var(--vibeui-menubar-002-accent);outline-offset:-2px}
[data-vibeui-block="menubar-002"] [data-part="item"]:disabled{color:var(--vibeui-menubar-002-muted);cursor:default}
[data-vibeui-block="menubar-002"] [data-part="keys"]{font-size:0.75rem;color:var(--vibeui-menubar-002-muted)}
[data-vibeui-block="menubar-002"] [data-part="hint"]{
margin-left:auto;padding-right:0.375rem;font-size:0.6875rem;color:var(--vibeui-menubar-002-muted);
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="menubar-002"] *{animation:none!important;transition:none!important}}
`

const DEFAULT_MENUS: Menubar002Menu[] = [
  {
    label: "Файл",
    items: [
      { label: "Новый проект", keys: "⌘N" },
      { label: "Открыть…", keys: "⌘O" },
      { label: "Сохранить", keys: "⌘S" },
      { label: "Вернуть версию", disabled: true },
    ],
  },
  {
    label: "Правка",
    items: [
      { label: "Отменить", keys: "⌘Z" },
      { label: "Повторить", keys: "⇧⌘Z" },
      { label: "Найти в проекте", keys: "⌘F" },
    ],
  },
  {
    label: "Вид",
    items: [
      { label: "Показать сетку" },
      { label: "Показать линейки" },
      { label: "Во весь экран", keys: "F11" },
    ],
  },
]

/**
 * Строка меню приложения с переходом между разделами стрелками.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Menubar002({
  menus = DEFAULT_MENUS,
  accent,
  className,
  style,
}: Menubar002Props) {
  const [open, setOpen] = useState<number | null>(null)
  const [focused, setFocused] = useState(0)
  const rootRef = useRef<HTMLDivElement>(null)
  const wanted = useRef<"first" | "last" | null>(null)

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

  // Клик мимо закрывает меню: без этого открытый список остаётся висеть,
  // когда человек ушёл работать в другую часть страницы.
  useEffect(() => {
    if (open === null) {
      return
    }

    function onOutside(event: PointerEvent) {
      if (!rootRef.current?.contains(event.target as Node)) {
        setOpen(null)
      }
    }

    document.addEventListener("pointerdown", onOutside)
    return () => document.removeEventListener("pointerdown", onOutside)
  }, [open])

  // Фокус на пункт ставится после отрисовки списка: до неё узла ещё нет.
  useEffect(() => {
    const mode = wanted.current
    wanted.current = null

    if (open === null || !mode) {
      return
    }

    const items = itemNodes()
    ;(mode === "first" ? items[0] : items[items.length - 1])?.focus()
  }, [open])

  function itemNodes() {
    return Array.from(
      rootRef.current?.querySelectorAll<HTMLButtonElement>(
        '[data-part="item"]:not(:disabled)',
      ) ?? [],
    )
  }

  function focusTrigger(index: number) {
    rootRef.current
      ?.querySelectorAll<HTMLButtonElement>('[data-part="trigger"]')
      [index]?.focus()
  }

  function goTo(index: number, keepOpen: boolean) {
    setFocused(index)
    focusTrigger(index)

    if (keepOpen) {
      wanted.current = null
      setOpen(index)
    }
  }

  function onBarKeyDown(event: KeyboardEvent<HTMLDivElement>) {
    const last = menus.length - 1

    if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
      event.preventDefault()
      const step = event.key === "ArrowRight" ? 1 : -1
      goTo((focused + step + menus.length) % menus.length, open !== null)
      return
    }

    if (event.key === "Home" || event.key === "End") {
      event.preventDefault()
      goTo(event.key === "Home" ? 0 : last, open !== null)
      return
    }

    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
      event.preventDefault()
      wanted.current = event.key === "ArrowDown" ? "first" : "last"
      setOpen(focused)
    }
  }

  function onMenuKeyDown(event: KeyboardEvent<HTMLDivElement>) {
    if (event.key === "Escape") {
      event.preventDefault()
      setOpen(null)
      focusTrigger(focused)
      return
    }

    if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
      event.preventDefault()
      const step = event.key === "ArrowRight" ? 1 : -1
      const next = (focused + step + menus.length) % menus.length
      setFocused(next)
      wanted.current = "first"
      setOpen(next)
      return
    }

    const keys = ["ArrowDown", "ArrowUp", "Home", "End"]

    if (!keys.includes(event.key)) {
      return
    }

    event.preventDefault()

    const items = itemNodes()
    const index = items.indexOf(document.activeElement as HTMLButtonElement)
    const last = items.length - 1
    const next =
      event.key === "Home"
        ? 0
        : event.key === "End"
          ? last
          : event.key === "ArrowDown"
            ? (index + 1) % items.length
            : (index - 1 + items.length) % items.length

    items[next]?.focus()
  }

  return (
    <>
      <style href="vibeui-menubar-002" precedence="medium">
        {STYLES}
      </style>
      <div
        ref={rootRef}
        data-vibeui-block="menubar-002"
        role="menubar"
        aria-label="Меню приложения"
        className={className}
        style={palette}
        onKeyDown={onBarKeyDown}
      >
        {menus.map((menu, index) => (
          <span key={menu.label} data-part="slot">
            <button
              type="button"
              data-part="trigger"
              role="menuitem"
              aria-haspopup="menu"
              aria-expanded={open === index}
              tabIndex={index === focused ? 0 : -1}
              onClick={() => {
                setFocused(index)
                setOpen(open === index ? null : index)
              }}
            >
              {menu.label}
            </button>
            {open === index ? (
              <div
                data-part="menu"
                role="menu"
                aria-label={menu.label}
                onKeyDown={onMenuKeyDown}
              >
                {menu.items.map((item) => (
                  <button
                    key={item.label}
                    type="button"
                    data-part="item"
                    role="menuitem"
                    disabled={item.disabled}
                    tabIndex={-1}
                    onClick={() => {
                      setOpen(null)
                      focusTrigger(index)
                    }}
                  >
                    {item.label}
                    {item.keys ? (
                      <span data-part="keys">{item.keys}</span>
                    ) : null}
                  </button>
                ))}
              </div>
            ) : null}
          </span>
        ))}
        <span data-part="hint">← → между разделами</span>
      </div>
    </>
  )
}