Fluxo UIFluxo UIv0.4.1

MenuNav

A versatile navigation menu component supporting vertical sidebars, horizontal navbars, nested submenus, collapsible groups, and toolbar mode.

Basic Usage

Vertical Menu

A simple vertical navigation menu with icons and a badge.

Selected: home
import { MenuNav } from 'fluxo-ui';

const items = [
  { id: 'home', label: 'Home', icon: <HomeIcon /> },
  { id: 'inbox', label: 'Inbox', icon: <InboxIcon />, badge: <Badge>5</Badge> },
  { id: 'documents', label: 'Documents', icon: <FileIcon /> },
  { id: 'analytics', label: 'Analytics', icon: <ChartIcon /> },
  { id: 'users', label: 'Users', icon: <UsersIcon /> },
  { id: 'settings', label: 'Settings', icon: <SettingsIcon /> },
];

<MenuNav
  items={items}
  defaultSelectedId="home"
  onSelect={(id, item) => console.log(id, item)}
/>

Horizontal

Set orientation="horizontal" for a top navigation bar with dropdown submenus.

Horizontal Menu

A horizontal navigation bar with dropdown submenus.

Selected: home
import { MenuNav } from 'fluxo-ui';

<MenuNav
  items={items}
  orientation="horizontal"
  selectedId={selectedId}
  onSelect={(id) => setSelectedId(id)}
/>

Selection Styles

Use selectionStyle to change how the active item is visually indicated.

Selection Styles

Five different visual styles for the selected menu item.

Border Left

Border Bottom

Background

Arrow

Highlight

import { MenuNav } from 'fluxo-ui';
import type { MenuNavSelectionStyle } from 'fluxo-ui';

<MenuNav
  items={items}
  selectionStyle="border-left"
  selectedId={selectedId}
  onSelect={(id) => setSelectedId(id)}
/>

<MenuNav
  items={items}
  selectionStyle="background"
  selectedId={selectedId}
  onSelect={(id) => setSelectedId(id)}
/>

<MenuNav
  items={items}
  selectionStyle="arrow"
  selectedId={selectedId}
  onSelect={(id) => setSelectedId(id)}
/>

<MenuNav
  items={items}
  selectionStyle="highlight"
  selectedId={selectedId}
  onSelect={(id) => setSelectedId(id)}
/>

Sizes

The size prop controls the overall scale of menu items.

Size Variants

The menu supports five size options from extra small to extra large.

Extra Small (xs)

Small (sm)

Medium (md)

Large (lg)

Extra Large (xl)

import { MenuNav } from 'fluxo-ui';

<MenuNav items={items} size="xs" />
<MenuNav items={items} size="sm" />
<MenuNav items={items} size="md" />
<MenuNav items={items} size="lg" />
<MenuNav items={items} size="xl" />

Nested Menus

Items can have children arrays for multi-level navigation, controlled by maxSubMenuDepth.

Nested Submenus

Up to 3 levels of nested submenus with expand/collapse behavior.

Selected: home
import { MenuNav } from 'fluxo-ui';

const items = [
  { id: 'home', label: 'Home', icon: <HomeIcon /> },
  {
    id: 'settings', label: 'Settings', icon: <SettingsIcon />,
    children: [
      {
        id: 'general', label: 'General',
        children: [
          { id: 'profile', label: 'Profile' },
          { id: 'preferences', label: 'Preferences' },
          {
            id: 'notifications', label: 'Notifications',
            children: [
              { id: 'email-notifs', label: 'Email' },
              { id: 'push-notifs', label: 'Push' },
              { id: 'sms-notifs', label: 'SMS' },
            ],
          },
        ],
      },
      {
        id: 'security', label: 'Security',
        children: [
          { id: 'password', label: 'Password' },
          { id: 'two-factor', label: 'Two-Factor Auth' },
        ],
      },
    ],
  },
];

<MenuNav
  items={items}
  maxSubMenuDepth={3}
  selectedId={selectedId}
  onSelect={(id) => setSelectedId(id)}
/>

Grouped Menus

Use MenuNavGroup objects to organize items into labeled, collapsible sections.

Grouped Menu Items

Menu items organized into collapsible groups with section headers.

Selected: home
import { MenuNav } from 'fluxo-ui';
import type { MenuNavGroup } from 'fluxo-ui';

const items = [
  { id: 'home', label: 'Home', icon: <HomeIcon /> },
  {
    id: 'main-group',
    label: 'Main',
    collapsible: true,
    defaultExpanded: true,
    items: [
      { id: 'inbox', label: 'Inbox', icon: <InboxIcon /> },
      { id: 'starred', label: 'Starred', icon: <StarIcon /> },
      { id: 'documents', label: 'Documents', icon: <FileIcon /> },
    ],
  },
  {
    id: 'analytics-group',
    label: 'Analytics',
    collapsible: true,
    defaultExpanded: true,
    items: [
      { id: 'dashboard', label: 'Dashboard', icon: <ChartIcon /> },
      { id: 'reports', label: 'Reports', icon: <FileIcon /> },
    ],
  },
  {
    id: 'admin-group',
    label: 'Administration',
    collapsible: true,
    defaultExpanded: false,
    items: [
      { id: 'users', label: 'Users', icon: <UsersIcon /> },
      { id: 'security', label: 'Security', icon: <ShieldIcon /> },
      { id: 'settings', label: 'Settings', icon: <SettingsIcon /> },
    ],
  },
];

<MenuNav
  items={items}
  selectedId={selectedId}
  onSelect={(id) => setSelectedId(id)}
/>

Collapsible

Enable collapsible to allow toggling between full and icon-only mode.

Collapsible Sidebar

Toggle between full and icon-only mode. Click the hamburger icon to collapse/expand.

Selected: home

Collapsed: No

import { MenuNav } from 'fluxo-ui';

const [collapsed, setCollapsed] = useState(false);

<MenuNav
  items={items}
  collapsible
  collapsed={collapsed}
  onCollapsedChange={setCollapsed}
  selectedId={selectedId}
  onSelect={(id) => setSelectedId(id)}
/>

Toolbar Mode

Set toolbar for an application-style menu bar with dropdown items.

Toolbar Mode

A horizontal toolbar-style menu, typical of application menu bars.

import { MenuNav } from 'fluxo-ui';

const items = [
  { id: 'file', label: 'File', children: [
    { id: 'new', label: 'New' },
    { id: 'open', label: 'Open' },
    { id: 'save', label: 'Save' },
  ]},
  { id: 'edit', label: 'Edit', children: [
    { id: 'undo', label: 'Undo' },
    { id: 'redo', label: 'Redo' },
    { id: 'copy', label: 'Copy' },
  ]},
  { id: 'view', label: 'View', children: [
    { id: 'zoom-in', label: 'Zoom In' },
    { id: 'zoom-out', label: 'Zoom Out' },
  ]},
  { id: 'help', label: 'Help', children: [
    { id: 'docs', label: 'Documentation' },
    { id: 'about', label: 'About' },
  ]},
];

<MenuNav
  items={items}
  toolbar
  selectedId={selectedId}
  onSelect={(id) => setSelectedId(id)}
/>

Custom Slots

Use headerSlot, footerSlot, and showSearch to add custom content around the menu.

Header, Footer & Search

Custom header and footer slots with built-in search functionality.

Selected: home
import { MenuNav } from 'fluxo-ui';

<MenuNav
  items={items}
  showSearch
  searchPlaceholder="Search menu..."
  headerSlot={
    <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--eui-border)' }}>
      <div style={{ fontWeight: 600, fontSize: '14px' }}>Acme Inc.</div>
      <div style={{ fontSize: '12px', opacity: 0.6 }}>Workspace</div>
    </div>
  }
  footerSlot={
    <div style={{ padding: '12px 16px', borderTop: '1px solid var(--eui-border)', display: 'flex', alignItems: 'center', gap: '8px' }}>
      <div style={{ width: 32, height: 32, borderRadius: '50%', background: 'var(--eui-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: '13px', fontWeight: 600 }}>JD</div>
      <div>
        <div style={{ fontSize: '13px', fontWeight: 500 }}>John Doe</div>
        <div style={{ fontSize: '11px', opacity: 0.6 }}>john@acme.com</div>
      </div>
    </div>
  }
  selectedId={selectedId}
  onSelect={(id) => setSelectedId(id)}
/>

Import

import { MenuNav } from 'fluxo-ui';
import type { MenuNavProps, MenuNavItem, MenuNavGroup, MenuNavSize, MenuNavSelectionStyle } from 'fluxo-ui';

Props

itemsreq
(MenuNavItem | MenuNavGroup)[]

Array of menu items or groups to render.

orientation
'vertical' | 'horizontal'"'vertical'"

Layout orientation of the menu.

size
'xs' | 'sm' | 'md' | 'lg' | 'xl'"'md'"

Size of menu items.

selectedId
string

Controlled selected item ID.

defaultSelectedId
string"''"

Default selected item ID for uncontrolled usage.

onSelect
(id: string, item: MenuNavItem) => void

Callback when a menu item is selected.

selectionStyle
'border-left' | 'border-bottom' | 'background' | 'arrow' | 'highlight'"'border-left'"

Visual style for the selected item indicator.

iconPosition
'left' | 'right'"'left'"

Position of icons relative to label text.

collapsed
boolean

Controlled collapsed state (icon-only mode).

collapsible
boolean"false"

Whether the menu can be collapsed to icon-only mode.

onCollapsedChange
(collapsed: boolean) => void

Callback when collapsed state changes.

mobileBreakpoint
number"768"

Viewport width below which mobile mode activates.

mobileFullScreen
boolean"true"

Whether mobile menu takes full screen.

showSearch
boolean"false"

Show a search input to filter menu items.

searchPlaceholder
string"'Search...'"

Placeholder text for the search input.

searchAriaLabel
string"'Search navigation'"

Accessible label for the search input (used for screen readers).

headerSlot
ReactNode

Custom content rendered above the menu.

footerSlot
ReactNode

Custom content rendered below the menu.

maxSubMenuDepth
number"3"

Maximum depth of nested submenus.

toolbar
boolean"false"

Enable toolbar mode (horizontal with border-bottom selection).

className
string

Additional CSS class for the nav element.

ariaLabel
string"'Navigation'"

ARIA label for the nav element.

Features

Dual Orientation

Vertical sidebar or horizontal navbar layout with automatic style adjustments.

Nested Submenus

Supports up to 3 levels of nested submenus with expand/collapse.

Selection Styles

Five distinct visual styles for highlighting the active menu item.

Collapsible Sidebar

Toggle between full menu and compact icon-only mode.

Grouped Items

Organize items into collapsible groups with section headers.

Mobile Responsive

Automatic mobile mode with fullscreen overlay and drill-down navigation.