Menubar

A menubar component with nested submenus and keyboard navigation.

vu-menubar · @velkin/react-pro/menubar

Copy page

Import

React

npm i @velkin/react-pro

import { LicenseInfo } from "@velkin/license";
// Vite: import.meta.env.VITE_VELKIN_LICENSE_KEY
// Next: process.env.NEXT_PUBLIC_VELKIN_LICENSE_KEY
LicenseInfo.setLicenseKey(import.meta.env.VITE_VELKIN_LICENSE_KEY ?? process.env.NEXT_PUBLIC_VELKIN_LICENSE_KEY ?? "");

// @velkin-pro
import { VuMenubar } from "@velkin/react-pro/menubar";

Examples

API

Props

Prop	Type	Default	Description
items	VuMenubarItem[]	[]	Menu item tree.
disabled	`boolean`	false	Disables the entire menubar. Default: `false`.
pwaOverlay	`boolean`	false	Window-controls-overlay placement (`pwaoverlay` attr). Default: `false`.
size	VuMenubarSize	"md"	Bar item padding and height. Default: `"md"`.
tone	VuMenubarTone	"normal"	Bar foreground weight. Default: `"normal"`.
overflowThreshold	`number`	0	Minimum visible items before overflow mode. Default: `0`.
menuTrigger	VuMenubarMenuTrigger	"click"	Desktop submenu open interaction (`menutrigger` attr). Default: `"click"`.
variant	VuMenubarVariant	"flat"	Bar surface paint recipe. Default: `"flat"`.
indicator	VuMenubarIndicator	"underline"	Active top-level affordance (`underline`/`pill`/`dot`/`none`); `pill` is selection chrome — not `radius="full"`. Default: `"underline"`.
contained	`boolean`	false	Centers the bar row with a max inline width. Default: `false`.
justifyBar	`string`	"flex-start"	CSS `justify-content` for the outer bar (`justifybar` attr).
justifyBarItems	`string`	"flex-start"	CSS `justify-content` for the item row (`justifybaritems` attr).
placement	VuMenubarPlacement	"bottom"	Preferred side for top flyout. Default: `"bottom"`.
align	VuMenubarAlign	"start"	Alignment along the trigger edge. Default: `"start"`.
offset	`number`	4	Gap in px between trigger and flyout. Default: `4`.
breakpoint	`number`	768	Mobile breakpoint in pixels. Default: `768`.
isMobile	`boolean`	false	Mobile layout flag (`ismobile` attr).
sticky	`boolean`	false	Pins to the top of the scroll container. Default: `false`.
condense	`boolean`	false	Elevates and shortens the bar when `sticky`. Default: `false`.
menubarLabel	`string`	""	Menubar landmark accessible name (`menubarlabel` attr).
nestedSubmenuLabel	`string`	""	Nested flyout accessible name (`nestedsubmenulabel` attr).
menuLabel	`string`	""	Mobile menu toggle accessible name (`menulabel` attr).
drawerLabel	`string`	""	Mobile drawer accessible name (`drawerlabel` attr).
closeLabel	`string`	""	Mobile drawer close accessible name (`closelabel` attr).

Events

Event	Detail	Description
vu-activate	VuMenubarActivateDetail	When an item is activated.
vu-check	VuMenubarCheckDetail	When a checkbox item toggles.
vu-select	VuMenubarSelectDetail	When a radio item is selected.

Slots

Slot	Description
prepend	Content before menu items on desktop.
append	Content after menu items on desktop.
prepend-mobile	Content before navigation items in mobile mode.
append-mobile	Content after navigation items in mobile mode.
header	Header content for the mobile drawer.
footer	Footer content for the mobile drawer.

CSS parts

Part	Description
menu-bar	Main menubar container.
menubar-desktop	Desktop menubar region.
menubar-mobile	Mobile chrome.
menu-item	Top-level menu item button.
top-menu	Top-level flyout panel.
nested-menu	Nested flyout panel.
submenu-item	Item within a submenu.

Methods

Method	Description
focusFirst	- Focuses the first top-level menu item.
focusLast	- Focuses the last top-level menu item.
closeMenus	- Closes all open flyouts.
openMenu	- Opens the mobile drawer menu.
closeMenu	- Closes mobile drawer and desktop submenus.
toggleMenu	- Toggles the mobile drawer menu.

Types

Name	Definition
VuMenubarActivateDetail	`{ item: VuMenubarItem; path: string; isSubmenu: boolean; value: unknown; }`
VuMenubarAlign	`"start" \| "center" \| "end"`
VuMenubarCheckDetail	`{ item: VuMenubarItem; path: string; checked: boolean; }`
VuMenubarIndicator	`"none" \| "dot" \| "underline" \| "pill"`
VuMenubarMenuTrigger	`"auto" \| "click" \| "hover"`
VuMenubarPlacement	`"top" \| "bottom" \| "left" \| "right" \| "auto"`
VuMenubarSelectDetail	`{ path: string; group: string; }`
VuMenubarSize	`"sm" \| "md" \| "lg"`
VuMenubarTone	`"subtle" \| "normal" \| "strong"`
VuMenubarVariant	`"outline" \| "flat" \| "elevated"`

Import

React

npm i @velkin/react-pro import { LicenseInfo } from "@velkin/license"; // Vite: import.meta.env.VITE_VELKIN_LICENSE_KEY // Next: process.env.NEXT_PUBLIC_VELKIN_LICENSE_KEY LicenseInfo.setLicenseKey(import.meta.env.VITE_VELKIN_LICENSE_KEY ?? process.env.NEXT_PUBLIC_VELKIN_LICENSE_KEY ?? ""); // @velkin-pro import { VuMenubar } from "@velkin/react-pro/menubar";

API

Props

Prop	Type	Default	Description
items	VuMenubarItem[]	[]	Menu item tree.
disabled	`boolean`	false	Disables the entire menubar. Default: `false`.
pwaOverlay	`boolean`	false	Window-controls-overlay placement (`pwaoverlay` attr). Default: `false`.
size	VuMenubarSize	"md"	Bar item padding and height. Default: `"md"`.
tone	VuMenubarTone	"normal"	Bar foreground weight. Default: `"normal"`.
overflowThreshold	`number`	0	Minimum visible items before overflow mode. Default: `0`.
menuTrigger	VuMenubarMenuTrigger	"click"	Desktop submenu open interaction (`menutrigger` attr). Default: `"click"`.
variant	VuMenubarVariant	"flat"	Bar surface paint recipe. Default: `"flat"`.
indicator	VuMenubarIndicator	"underline"	Active top-level affordance (`underline`/`pill`/`dot`/`none`); `pill` is selection chrome — not `radius="full"`. Default: `"underline"`.
contained	`boolean`	false	Centers the bar row with a max inline width. Default: `false`.
justifyBar	`string`	"flex-start"	CSS `justify-content` for the outer bar (`justifybar` attr).
justifyBarItems	`string`	"flex-start"	CSS `justify-content` for the item row (`justifybaritems` attr).
placement	VuMenubarPlacement	"bottom"	Preferred side for top flyout. Default: `"bottom"`.
align	VuMenubarAlign	"start"	Alignment along the trigger edge. Default: `"start"`.
offset	`number`	4	Gap in px between trigger and flyout. Default: `4`.
breakpoint	`number`	768	Mobile breakpoint in pixels. Default: `768`.
isMobile	`boolean`	false	Mobile layout flag (`ismobile` attr).
sticky	`boolean`	false	Pins to the top of the scroll container. Default: `false`.
condense	`boolean`	false	Elevates and shortens the bar when `sticky`. Default: `false`.
menubarLabel	`string`	""	Menubar landmark accessible name (`menubarlabel` attr).
nestedSubmenuLabel	`string`	""	Nested flyout accessible name (`nestedsubmenulabel` attr).
menuLabel	`string`	""	Mobile menu toggle accessible name (`menulabel` attr).
drawerLabel	`string`	""	Mobile drawer accessible name (`drawerlabel` attr).
closeLabel	`string`	""	Mobile drawer close accessible name (`closelabel` attr).

Events

Event	Detail	Description
vu-activate	VuMenubarActivateDetail	When an item is activated.
vu-check	VuMenubarCheckDetail	When a checkbox item toggles.
vu-select	VuMenubarSelectDetail	When a radio item is selected.

Slots

Slot	Description
prepend	Content before menu items on desktop.
append	Content after menu items on desktop.
prepend-mobile	Content before navigation items in mobile mode.
append-mobile	Content after navigation items in mobile mode.
header	Header content for the mobile drawer.
footer	Footer content for the mobile drawer.

CSS parts

Part	Description
menu-bar	Main menubar container.
menubar-desktop	Desktop menubar region.
menubar-mobile	Mobile chrome.
menu-item	Top-level menu item button.
top-menu	Top-level flyout panel.
nested-menu	Nested flyout panel.
submenu-item	Item within a submenu.

Methods

Method	Description
focusFirst	- Focuses the first top-level menu item.
focusLast	- Focuses the last top-level menu item.
closeMenus	- Closes all open flyouts.
openMenu	- Opens the mobile drawer menu.
closeMenu	- Closes mobile drawer and desktop submenus.
toggleMenu	- Toggles the mobile drawer menu.

Types

Name	Definition
VuMenubarActivateDetail	`{ item: VuMenubarItem; path: string; isSubmenu: boolean; value: unknown; }`
VuMenubarAlign	`"start" \| "center" \| "end"`
VuMenubarCheckDetail	`{ item: VuMenubarItem; path: string; checked: boolean; }`
VuMenubarIndicator	`"none" \| "dot" \| "underline" \| "pill"`
VuMenubarMenuTrigger	`"auto" \| "click" \| "hover"`
VuMenubarPlacement	`"top" \| "bottom" \| "left" \| "right" \| "auto"`
VuMenubarSelectDetail	`{ path: string; group: string; }`
VuMenubarSize	`"sm" \| "md" \| "lg"`
VuMenubarTone	`"subtle" \| "normal" \| "strong"`
VuMenubarVariant	`"outline" \| "flat" \| "elevated"`

Import

Examples

API

Props

Events

Slots

CSS parts

Methods

Types

Related

Navigation

Guides

Browse

Import

Examples

API

Props

Events

Slots

CSS parts

Methods

Types

Related

Navigation

Guides

Browse