Menubar

A menu bar providing commands and options for your application.

View as Markdown

Anatomy

Import the component and assemble its parts:

Anatomy

API reference

modal

boolean

(default:

true

)
Name
Description

Whether the menubar is modal.

Type

boolean

Default

true

disabled

boolean

(default:

false

)
Description

Whether the whole menubar is disabled.

Type

boolean

Default

false

loop

boolean

(default:

true

)
Name
Description

Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.

Type

boolean

Default

true

orientation

Menu.Root.Orientation

(default:

'horizontal'

)
Description

The orientation of the menubar.

Type

Menu.Root.Orientation

Default

'horizontal'

className

string | function

Description

CSS class applied to the element, or a function that returns a class based on the component’s state.

Type

| string
| ((state: Menubar.State) => string)

render

ReactElement | function

Name
Description

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.

Type

| ReactElement
| ((props: HTMLProps, state: Menubar.State) => ReactElement)