Menubar Component

Overview

The Menubar component provides a horizontal menu bar interface commonly used in desktop applications. It supports nested menus, shortcuts, separators, and various menu item types.

Basic Usage

import { Menubar } from '@dashflowx/core'

export default function MenubarExample() {
  const menus = [
    {
      label: 'File',
      items: [
        { type: 'item', label: 'New Tab', shortcut: '⌘T' },
        { type: 'item', label: 'New Window', shortcut: '⌘N' },
        { type: 'separator' },
        { type: 'item', label: 'Print...', shortcut: '⌘P' },
      ],
    },
    {
      label: 'Edit',
      items: [
        { type: 'item', label: 'Undo', shortcut: '⌘Z' },
        { type: 'item', label: 'Redo', shortcut: '⇧⌘Z' },
        { type: 'separator' },
        { type: 'item', label: 'Cut' },
        { type: 'item', label: 'Copy' },
        { type: 'item', label: 'Paste' },
      ],
    },
  ];

  return (
    <Menubar menus={menus} />
  )
}

Preview:

Different Variants

Compact Variant

Large Variant

Dark Theme

Custom Background Color

Custom Menus

Props

Prop	Type	Default	Description
`className`	`string`	`''`	Additional CSS classes
`menus`	`MenubarMenuConfig[]`	`[]`	Array of menu configurations
`backgroundColor`	`string`	`undefined`	Background color variant
`backgroundIntensity`	`string`	`undefined`	Background color intensity (100-900)
`customBgColor`	`string`	`undefined`	Custom background color (hex)
`variant`	`'default' \| 'compact' \| 'large'`	`'default'`	Size variant
`theme`	`'light' \| 'dark'`	`'light'`	Theme variant
`onItemClick`	`function`	`undefined`	Callback when menu item is clicked

interface MenubarMenuConfig {
  label: string;
  items: MenubarMenuItem[];
}

interface MenubarMenuItem {
  type: 'item' | 'separator' | 'submenu' | 'checkbox' | 'radio-group';
  label?: string;
  shortcut?: string;
  disabled?: boolean;
  checked?: boolean;
  inset?: boolean;
  onClick?: () => void;
  children?: MenubarSubItem[];
  radioItems?: { value: string; label: string }[];
  radioValue?: string;
}

interface MenubarSubItem {
  type: 'item' | 'separator';
  label?: string;
  shortcut?: string;
  disabled?: boolean;
  onClick?: () => void;
}

Components

Menubar

The main menubar container component.

MenubarMenu

Container for individual menu items and their content.

MenubarTrigger

The clickable trigger element for opening menus.

MenubarContent

The dropdown content container for menu items.

MenubarItem

Individual menu items within a menu.

MenubarSeparator

Visual separator between menu items.

MenubarShortcut

Keyboard shortcut display for menu items.

MenubarSub

Container for submenu items.

MenubarSubTrigger

Trigger element for opening submenus.

MenubarSubContent

Content container for submenu items.

MenubarCheckboxItem

Menu item with checkbox functionality.

MenubarRadioItem

Menu item with radio button functionality.

MenubarRadioGroup

Container for radio button menu items.

Examples

Basic Menubar

import { Menubar } from '@dashflowx/core'

export default function BasicMenubar() {
  return (
    <Menubar />
  )
}

Preview:

Custom Styled Menubar

import { Menubar } from '@dashflowx/core'

export default function CustomStyledMenubar() {
  return (
    <Menubar className="border-2 border-blue-500 rounded-xl" />
  )
}

Preview:

Application Menubar with Props

import { Menubar } from '@dashflowx/core'

export default function ApplicationMenubar() {
  const menus = [
    {
      label: 'File',
      items: [
        { type: 'item', label: 'New Tab', shortcut: '⌘T' },
        { type: 'item', label: 'New Window', shortcut: '⌘N' },
        { type: 'separator' },
        { type: 'item', label: 'Print...', shortcut: '⌘P' },
      ],
    },
    {
      label: 'Edit',
      items: [
        { type: 'item', label: 'Undo', shortcut: '⌘Z' },
        { type: 'item', label: 'Redo', shortcut: '⇧⌘Z' },
        { type: 'separator' },
        { type: 'item', label: 'Cut' },
        { type: 'item', label: 'Copy' },
        { type: 'item', label: 'Paste' },
      ],
    },
  ];

  return (
    <Menubar 
      menus={menus}
      variant="default"
      theme="light"
      className="border border-gray-200 rounded-lg"
    />
  )
}

Preview:

Menubar with Submenus

import { Menubar } from '@dashflowx/core'

export default function MenubarWithSubmenus() {
  const menus = [
    {
      label: 'Tools',
      items: [
        {
          type: 'submenu',
          label: 'Export',
          children: [
            { type: 'item', label: 'Export as PDF' },
            { type: 'item', label: 'Export as Excel' },
            { type: 'item', label: 'Export as CSV' },
          ],
        },
        { type: 'separator' },
        {
          type: 'submenu',
          label: 'Import',
          children: [
            { type: 'item', label: 'Import from CSV' },
            { type: 'item', label: 'Import from Excel' },
          ],
        },
      ],
    },
  ];

  return (
    <Menubar 
      menus={menus}
      variant="default"
      backgroundColor="blue"
      backgroundIntensity="500"
    />
  )
}

Preview:

Common Use Cases

import { Menubar } from '@dashflowx/core'

const fileMenu = {
  label: 'File',
  items: [
    { type: 'item', label: 'New Document', shortcut: '⌘N' },
    { type: 'item', label: 'Open Document', shortcut: '⌘O' },
    { type: 'separator' },
    { type: 'item', label: 'Save', shortcut: '⌘S' },
    { type: 'item', label: 'Save As...', shortcut: '⇧⌘S' },
    { type: 'separator' },
    { type: 'item', label: 'Print', shortcut: '⌘P' },
  ],
};

<Menubar menus={[fileMenu]} variant="default" />

import { Menubar } from '@dashflowx/core'

const editMenu = {
  label: 'Edit',
  items: [
    { type: 'item', label: 'Undo', shortcut: '⌘Z' },
    { type: 'item', label: 'Redo', shortcut: '⇧⌘Z' },
    { type: 'separator' },
    { type: 'item', label: 'Cut', shortcut: '⌘X' },
    { type: 'item', label: 'Copy', shortcut: '⌘C' },
    { type: 'item', label: 'Paste', shortcut: '⌘V' },
    { type: 'separator' },
    { type: 'item', label: 'Find', shortcut: '⌘F' },
    { type: 'item', label: 'Replace', shortcut: '⌘H' },
  ],
};

<Menubar menus={[editMenu]} variant="compact" />

import { Menubar } from '@dashflowx/core'

const viewMenu = {
  label: 'View',
  items: [
    { type: 'checkbox', label: 'Show Toolbar', checked: true },
    { type: 'checkbox', label: 'Show Status Bar', checked: true },
    { type: 'separator' },
    { type: 'item', label: 'Zoom In', shortcut: '⌘+' },
    { type: 'item', label: 'Zoom Out', shortcut: '⌘-' },
    { type: 'item', label: 'Reset Zoom', shortcut: '⌘0' },
  ],
};

<Menubar menus={[viewMenu]} theme="dark" />

import { Menubar } from '@dashflowx/core'

const settingsMenu = {
  label: 'Settings',
  items: [
    {
      type: 'radio-group',
      label: 'Theme',
      radioValue: 'light',
      radioItems: [
        { value: 'light', label: 'Light Theme' },
        { value: 'dark', label: 'Dark Theme' },
        { value: 'auto', label: 'Auto Theme' },
      ],
    },
    { type: 'separator' },
    { type: 'item', label: 'Preferences', shortcut: '⌘,' },
    { type: 'item', label: 'Account Settings' },
  ],
};

<Menubar menus={[settingsMenu]} variant="large" />

Best Practices

1. Logical Grouping

Group related menu items together with separators.

// ✅ Good - Logical grouping
<MenubarContent>
  <MenubarItem>New</MenubarItem>
  <MenubarItem>Open</MenubarItem>
  <MenubarSeparator />
  <MenubarItem>Save</MenubarItem>
  <MenubarItem>Save As</MenubarItem>
  <MenubarSeparator />
  <MenubarItem>Print</MenubarItem>
</MenubarContent>

// ❌ Avoid - No grouping
<MenubarContent>
  <MenubarItem>New</MenubarItem>
  <MenubarItem>Save</MenubarItem>
  <MenubarItem>Open</MenubarItem>
  <MenubarItem>Print</MenubarItem>
</MenubarContent>

2. Consistent Shortcuts

Use consistent keyboard shortcuts across your application.

// ✅ Good - Consistent shortcuts
<MenubarItem>New <MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>
<MenubarItem>Open <MenubarShortcut>⌘O</MenubarShortcut></MenubarItem>
<MenubarItem>Save <MenubarShortcut>⌘S</MenubarShortcut></MenubarItem>

// ❌ Avoid - Inconsistent shortcuts
<MenubarItem>New <MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>
<MenubarItem>Open <MenubarShortcut>⌘P</MenubarShortcut></MenubarItem>
<MenubarItem>Save <MenubarShortcut>⌘Q</MenubarShortcut></MenubarItem>

3. Clear Menu Labels

Use clear and descriptive menu labels.

// ✅ Good - Clear labels
<MenubarTrigger>File</MenubarTrigger>
<MenubarTrigger>Edit</MenubarTrigger>
<MenubarTrigger>View</MenubarTrigger>

// ❌ Avoid - Unclear labels
<MenubarTrigger>Stuff</MenubarTrigger>
<MenubarTrigger>Things</MenubarTrigger>
<MenubarTrigger>Options</MenubarTrigger>

4. Appropriate Menu Depth

Avoid too many nested submenus.

// ✅ Good - Reasonable depth
<MenubarSub>
  <MenubarSubTrigger>Export</MenubarSubTrigger>
  <MenubarSubContent>
    <MenubarItem>PDF</MenubarItem>
    <MenubarItem>Excel</MenubarItem>
  </MenubarSubContent>
</MenubarSub>

// ❌ Avoid - Too deep nesting
<MenubarSub>
  <MenubarSubTrigger>Export</MenubarSubTrigger>
  <MenubarSubContent>
    <MenubarSub>
      <MenubarSubTrigger>Formats</MenubarSubTrigger>
      <MenubarSubContent>
        <MenubarSub>
          <MenubarSubTrigger>Document</MenubarSubTrigger>
          <MenubarSubContent>
            <MenubarItem>PDF</MenubarItem>
          </MenubarSubContent>
        </MenubarSub>
      </MenubarSubContent>
    </MenubarSub>
  </MenubarSubContent>
</MenubarSub>

5. Accessible Menus

Ensure menus are accessible to all users.

// ✅ Good - Accessible
<MenubarItem>Clear and descriptive action</MenubarItem>

// ❌ Avoid - Unclear actions
<MenubarItem>Click here</MenubarItem>

Customization

Custom Styling

You can customize the menubar appearance using CSS classes:

<Menubar className="border-2 border-blue-500 rounded-xl bg-blue-50" />

Different Themes

Use different themes for different contexts:

// Light theme
<Menubar className="bg-white border-gray-200" />

// Dark theme
<Menubar className="bg-gray-900 border-gray-700 text-white" />

// Brand theme
<Menubar className="bg-blue-600 border-blue-500 text-white" />

Size Variations

Use different sizes for different emphasis levels:

// Compact menubar
<Menubar className="text-sm py-1" />

// Standard menubar
<Menubar className="text-base py-2" />

// Large menubar
<Menubar className="text-lg py-3" />

Advanced Usage

Create dynamic menu items based on state:

const [recentFiles, setRecentFiles] = useState([]);

<MenubarContent>
  <MenubarItem>New</MenubarItem>
  <MenubarItem>Open</MenubarItem>
  {recentFiles.length > 0 && (
    <>
      <MenubarSeparator />
      {recentFiles.map((file) => (
        <MenubarItem key={file.id}>{file.name}</MenubarItem>
      ))}
    </>
  )}
</MenubarContent>

Show/hide menu items based on conditions:

const [isLoggedIn, setIsLoggedIn] = useState(false);

<MenubarContent>
  <MenubarItem>Home</MenubarItem>
  {isLoggedIn ? (
    <MenubarItem>Profile</MenubarItem>
  ) : (
    <MenubarItem>Login</MenubarItem>
  )}
</MenubarContent>

Handle menu item actions:

const handleMenuAction = (action: string) => {
  switch (action) {
    case 'new':
      createNewDocument();
      break;
    case 'open':
      openDocument();
      break;
    case 'save':
      saveDocument();
      break;
    default:
      console.log('Unknown action:', action);
  }
};

DropdownMenu: For dropdown menus
ContextMenu: For right-click menus
NavigationMenu: For navigation menus
Button: For menu triggers
Separator: For menu separators

API Reference

For the complete API reference and advanced usage patterns, see the Menubar API documentation.

Overview

Basic Usage

Different Variants

Compact Variant

Large Variant

Dark Theme

Custom Background Color

Custom Menus

Props

Menu Configuration Types

Components

Menubar

MenubarMenu

MenubarTrigger

MenubarContent

MenubarItem

MenubarSeparator

MenubarShortcut

MenubarSub

MenubarSubTrigger

MenubarSubContent

MenubarCheckboxItem

MenubarRadioItem

MenubarRadioGroup

Examples

Basic Menubar

Custom Styled Menubar

Application Menubar with Props

Menubar with Submenus

Common Use Cases

File Menu

Edit Menu

View Menu with Checkboxes

Settings Menu with Radio Groups

Best Practices

1. Logical Grouping

2. Consistent Shortcuts

3. Clear Menu Labels

4. Appropriate Menu Depth

5. Accessible Menus

Customization

Custom Styling

Different Themes

Size Variations

Advanced Usage

Dynamic Menu Items

Conditional Menu Items

Menu Item Actions

Related Components

API Reference