Menubar

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

Usage

Import all parts and piece them together. It's mandatory to wrap the whole component with the Tailwind tag.

const { Tailwind } = VM.require("uiisnear.near/widget/tailwind");
 
const {
  Menubar,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} = VM.require("uiisnear.near/widget/menubar");
 
if (Tailwind == undefined) return "";

<Tailwind>
  <Menubar>
    <MenubarMenu>
      <MenubarTrigger>File</MenubarTrigger>
      <MenubarContent>
        <MenubarItem>
          New Tab <MenubarShortcut>⌘T</MenubarShortcut>
        </MenubarItem>
        <MenubarItem>New Window</MenubarItem>
        <MenubarSeparator />
        <MenubarItem>Share</MenubarItem>
        <MenubarSeparator />
        <MenubarItem>Print</MenubarItem>
      </MenubarContent>
    </MenubarMenu>
  </Menubar>
</Tailwind>

API Reference

Menubar

Contains all the parts of a menubar.

Prop	Type	Default
defaultValue	string	---
value	string	---
onValueChange	function	---
dir	enum	---
loop	boolean	false

MenubarMenu

A top level menu item, contains a trigger with content combination.

Prop	Type	Default
value	string	---

MenubarTrigger

The button that toggles the content. By default, the MenubarContent will position itself against the trigger.

Data attribute	Values
[data-state]	"open" \| "closed"
[data-highlighted]	Present when highlighted
[data-disabled]	Present when disabled

MenubarContent

The component that pops out when a menu is open.

Prop	Type	Default
loop	boolean	false
onCloseAutoFocus	function	---
onEscapeKeyDown	function	---
onPointerDownOutside	function	---
onFocusOutside	function	---
onInteractOutside	function	---
forceMount	boolean	---
side	enum	"bottom"
sideOffset	number	0
align	enum	"center"
alignOffset	number	0
avoidCollisions	boolean	true
collisionBoundary	Boundary	[]
collisionPadding	number \| Padding	0
arrowPadding	number	0
sticky	enum	"partial"
hideWhenDetached	boolean	false

Data attribute	Values
[data-state]	"open" \| "closed"
[data-side]	"left" \| "right" \| "bottom" \| "top"
[data-align]	"start" \| "end" \| "center"

MenubarItem

The component that contains the menubar items.

Prop	Type	Default
disabled	boolean	---
onSelect	function	---
textValue	string	---
inset	boolean	---

Data attribute	Values
[data-highlighted]	Present when highlighted
[data-disabled]	Present when disabled

MenubarGroup

Used to group multiple MenubarItems.

MenubarLabel

Used to render a label. It won't be focusable using arrow keys.

Prop	Type	Default
inset	boolean	---

MenubarCheckboxItem

An item that can be controlled and rendered like a checkbox.

Prop	Type	Default
checked	boolean \| 'indeterminate'	---
onCheckedChange	function	---
disabled	boolean	---
onSelect	function	---
textValue	string	---

Data attribute	Values
[data-state]	"checked" \| "unchecked"
[data-highlighted]	Present when highlighted
[data-disabled]	Present when disabled

MenubarRadioGroup

Used to group multiple MenubarRadioItems.

Prop	Type	Default
value	string	---
onValueChange	function	---

MenubarRadioItem

An item that can be controlled and rendered like a radio.

Prop	Type	Default
value*	string	---
disabled	boolean	---
onSelect	function	---
textValue	string	---

Data attribute	Values
[data-state]	"checked" \| "unchecked"
[data-highlighted]	Present when highlighted
[data-disabled]	Present when disabled

MenubarSeparator

Used to visually separate items in a menubar menu.

MenubarSub

Contains all the parts of a submenu.

Prop	Type	Default
defaultOpen	boolean	---
open	boolean	---
onOpenChange	function	---

MenubarSubTrigger

An item that opens a submenu. Must be rendered inside MenubarSub.

Prop	Type	Default
disabled	boolean	---
textValue	string	---
inset	boolean	---

Data attribute	Values
[data-state]	"open" \| "closed"
[data-highlighted]	Present when highlighted
[data-disabled]	Present when disabled

MenubarSubContent

The component that pops out when a submenu is open. Must be rendered inside MenubarSub.

Prop	Type	Default
loop	boolean	false
onEscapeKeyDown	function	---
onPointerDownOutside	function	---
onFocusOutside	function	---
onInteractOutside	function	---
forceMount	boolean	---
sideOffset	number	0
alignOffset	number	0
avoidCollisions	boolean	true
collisionBoundary	Boundary	[]
collisionPadding	number \| Padding	0
arrowPadding	number	0
sticky	enum	"partial"
hideWhenDetached	boolean	false

Data attribute	Values
[data-state]	"open" \| "closed"
[data-side]	"left" \| "right" \| "bottom" \| "top"
[data-align]	"start" \| "end" \| "center"
[data-orientation]	"vertical" \| "horizontal"

Classnames

Classnames available to customize the component.

Function	Classname
Menubar	menubarClassname
MenubarTrigger	menubarTriggerClassname
MenubarSubTrigger	menubarSubTriggerClassname
MenubarSubContent	menubarSubContentClassname
MenubarContent	menubarContentClassname
MenubarItem	menubarItemClassname
MenubarCheckboxItem	menubarCheckboxItemClassname
MenubarRadioItem	menubarRadioItemClassname
MenubarLabel	menubarLabelClassname
MenubarSeparator	menubarSeparatorClassname
MenubarShortcut	menubarShortcutClassname

Label Navigation Menu