Actions

Menubar

A persistent row of Dropdown Menus, like an application's File, Edit and View menus.

Class name	Type	Description
`menubarplf:menubar`	Component	The row of menus
`dropdownplf:dropdown`	Component	Wraps one trigger and its menu
`menuplf:menu`	Component	The list of items, with dropdown-content
`menubar-triggerplf:menubar-trigger`	Part	A menu's trigger button
`menu-shortcutplf:menu-shortcut`	Part	A key hint; binds no key
`dropdown-contentplf:dropdown-content`	Part	The floating panel
`menu-itemplf:menu-item`	Part	A button or link item
`menu-titleplf:menu-title`	Part	A label above items
`menu-separatorplf:menu-separator`	Part	A divider between items
`menu-textplf:menu-text`	Part	An item's text
`menu-item-errorplf:menu-item-error`	Color	A destructive item

Default

Name the bar with aria-label or aria-labelledby, and make every direct child a valid Dropdown Menu; otherwise the bar gets no behavior.

<div class="menubar" data-plf-menubar aria-label="Browser">
  <div class="dropdown" data-plf-dropdown-menu>
    <button class="menubar-trigger">File</button>
    <div class="dropdown-content menu" hidden>
      <button class="menu-item">
        <span class="menu-text">New tab</span>
        <kbd class="menu-shortcut" aria-hidden="true">⌘T</kbd>
      </button>
      <button class="menu-item">
        <span class="menu-text">New window</span>
        <kbd class="menu-shortcut" aria-hidden="true">⌘N</kbd>
      </button>
      <button class="menu-item" disabled>
        <span class="menu-text">New private window</span>
      </button>
      <hr class="menu-separator">
      <button class="menu-item"><span class="menu-text">Share…</span></button>
      <hr class="menu-separator">
      <button class="menu-item">
        <span class="menu-text">Print…</span>
        <kbd class="menu-shortcut" aria-hidden="true">⌘P</kbd>
      </button>
    </div>
  </div>
  <div class="dropdown" data-plf-dropdown-menu>
    <button class="menubar-trigger">Edit</button>
    <div class="dropdown-content menu" hidden>
      <button class="menu-item">
        <span class="menu-text">Undo</span>
        <kbd class="menu-shortcut" aria-hidden="true">⌘Z</kbd>
      </button>
      <button class="menu-item">
        <span class="menu-text">Redo</span>
        <kbd class="menu-shortcut" aria-hidden="true">⇧⌘Z</kbd>
      </button>
      <hr class="menu-separator">
      <button class="menu-item">
        <span class="menu-text">Find…</span>
        <kbd class="menu-shortcut" aria-hidden="true">⌘F</kbd>
      </button>
      <hr class="menu-separator">
      <button class="menu-item">
        <span class="menu-text">Cut</span>
        <kbd class="menu-shortcut" aria-hidden="true">⌘X</kbd>
      </button>
      <button class="menu-item">
        <span class="menu-text">Copy</span>
        <kbd class="menu-shortcut" aria-hidden="true">⌘C</kbd>
      </button>
      <button class="menu-item">
        <span class="menu-text">Paste</span>
        <kbd class="menu-shortcut" aria-hidden="true">⌘V</kbd>
      </button>
    </div>
  </div>
  <div class="dropdown" data-plf-dropdown-menu>
    <button class="menubar-trigger">View</button>
    <div class="dropdown-content menu" hidden>
      <button class="menu-item">
        <span class="menu-text">Show bookmarks bar</span>
        <kbd class="menu-shortcut" aria-hidden="true">⇧⌘B</kbd>
      </button>
      <button class="menu-item"><span class="menu-text">Show full URLs</span></button>
      <hr class="menu-separator">
      <button class="menu-item">
        <span class="menu-text">Reload</span>
        <kbd class="menu-shortcut" aria-hidden="true">⌘R</kbd>
      </button>
      <button class="menu-item">
        <span class="menu-text">Toggle full screen</span>
      </button>
      <hr class="menu-separator">
      <button class="menu-item"><span class="menu-text">Hide sidebar</span></button>
    </div>
  </div>
  <div class="dropdown" data-plf-dropdown-menu>
    <button class="menubar-trigger">Profiles</button>
    <div class="dropdown-content menu" hidden>
      <div class="menu-title">Switch profile</div>
      <button class="menu-item"><span class="menu-text">Andy</span></button>
      <button class="menu-item"><span class="menu-text">Benoit</span></button>
      <button class="menu-item"><span class="menu-text">Luis</span></button>
      <hr class="menu-separator">
      <button class="menu-item"><span class="menu-text">Edit profiles…</span></button>
      <hr class="menu-separator">
      <button class="menu-item menu-item-error">
        <span class="menu-text">Remove profile</span>
      </button>
    </div>
  </div>
</div>

<div class="plf:menubar" data-plf-menubar aria-label="Browser">
  <div class="plf:dropdown" data-plf-dropdown-menu>
    <button class="plf:menubar-trigger">File</button>
    <div class="plf:dropdown-content plf:menu" hidden>
      <button class="plf:menu-item">
        <span class="plf:menu-text">New tab</span>
        <kbd class="plf:menu-shortcut" aria-hidden="true">⌘T</kbd>
      </button>
      <button class="plf:menu-item">
        <span class="plf:menu-text">New window</span>
        <kbd class="plf:menu-shortcut" aria-hidden="true">⌘N</kbd>
      </button>
      <button class="plf:menu-item" disabled>
        <span class="plf:menu-text">New private window</span>
      </button>
      <hr class="plf:menu-separator">
      <button class="plf:menu-item"><span class="plf:menu-text">Share…</span></button>
      <hr class="plf:menu-separator">
      <button class="plf:menu-item">
        <span class="plf:menu-text">Print…</span>
        <kbd class="plf:menu-shortcut" aria-hidden="true">⌘P</kbd>
      </button>
    </div>
  </div>
  <div class="plf:dropdown" data-plf-dropdown-menu>
    <button class="plf:menubar-trigger">Edit</button>
    <div class="plf:dropdown-content plf:menu" hidden>
      <button class="plf:menu-item">
        <span class="plf:menu-text">Undo</span>
        <kbd class="plf:menu-shortcut" aria-hidden="true">⌘Z</kbd>
      </button>
      <button class="plf:menu-item">
        <span class="plf:menu-text">Redo</span>
        <kbd class="plf:menu-shortcut" aria-hidden="true">⇧⌘Z</kbd>
      </button>
      <hr class="plf:menu-separator">
      <button class="plf:menu-item">
        <span class="plf:menu-text">Find…</span>
        <kbd class="plf:menu-shortcut" aria-hidden="true">⌘F</kbd>
      </button>
      <hr class="plf:menu-separator">
      <button class="plf:menu-item">
        <span class="plf:menu-text">Cut</span>
        <kbd class="plf:menu-shortcut" aria-hidden="true">⌘X</kbd>
      </button>
      <button class="plf:menu-item">
        <span class="plf:menu-text">Copy</span>
        <kbd class="plf:menu-shortcut" aria-hidden="true">⌘C</kbd>
      </button>
      <button class="plf:menu-item">
        <span class="plf:menu-text">Paste</span>
        <kbd class="plf:menu-shortcut" aria-hidden="true">⌘V</kbd>
      </button>
    </div>
  </div>
  <div class="plf:dropdown" data-plf-dropdown-menu>
    <button class="plf:menubar-trigger">View</button>
    <div class="plf:dropdown-content plf:menu" hidden>
      <button class="plf:menu-item">
        <span class="plf:menu-text">Show bookmarks bar</span>
        <kbd class="plf:menu-shortcut" aria-hidden="true">⇧⌘B</kbd>
      </button>
      <button class="plf:menu-item"><span class="plf:menu-text">Show full URLs</span></button>
      <hr class="plf:menu-separator">
      <button class="plf:menu-item">
        <span class="plf:menu-text">Reload</span>
        <kbd class="plf:menu-shortcut" aria-hidden="true">⌘R</kbd>
      </button>
      <button class="plf:menu-item">
        <span class="plf:menu-text">Toggle full screen</span>
      </button>
      <hr class="plf:menu-separator">
      <button class="plf:menu-item"><span class="plf:menu-text">Hide sidebar</span></button>
    </div>
  </div>
  <div class="plf:dropdown" data-plf-dropdown-menu>
    <button class="plf:menubar-trigger">Profiles</button>
    <div class="plf:dropdown-content plf:menu" hidden>
      <div class="plf:menu-title">Switch profile</div>
      <button class="plf:menu-item"><span class="plf:menu-text">Andy</span></button>
      <button class="plf:menu-item"><span class="plf:menu-text">Benoit</span></button>
      <button class="plf:menu-item"><span class="plf:menu-text">Luis</span></button>
      <hr class="plf:menu-separator">
      <button class="plf:menu-item"><span class="plf:menu-text">Edit profiles…</span></button>
      <hr class="plf:menu-separator">
      <button class="plf:menu-item plf:menu-item-error">
        <span class="plf:menu-text">Remove profile</span>
      </button>
    </div>
  </div>
</div>

import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarText, MenubarTitle, MenubarTrigger } from '@pelatform/react';

export function Example() {
  return (
    <Menubar aria-label="Browser">
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            <MenubarText>New tab</MenubarText>
            <MenubarShortcut>⌘T</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            <MenubarText>New window</MenubarText>
            <MenubarShortcut>⌘N</MenubarShortcut>
          </MenubarItem>
          <MenubarItem disabled>
            <MenubarText>New private window</MenubarText>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem><MenubarText>Share…</MenubarText></MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            <MenubarText>Print…</MenubarText>
            <MenubarShortcut>⌘P</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Edit</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            <MenubarText>Undo</MenubarText>
            <MenubarShortcut>⌘Z</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            <MenubarText>Redo</MenubarText>
            <MenubarShortcut>⇧⌘Z</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            <MenubarText>Find…</MenubarText>
            <MenubarShortcut>⌘F</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            <MenubarText>Cut</MenubarText>
            <MenubarShortcut>⌘X</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            <MenubarText>Copy</MenubarText>
            <MenubarShortcut>⌘C</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            <MenubarText>Paste</MenubarText>
            <MenubarShortcut>⌘V</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>View</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            <MenubarText>Show bookmarks bar</MenubarText>
            <MenubarShortcut>⇧⌘B</MenubarShortcut>
          </MenubarItem>
          <MenubarItem><MenubarText>Show full URLs</MenubarText></MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            <MenubarText>Reload</MenubarText>
            <MenubarShortcut>⌘R</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            <MenubarText>Toggle full screen</MenubarText>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem><MenubarText>Hide sidebar</MenubarText></MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Profiles</MenubarTrigger>
        <MenubarContent>
          <MenubarTitle>Switch profile</MenubarTitle>
          <MenubarItem><MenubarText>Andy</MenubarText></MenubarItem>
          <MenubarItem><MenubarText>Benoit</MenubarText></MenubarItem>
          <MenubarItem><MenubarText>Luis</MenubarText></MenubarItem>
          <MenubarSeparator />
          <MenubarItem><MenubarText>Edit profiles…</MenubarText></MenubarItem>
          <MenubarSeparator />
          <MenubarItem color="error">
            <MenubarText>Remove profile</MenubarText>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  );
}

import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarText, MenubarTitle, MenubarTrigger } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <Menubar aria-label="Browser">
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            <MenubarText>New tab</MenubarText>
            <MenubarShortcut>⌘T</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            <MenubarText>New window</MenubarText>
            <MenubarShortcut>⌘N</MenubarShortcut>
          </MenubarItem>
          <MenubarItem disabled>
            <MenubarText>New private window</MenubarText>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem><MenubarText>Share…</MenubarText></MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            <MenubarText>Print…</MenubarText>
            <MenubarShortcut>⌘P</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Edit</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            <MenubarText>Undo</MenubarText>
            <MenubarShortcut>⌘Z</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            <MenubarText>Redo</MenubarText>
            <MenubarShortcut>⇧⌘Z</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            <MenubarText>Find…</MenubarText>
            <MenubarShortcut>⌘F</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            <MenubarText>Cut</MenubarText>
            <MenubarShortcut>⌘X</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            <MenubarText>Copy</MenubarText>
            <MenubarShortcut>⌘C</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            <MenubarText>Paste</MenubarText>
            <MenubarShortcut>⌘V</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>View</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            <MenubarText>Show bookmarks bar</MenubarText>
            <MenubarShortcut>⇧⌘B</MenubarShortcut>
          </MenubarItem>
          <MenubarItem><MenubarText>Show full URLs</MenubarText></MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            <MenubarText>Reload</MenubarText>
            <MenubarShortcut>⌘R</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            <MenubarText>Toggle full screen</MenubarText>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem><MenubarText>Hide sidebar</MenubarText></MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Profiles</MenubarTrigger>
        <MenubarContent>
          <MenubarTitle>Switch profile</MenubarTitle>
          <MenubarItem><MenubarText>Andy</MenubarText></MenubarItem>
          <MenubarItem><MenubarText>Benoit</MenubarText></MenubarItem>
          <MenubarItem><MenubarText>Luis</MenubarText></MenubarItem>
          <MenubarSeparator />
          <MenubarItem><MenubarText>Edit profiles…</MenubarText></MenubarItem>
          <MenubarSeparator />
          <MenubarItem color="error">
            <MenubarText>Remove profile</MenubarText>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  );
}

Shortcuts

<div class="menubar" data-plf-menubar aria-label="Editor">
  <div class="dropdown" data-plf-dropdown-menu>
    <button class="menubar-trigger">File</button>
    <div class="dropdown-content menu" hidden>
      <button class="menu-item">
        <span class="menu-text">New tab</span>
        <kbd class="menu-shortcut" aria-hidden="true">⌘T</kbd>
      </button>
      <button class="menu-item">
        <span class="menu-text">Print</span>
        <kbd class="menu-shortcut" aria-hidden="true">⌘P</kbd>
      </button>
    </div>
  </div>
  <div class="dropdown" data-plf-dropdown-menu>
    <button class="menubar-trigger">Edit</button>
    <div class="dropdown-content menu" hidden>
      <button class="menu-item">
        <span class="menu-text">Undo</span>
        <kbd class="menu-shortcut" aria-hidden="true">⌘Z</kbd>
      </button>
      <button class="menu-item">
        <span class="menu-text">Redo</span>
        <kbd class="menu-shortcut" aria-hidden="true">⇧⌘Z</kbd>
      </button>
      <hr class="menu-separator">
      <button class="menu-item">
        <span class="menu-text">Copy</span>
        <kbd class="menu-shortcut" aria-hidden="true">⌘C</kbd>
      </button>
      <button class="menu-item">
        <span class="menu-text">Paste</span>
        <kbd class="menu-shortcut" aria-hidden="true">⌘V</kbd>
      </button>
    </div>
  </div>
</div>

<div class="plf:menubar" data-plf-menubar aria-label="Editor">
  <div class="plf:dropdown" data-plf-dropdown-menu>
    <button class="plf:menubar-trigger">File</button>
    <div class="plf:dropdown-content plf:menu" hidden>
      <button class="plf:menu-item">
        <span class="plf:menu-text">New tab</span>
        <kbd class="plf:menu-shortcut" aria-hidden="true">⌘T</kbd>
      </button>
      <button class="plf:menu-item">
        <span class="plf:menu-text">Print</span>
        <kbd class="plf:menu-shortcut" aria-hidden="true">⌘P</kbd>
      </button>
    </div>
  </div>
  <div class="plf:dropdown" data-plf-dropdown-menu>
    <button class="plf:menubar-trigger">Edit</button>
    <div class="plf:dropdown-content plf:menu" hidden>
      <button class="plf:menu-item">
        <span class="plf:menu-text">Undo</span>
        <kbd class="plf:menu-shortcut" aria-hidden="true">⌘Z</kbd>
      </button>
      <button class="plf:menu-item">
        <span class="plf:menu-text">Redo</span>
        <kbd class="plf:menu-shortcut" aria-hidden="true">⇧⌘Z</kbd>
      </button>
      <hr class="plf:menu-separator">
      <button class="plf:menu-item">
        <span class="plf:menu-text">Copy</span>
        <kbd class="plf:menu-shortcut" aria-hidden="true">⌘C</kbd>
      </button>
      <button class="plf:menu-item">
        <span class="plf:menu-text">Paste</span>
        <kbd class="plf:menu-shortcut" aria-hidden="true">⌘V</kbd>
      </button>
    </div>
  </div>
</div>

import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarText, MenubarTrigger } from '@pelatform/react';

export function Example() {
  return (
    <Menubar aria-label="Editor">
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            <MenubarText>New tab</MenubarText>
            <MenubarShortcut>⌘T</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            <MenubarText>Print</MenubarText>
            <MenubarShortcut>⌘P</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Edit</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            <MenubarText>Undo</MenubarText>
            <MenubarShortcut>⌘Z</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            <MenubarText>Redo</MenubarText>
            <MenubarShortcut>⇧⌘Z</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            <MenubarText>Copy</MenubarText>
            <MenubarShortcut>⌘C</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            <MenubarText>Paste</MenubarText>
            <MenubarShortcut>⌘V</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  );
}

import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarText, MenubarTrigger } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <Menubar aria-label="Editor">
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            <MenubarText>New tab</MenubarText>
            <MenubarShortcut>⌘T</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            <MenubarText>Print</MenubarText>
            <MenubarShortcut>⌘P</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Edit</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            <MenubarText>Undo</MenubarText>
            <MenubarShortcut>⌘Z</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            <MenubarText>Redo</MenubarText>
            <MenubarShortcut>⇧⌘Z</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            <MenubarText>Copy</MenubarText>
            <MenubarShortcut>⌘C</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            <MenubarText>Paste</MenubarText>
            <MenubarShortcut>⌘V</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  );
}

Disabled

<div class="menubar" data-plf-menubar aria-label="Browser">
  <div class="dropdown" data-plf-dropdown-menu>
    <button class="menubar-trigger">File</button>
    <div class="dropdown-content menu" hidden>
      <button class="menu-item"><span class="menu-text">New window</span></button>
      <button class="menu-item" disabled>
        <span class="menu-text">New private window</span>
      </button>
    </div>
  </div>
  <div class="dropdown" data-plf-dropdown-menu>
    <button class="menubar-trigger" disabled>History</button>
    <div class="dropdown-content menu" hidden>
      <button class="menu-item">
        <span class="menu-text">Show all history</span>
      </button>
    </div>
  </div>
</div>

<div class="plf:menubar" data-plf-menubar aria-label="Browser">
  <div class="plf:dropdown" data-plf-dropdown-menu>
    <button class="plf:menubar-trigger">File</button>
    <div class="plf:dropdown-content plf:menu" hidden>
      <button class="plf:menu-item"><span class="plf:menu-text">New window</span></button>
      <button class="plf:menu-item" disabled>
        <span class="plf:menu-text">New private window</span>
      </button>
    </div>
  </div>
  <div class="plf:dropdown" data-plf-dropdown-menu>
    <button class="plf:menubar-trigger" disabled>History</button>
    <div class="plf:dropdown-content plf:menu" hidden>
      <button class="plf:menu-item">
        <span class="plf:menu-text">Show all history</span>
      </button>
    </div>
  </div>
</div>

import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarText, MenubarTrigger } from '@pelatform/react';

export function Example() {
  return (
    <Menubar aria-label="Browser">
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem><MenubarText>New window</MenubarText></MenubarItem>
          <MenubarItem disabled>
            <MenubarText>New private window</MenubarText>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger disabled>History</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            <MenubarText>Show all history</MenubarText>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  );
}

import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarText, MenubarTrigger } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <Menubar aria-label="Browser">
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem><MenubarText>New window</MenubarText></MenubarItem>
          <MenubarItem disabled>
            <MenubarText>New private window</MenubarText>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger disabled>History</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            <MenubarText>Show all history</MenubarText>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  );
}

Menubar needs JavaScript. The Full script (pelatform-ui.min.js) starts every component on page load, with no code of your own; with ESM imports, call init() yourself, as in Installation. For markup you add later, see Dynamic content.

<link rel="stylesheet" href="pelatform-ui.min.css">
<script src="pelatform-ui.min.js" defer></script>

<link rel="stylesheet" href="core/pelatform-ui-core.min.css">
<link rel="stylesheet" href="components/dropdown-menu.min.css">
<link rel="stylesheet" href="components/menubar.min.css">
<script src="core/pelatform-ui-core.min.js" defer></script>
<script src="components/dropdown-menu.min.js" defer></script>
<script src="components/menubar.min.js" defer></script>
<script>document.addEventListener('DOMContentLoaded', () => PLF.init());</script>

<link rel="stylesheet" href="pelatform-ui.prefixed.min.css">
<script src="pelatform-ui.min.js" defer></script>

<link rel="stylesheet" href="core/pelatform-ui-core.prefixed.min.css">
<link rel="stylesheet" href="components/dropdown-menu.prefixed.min.css">
<link rel="stylesheet" href="components/menubar.prefixed.min.css">
<script src="core/pelatform-ui-core.min.js" defer></script>
<script src="components/dropdown-menu.min.js" defer></script>
<script src="components/menubar.min.js" defer></script>
<script>document.addEventListener('DOMContentLoaded', () => PLF.init());</script>

Hooks

Attribute	Purpose
`data-plf-menubar`	Marks the bar; needs `aria-label` or `aria-labelledby`
`data-plf-dropdown-menu`	Marks each direct child; see the Dropdown Menu hooks
`data-plf-align`	On a menu: `start` (default in a Menubar), `center` or `end`
`disabled`, `aria-disabled="true"`	An item, or a trigger whose menu cannot open

Methods

Method	Behavior
`PLF.Menubar.getOrCreateInstance(element)`	Returns the instance, creating it for valid markup
`PLF.Menubar.getInstance(element)`	Returns the instance or `null`
`instance.getState()`	Returns `{open, active}`: the open `dropdown` or `null`, and the focusable trigger
`instance.destroy()`	Removes listeners and added attributes, and destroys the Dropdown Menus it created

Open or close one menu with its Dropdown Menu methods.

Events

Menubar has no events of its own. Each menu’s plf:dropdown-menu:* events bubble through the bar.

Keyboard

Key	Action
Tab	Enters or leaves the bar, a single Tab stop
Right Arrow, Left Arrow	Move to the next or previous trigger; an open menu moves along
Home, End	Move to the first or last trigger
Enter, Space, Down Arrow	Open the menu at the first item
Up Arrow	Opens the menu at the last item
Escape	Closes the menu and focuses its trigger

Inside a menu, the Dropdown Menu keys apply.

React

Menubar from @pelatform/react renders the bar and its keyboard, and each MenubarMenu a trigger with its menu, which keeps its own state, or the application sets it with open.

Prop	Values	Default
`open` on `MenubarMenu`	`true` while the menu is open, which the application changes in `onOpenChange`	Its own state
`defaultOpen` on `MenubarMenu`	`true` starts open when the application does not set `open`	`false`
`onOpenChange` on `MenubarMenu`	`(open, reason)`, called when the menu opens or closes: `trigger` (a pointer: its trigger, an item, a press outside, or a hover over its trigger while another menu is open) or `keyboard` (a key, or the focus leaving it)	None
`placement` on `MenubarMenu`	`top`, `bottom`, `left`, `right`	`bottom`
`align` on `MenubarMenu`	`start`, `center`, `end`	`start`
`color` on `MenubarItem`	`error`	None
`onSelect` on `MenubarItem`	`(event)`, called when the item is chosen; the menu closes unless it calls `event.preventDefault()`	None

The parts:

Part	Element
`MenubarMenu`	A `div` with `dropdown`, which holds one trigger and its menu
`MenubarTrigger`	A `button` with `menubar-trigger`, which opens its menu and names it
`MenubarContent`	A `div` with `dropdown-content menu`: the menu
`MenubarItem`	A `button` with `menu-item`
`MenubarTitle`	A `div` with `menu-title`
`MenubarSeparator`	An `hr` with `menu-separator`
`MenubarText`	A `span` with `menu-text`
`MenubarShortcut`	A `kbd` with `menu-shortcut`, hidden from assistive technologies

Other props are the element’s own, className and ref included.

CSS variables

Variable	Default
`--plf-menubar-bg`, `--plf-menubar-color`	Surface and text
`--plf-menubar-border`	Subtle border
`--plf-menubar-radius`	Large radius (8px)
`--plf-menubar-trigger-active-bg`	Muted surface, on hover and while a menu is open

The Dropdown Menu variables style the menus.