Menus

Ledger UI provides multiple menu components for different navigation patterns.

Sidebar Menu (SideNav)

Vertical navigation with nested items, section groups, and collapse/expand behavior. Used inside MetronicLayout sidebar.

import { SideNav } from '@gtcx/ui';
 
<SideNav
  items={[
    { key: 'home', label: 'Home', icon: <Home />, path: '/' },
    { key: 'users', label: 'Users', icon: <Users />, path: '/users',
      children: [
        { key: 'list', label: 'All Users', path: '/users/list' },
        { key: 'roles', label: 'Roles', path: '/users/roles' },
      ],
    },
  ]}
  activeKey="home"
  collapsed={false}
/>

Dropdown Menu

Context-triggered menu with items, separators, and sub-menus.

import { DropdownMenu } from '@gtcx/ui';
 
<DropdownMenu>
  <DropdownMenu.Trigger><Button>Actions</Button></DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item>Edit</DropdownMenu.Item>
    <DropdownMenu.Separator />
    <DropdownMenu.Item destructive>Delete</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu>

Mega Menu

Multi-column dropdown for deep navigation hierarchies. Used in the mega-menu layout variant.

import { MegaMenu } from '@gtcx/ui';
 
<MegaMenu items={[
  { label: 'Products', columns: [
    { heading: 'Categories', items: [{ label: 'Software', path: '/products/software' }] },
  ]},
]} />

Context Menu

Right-click menu for contextual actions on content.

import { ContextMenu } from '@gtcx/ui';
 
<ContextMenu>
  <ContextMenu.Trigger><div>Right-click target</div></ContextMenu.Trigger>
  <ContextMenu.Content>
    <ContextMenu.Item>Copy</ContextMenu.Item>
    <ContextMenu.Item>Paste</ContextMenu.Item>
  </ContextMenu.Content>
</ContextMenu>

Command Palette

Keyboard-driven search and navigation. Activate with Cmd+K / Ctrl+K.

import { Command } from '@gtcx/ui';
 
<Command>
  <Command.Input placeholder="Search..." />
  <Command.List>
    <Command.Group heading="Pages">
      <Command.Item>Dashboard</Command.Item>
      <Command.Item>Settings</Command.Item>
    </Command.Group>
  </Command.List>
</Command>

Menu Configuration (MetronicLayout)

When using MetronicLayout, menus are configured via the menu prop:

const menu: MetronicMenuConfig = [
  { heading: 'Main', items: [
    { title: 'Dashboard', path: '/', icon: 'LayoutGrid' },
    { title: 'Reports', path: '/reports', icon: 'BarChart3',
      children: [
        { title: 'Monthly', path: '/reports/monthly' },
        { title: 'Annual', path: '/reports/annual' },
      ],
    },
  ]},
  { separator: true },
  { heading: 'Admin', items: [
    { title: 'Settings', path: '/settings', icon: 'Settings' },
  ]},
];

Layout Breadcrumbs