Menubar

Stabilny

Stały pasek menu — Plik, Edycja, Widok — który daje aplikacjom klasy desktopowej pełny, łatwy do odkrycia zestaw poleceń.

Kod źródłowy Base UI Rejestr

examples/menubar/demo.tsx

Instalacja

$ pnpm dlx shadcn@latest add https://www.prfct.dev/r/menubar.json

Użycie

import {
  Menubar,
  MenubarContent,
  MenubarGroup,
  MenubarItem,
  MenubarMenu,
  MenubarShortcut,
  MenubarTrigger,
} from "@/components/ui/menubar"

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarGroup>
        <MenubarItem>
          New tab <MenubarShortcut>⌘T</MenubarShortcut>
        </MenubarItem>
        <MenubarItem>New window</MenubarItem>
      </MenubarGroup>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Każde MenubarMenu to Dropdown Menu, którego wyzwalacz znajduje się w pasku, więc wszystkie typy pozycji — pole wyboru, przycisk radiowy, podmenu, akcja nieodwracalna — są dostępne przez to samo API. Gdy jedno menu jest otwarte, wystarczy najechać na sąsiedni wyzwalacz albo przejść do niego strzałką, żeby przełączyć menu bez kolejnego kliknięcia.

Przykłady

Pasek menu aplikacji

Kompletny pasek ze skrótami, podmenu, pozycjami z polem wyboru w menu Widok i grupą przycisków radiowych w menu Profile.

examples/menubar/demo.tsx

Menu edytora

Etykiety grupują powiązane polecenia w długim menu, a ikony sprawiają, że polecenia formatowania rozpoznaje się na pierwszy rzut oka.

examples/menubar/editor.tsx

Pozycje z polem wyboru

Przełączaj panele i elementy interfejsu bez zamykania menu. Przechowuj stan w aplikacji, żeby te same ustawienia dało się zmieniać także z innych miejsc.

examples/menubar/checkbox-items.tsx

Widoczne: Pasek boczny, Inspektor

Wyłączone pozycje i menu

Wyłączaj pozycje, które nie dotyczą bieżącego zaznaczenia, np. Ponów, gdy nie ma czego ponowić. Gdy polecenia całego menu są niedostępne, wyłącz je przez disabled na MenubarMenu, zamiast je ukrywać — stabilnego paska łatwiej się nauczyć.

examples/menubar/disabled.tsx

Wytyczne

Kiedy używać

W edytorach dokumentów, narzędziach projektowych, aplikacjach w stylu IDE i pulpitach z wieloma poleceniami, gdzie ludzie oczekują paska menu znanego z aplikacji desktopowych.
Gdy polecenia potrzebują stałego miejsca, w którym można je przejrzeć — obok skrótów i pasków narzędzi.

Kiedy nie używać

W serwisach z treścią i prostych aplikacjach — nawigacja najwyższego poziomu należy do Navigation Menu.
Przy kilku akcjach — lżejszy będzie pasek narzędzi z przyciskami albo pojedyncze Dropdown Menu.
Na małych ekranach — poniżej md zwiń pasek do jednego menu albo do palety Command.

Utarta kolejność

Ludzie przenoszą oczekiwania z każdej aplikacji desktopowej, której kiedykolwiek używali. Trzymaj się utartej kolejności — Plik, Edycja, Widok, potem menu specyficzne dla aplikacji, a na końcu Okno i Pomoc — i ograniczaj etykiety w pasku do jednego słowa. Wewnątrz menu stosuj zasady treści z Dropdown Menu.

Każda pozycja potrzebuje drugiej drogi

Pasek menu służy do odkrywania poleceń i uczy skrótów. Pokazuj skrót przy każdym poleceniu, które go ma, i zadbaj, żeby częste polecenia były dostępne także z paska narzędzi, menu kontekstowego lub palety Command.

Dostępność

Menubar implementuje wzorzec WAI-ARIA menubar: pasek zajmuje jedno miejsce w kolejności tabulacji, a fokus wędruje między jego wyzwalaczami (roving focus).

Klawisz	Działanie
`Tab`	Przenosi fokus do paska (na wyzwalacz, który ostatnio miał fokus) i poza niego.
`←→`	Przechodzi między wyzwalaczami. Gdy menu jest otwarte, zamiast tego otwiera sąsiednie menu.
`EnterSpacja↓`	Otwiera menu, na którym jest fokus, i przenosi fokus na jego pierwszą pozycję.
`↓↑`	Wewnątrz menu przechodzi między pozycjami.
`→`	Na wyzwalaczu podmenu otwiera podmenu.
`A–Z`	Przechodzi do następnej pozycji, która zaczyna się od wpisanych znaków.
`Esc`	Zamyka menu i przywraca fokus na jego wyzwalacz w pasku.

Dokumentacja API

Menubar

Pasek. Przyjmuje wszystkie propsy komponentu Menubar z Base UI.

Prop	Typ	Domyślnie
`orientation` Kierunek paska i nawigacji strzałkami między wyzwalaczami.	`"horizontal" \| "vertical"`	`"horizontal"`
`loopFocus` Czy fokus przechodzi z ostatniego wyzwalacza z powrotem na pierwszy.	`boolean`	`true`
`modal` Czy reszta strony jest nieaktywna, gdy menu jest otwarte.	`boolean`	`true`
`disabled` Wyłącza wszystkie menu w pasku.	`boolean`	`false`

MenubarMenu

Pojedyncze menu w pasku — komponent główny DropdownMenu. Przyjmuje open, defaultOpen, onOpenChange i disabled.

MenubarTrigger

Przycisk w pasku, który otwiera swoje menu. Jest podświetlony, gdy jego menu jest otwarte, i przygasa, gdy jest wyłączony.

MenubarContent

Prop	Typ	Domyślnie
`align` Wyrównanie względem wyzwalacza.	`"start" \| "center" \| "end"`	`"start"`
`alignOffset` Wyrównuje tekst pierwszej pozycji menu z etykietą wyzwalacza.	`number`	`-4`
`sideOffset` Odstęp między paskiem a menu, w px.	`number`	`8`

Pozostałe części

MenubarItem, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubTrigger, MenubarSubContent, MenubarLabel, MenubarSeparator, MenubarShortcut, MenubarGroup i MenubarPortal to części Dropdown Menu z atrybutami data-slot paska menu, więc mają te same propsy.