Design System Beacon

Overview

The Menu component is a flexible sidebar navigation that displays menu items, user information, and optional actions. It supports multiple responsive variants to adapt to different screen sizes and use cases.

Menu items support interactive states (hover, selected, onClick), custom icons, and click handlers. Items automatically highlight on hover and can be marked as selected for active navigation states.

The Menu component supports customization through render props, allowing you to replace the default Switch, toggle button, and menu button with your own components. This makes it easy to integrate the Menu into different projects with varying requirements.

All menu styles are built using design tokens, ensuring consistency across themes and hues. Use the interactive playground below to explore all available combinations.

Interactive Playground

Use the controls to customize the menu and see how it looks in real-time. Toggle between variants, themes, and hues to see how menus adapt to different contexts.

Anatomy

A menu consists of a header section, menu items list, optional button, and footer elements. The layout adapts based on the selected variant.

Variants & States

Menus come in different responsive variants to fit various screen sizes and use cases.

Usage Guidelines

Do

Use menus for primary navigation in applications.
Use desktop variant for large screens (desktop, laptop).
Use tablet/mobile variants for smaller screens with appropriate open/closed states.
Provide clear, descriptive labels for menu items.
Use icons to enhance visual recognition of menu items.
Include a header section with user information when appropriate.
Use chevrons to indicate items with sub-menus or navigation.

Don't

Don't use menus for immediate actions (use buttons instead).
Don't nest menu items too deeply (keep hierarchy shallow).
Don't use too many menu items (consider grouping or categorization).
Don't use menu variants inconsistently across screen sizes.
Don't hide critical navigation behind closed menu states on mobile.
Don't use menus without clear visual hierarchy.
Don't forget to provide keyboard navigation support.

Accessibility

Always provide proper ARIA labels and roles for menu components.
Ensure keyboard navigation support (Arrow keys, Enter, Escape).
Provide focus indicators for all interactive elements.
Use semantic HTML elements where possible.
Ensure sufficient color contrast for all text and icons.
Provide alternative text for icons when they convey meaning.
Support screen reader announcements for menu state changes.

API Reference

Menu component props and types.

MenuProps

interface MenuItem {
                id: string;
                label: string;
                icon?: React.ReactNode;
                selected?: boolean;
                onClick?: (item: MenuItem) => void;
              }

              interface SwitchRenderProps {
                checked: boolean;
                onChange: (checked: boolean) => void;
              }

              interface ToggleButtonRenderProps {
                isOpen: boolean;
                onClick: () => void;
              }

              interface MenuButtonRenderProps {
                onClick: () => void;
              }

              interface MenuProps {
                variant?: "desktop" | "tablet-open" | "tablet-closed" | "mobile-open" | "mobile-closed" | "close-menu";
                showMenu?: boolean;
                showButton?: boolean;
                menuItems?: MenuItem[];
                headerTitle?: string;
                headerSubtitle?: string;
                showChevrons?: boolean;
                avatarImageUrl?: string;
                selectedItemId?: string;
                onItemClick?: (item: MenuItem) => void;
                renderSwitch?: (props: SwitchRenderProps) => React.ReactNode;
                renderToggleButton?: (props: ToggleButtonRenderProps) => React.ReactNode;
                renderButton?: (props: MenuButtonRenderProps) => React.ReactNode;
                onSwitchChange?: (checked: boolean) => void;
                onToggleButtonClick?: () => void;
                onButtonClick?: () => void;
              }

Props

variant

"desktop"

Responsive variant of the menu. Controls layout, width, and visibility of elements.

showMenu

boolean

true

Whether to show the menu items list. Only applies to variants that support menu items.

showButton

boolean

true

Whether to show the optional action button in the menu.

menuItems

MenuItem[]

[]

Array of menu items to display. Each item has an id, label, and optional icon, selected state, and onClick handler.

headerTitle

string

"Title"

Title text displayed in the header section.

headerSubtitle

string

"Subtitle"

Subtitle text displayed in the header section.

showChevrons

boolean

true

Whether to show chevron arrows on menu items. Useful for indicating sub-menus or navigation.

avatarImageUrl

string

undefined

Optional URL for the avatar image. If not provided, a default icon is displayed.

selectedItemId

string

undefined

ID of the currently selected menu item. The selected item will be highlighted with primary tonal background.

onItemClick

(item: MenuItem) => void

undefined

Callback function called when a menu item is clicked. Receives the clicked MenuItem as parameter.

renderSwitch

(props: SwitchRenderProps) => React.ReactNode

undefined

Render prop to customize or replace the Switch component. Receives checked state and onChange handler. If not provided, uses default Switch component.

renderToggleButton

(props: ToggleButtonRenderProps) => React.ReactNode

undefined

Render prop to customize or replace the toggle button (menu/close icon). Receives isOpen state and onClick handler. If not provided, uses default button with icons.

renderButton

(props: MenuButtonRenderProps) => React.ReactNode

undefined

Render prop to customize or replace the menu action button. Receives onClick handler. If not provided, uses default button with DownloadIcon.

onSwitchChange

(checked: boolean) => void

undefined

Callback function called when the Switch value changes. Useful for handling theme toggling or other switch-related functionality.

onToggleButtonClick

() => void

undefined

Callback function called when the toggle button is clicked. Useful for handling menu open/close state.

onButtonClick

() => void

undefined

Callback function called when the menu action button is clicked. Useful for handling button-specific actions.

MenuItem

interface MenuItem {
                    id: string;
                    label: string;
                    icon?: React.ReactNode;
                    selected?: boolean;
                    onClick?: (item: MenuItem) => void;
                  }

MenuItem Properties

id

string

Unique identifier for the menu item. Used for selection and click handling.

label

string

Display text for the menu item.

icon

React.ReactNode

Optional custom icon component. If not provided, defaults to UserPersonIcon. Can be any React node (e.g., icon from beacon-icons).

selected

boolean

Whether this menu item is selected. Overrides selectedItemId prop if both are provided.

onClick

(item: MenuItem) => void

Optional per-item click handler. Called when this specific item is clicked, in addition to the global onItemClick handler.

Usage Examples

Copyable code snippets for common menu item use cases.

Basic Menu Item

import { MenuItem } from 'beacon-ui';
import { SettingsGearIcon } from 'beacon-icons';

<MenuItem 
  menuTitle="Settings"
  iconStart={true}
  iconStart1={<SettingsGearIcon size={20} />}
  iconEnd={true}
/>

Menu Item States

import { MenuItem } from 'beacon-ui';
import { UserPersonIcon } from 'beacon-icons';

<MenuItem 
  menuTitle="Default"
  iconStart={true}
  iconStart1={<UserPersonIcon size={20} />}
  iconEnd={true}
  state="Default"
/>

<MenuItem 
  menuTitle="Active"
  iconStart={true}
  iconStart1={<UserPersonIcon size={20} />}
  iconEnd={true}
  state="Active"
/>

<MenuItem 
  menuTitle="Disabled"
  iconStart={true}
  iconStart1={<UserPersonIcon size={20} />}
  iconEnd={true}
  state="Disabled"
/>

Menu

Overview

Interactive Playground

Anatomy

Variants & States

Desktop

Tablet Open

Tablet Closed

Mobile Open

Mobile Closed

Close Menu

Usage Guidelines

Accessibility

API Reference

MenuProps

Props

MenuItem

MenuItem Properties

Usage Examples

Basic Menu Item

Menu Item States