Skip to content

Components

Menubar

Component reference

Properties

Use Menubar

Coordinated desktop application command menus with roving triggers and shared open state.

Example import style
menubar.tsxTSX
"use client";

import { FloodRoot, Menubar } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Menubar label="Editor commands" menus={[{id:"file",label:"File",items:[{id:"new",label:"New document"},{id:"export",label:"Export"}]},{id:"edit",label:"Edit",items:[{id:"undo",label:"Undo"},{id:"redo",label:"Redo",disabled:true}]}]} />
    </FloodRoot>
  );
}

Design notes

  • Arrow keys coordinate enabled menu triggers; child menus reuse Menu focus and dismissal.
  • Use native links and NavigationList for destinations, not Menubar. Controlled openValue may refuse transitions.

API reference

PropValuesDefault
labelstringRequired
menusreadonly MenubarMenu[]Required
openValuestring | null—
defaultOpenValuestring | null—
onOpenValueChange(id: string | null) => void—
onAction(menuId: string, actionId: string) => void—
controlSize"sm" | "md" | "lg" | "xl"—
disabledboolean—
Native HTML propsOmit<HTMLAttributes<HTMLDivElement>, "children" | "onAction">Forwarded
View TypeScript source