Components / Menubar

Menubar

A persistent desktop command strip with horizontal roving focus.

example.component.html

html

<aevko-menubar label="Application menu">
  <button aevkoMenubarItem>
    File
  </button>
  <button aevkoMenubarItem>
    Edit
  </button>
  <button aevkoMenubarItem>
    View
  </button>
</aevko-menubar>

Installation

npx aevko-ui@latest add menubar --yes

Source ownership

Customization

Use the persistent strip for a small stable command set and compose richer dropdowns separately when a top-level item needs subcommands.

Edit locallyThe installed template and stylesheet are application code, not a black box.

Theme semanticallyOverride --aevko-* tokens or ordinary classes without !important.

API reference

Property or slot	Type	Default	Description
`label`	`string`	`required`	Accessible application command strip name.
`AevkoMenubarItem.disabled`	`boolean`	`false`	Removes a command from roving focus.

Accessibility contract

Accessibility

Included behavior

The named menubar contains native buttons with menuitem semantics; Left, Right, Home and End move focus.

Your responsibility

Keep commands stable across screens and ensure each button action remains understandable to keyboard and screen-reader users.

Back to all components