Stalk UI

Component

Menubar

Provides a persistent menu surface for top-level application commands.

Install

Run the CLI to copy the source into your project.

pnpm dlx @stalk-ui/cli add @stalk-ui/menubar

Examples

Live previews render through the docs app's PandaCSS codegen.

Theme
<Menubar>
  <Menubar.Menu>
    <Menubar.Trigger>File</Menubar.Trigger>
    <Menubar.Content>
      <Menubar.Item>
        New tab<Menubar.Shortcut>⌘T</Menubar.Shortcut>
      </Menubar.Item>
      <Menubar.Item>
        New window<Menubar.Shortcut>⌘N</Menubar.Shortcut>
      </Menubar.Item>
    </Menubar.Content>
  </Menubar.Menu>
  <Menubar.Menu>
    <Menubar.Trigger>Edit</Menubar.Trigger>
    <Menubar.Content>
      <Menubar.Item>Undo</Menubar.Item>
      <Menubar.Item>Redo</Menubar.Item>
    </Menubar.Content>
  </Menubar.Menu>
</Menubar>

Props

Public component props extracted from the source TypeScript types.

PropTypeRequiredDefaultDescription
`container``HTMLElement \null`No-
PropTypeRequiredDefaultDescription
`inset``boolean`No-Reserves indicator space so the item aligns with checkbox/radio items.
PropTypeRequiredDefaultDescription
`inset``boolean`No--

Variants

Variant axes exposed by the underlying PandaCSS recipe or slot recipe.

VariantValues
`inset``true`, `false`

Registry

Files this component contributes to your registry install.

  • Manifest: `/r/menubar.json`
  • Recipe: `menubar`
  • Files: `src/components/ui/menubar.tsx`