# Menubar

Source: https://lumeo.nativ.sh/components/menubar

# Menubar

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<Menubar />

## When to Use

-   Application menu bars mimicking desktop software (File, Edit, View menus)
-   Desktop-style navigation with keyboard shortcut labels
-   Rich dropdown menus with labels, separators, and disabled items

Preview Code

Default

File

Edit

View

Preview Code

With Labels and Disabled Items

Account

Help

Preview Code

Keyboard Navigation

File

Edit

View

Use arrow keys to navigate between menus, Enter/Space to open, and Escape to close.

Preview Code

Text Editor

Format

Insert

Tools

## Submenus

Inside a `MenubarContent` you can nest deeper menus with the `MenubarSub` / `MenubarSubTrigger` / `MenubarSubContent` triplet. Submenus open on hover (with intent delay) and nest recursively — useful for the classic File → Open Recent → … desktop pattern.

Preview Code

Submenus

File

Keyboard:

-   ArrowRight on a `SubTrigger` opens the submenu and focuses its first item.
-   ArrowLeft closes the current submenu and returns focus to the parent trigger (it does not jump to a neighbouring top-level menu).
-   Escape closes the entire menubar tree.

## API Reference

### Menubar

Prop

Type

Default

Description

ChildContent

RenderFragment?

null

The content of the menubar (MenubarMenu items).

Class

string?

null

Additional CSS classes.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes to apply to the root element.

### MenubarMenu

Prop

Type

Default

Description

ChildContent

RenderFragment?

null

The trigger and content for this menu.

Class

string?

null

Additional CSS classes.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes.

### MenubarTrigger

Prop

Type

Default

Description

ChildContent

RenderFragment?

null

The trigger label content.

Class

string?

null

Additional CSS classes.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes.

### MenubarContent

Prop

Type

Default

Description

ChildContent

RenderFragment?

null

The dropdown content (menu items, labels, separators).

Class

string?

null

Additional CSS classes.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes.

### MenubarItem

Prop

Type

Default

Description

ChildContent

RenderFragment?

null

The item content.

OnClick

EventCallback

\-

Callback invoked when the menu item is clicked.

Disabled

bool

false

Disables the menu item.

Class

string?

null

Additional CSS classes.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes.

### MenubarSeparator

Prop

Type

Default

Description

Class

string?

null

Additional CSS classes.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes.

### MenubarLabel

Prop

Type

Default

Description

ChildContent

RenderFragment?

null

The label text content.

Class

string?

null

Additional CSS classes.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes.

### MenubarShortcut

Prop

Type

Default

Description

ChildContent

RenderFragment?

null

The keyboard shortcut text.

Class

string?

null

Additional CSS classes.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes.

## Related Components

-   [DropdownMenu](/components/dropdown-menu) — For a single dropdown menu triggered by a button
-   [NavigationMenu](/components/navigation-menu) — For site-wide navigation with flyout content panels
-   [ContextMenu](/components/context-menu) — For right-click triggered menus on specific elements