Menu Component

The Menu component creates interactive selection interfaces with smooth transitions and accessibility features built-in. Perfect for navigation menus, tab interfaces, and content switching scenarios.

Key Features

• State Management: Automatic handling of selection states

• Event Handling: Built-in change events and callbacks

• Accessibility: ARIA support and keyboard navigation

• Customizable: Flexible styling and configuration options

Basic Usage

Create a simple menu with a list of options:

1
<Menu
2
    name="theme"
3
    items={['Light', 'Dark', 'System']}
4
    defaultItem="System"
5
/>

Working with Menu Items

The Menu component includes a MenuItem component for managing content visibility:

1
<Menu name="tabs" items={['Details', 'Settings']} defaultItem="Details" />
2

3
<MenuItem name="tabs" itemName="Details">
4
  <h3>Product Details</h3>
5
  <p>View detailed information about the product.</p>
6
</MenuItem>
7

8
<MenuItem name="tabs" itemName="Settings">
9
  <h3>Settings Panel</h3>
10
  <p>Configure your preferences and options.</p>
11
</MenuItem>

Custom Event Listeners

The Menu component emits a menu-change event when selection changes:

Waiting for events to be emitted… (Click on the menu to see the events)

1
// Listen for menu changes
2
const menu = document.querySelector('menu-wrapper');
3
menu.addEventListener('menu-change', (event) => {
4
  const { menuName, itemName } = event.detail;
5
  console.log(`Menu: ${menuName}, Selected: ${itemName}`);
6
});

Component API

Menu Props

MenuItem Props

Variants

The Menu component comes with several built-in variants to suit different design needs:

Default

A classic menu with subtle shadows and borders:

Minimal

Clean and simple with bordered items:

Pills

Modern pill-shaped buttons with a frosted glass effect:

Underline

Elegant underlined navigation style:

Segments

Segmented control style with raised active state:

Sizes

Each variant supports multiple sizes via the buttonProps prop:

Small

Medium

Default

Large

Extra Large

Orientation

Menus can be displayed horizontally or vertically:

Horizontal (Default)

Vertical

Full Width

Menus can expand to fill their container:

Regular Width

Full Width

Best Practices

1. Naming

   • Use clear, descriptive menu names
   • Keep item labels concise
   • Ensure unique identifiers

2. Content Organization

   • Group related items together
   • Limit number of options
   • Maintain consistent structure