Dropdown

A composable, accessible Dropdown component for modern React applications.

import { Dropdown } from '@nofinite/nui';

Interactive Preview

A compound menu component for contextual actions anchored to a trigger. Implements controlled open state via internal context, keyboard navigation, focus restoration, and outside-click dismissal.

NUI provides a Dual-Mode Architecture for Dropdown: use Plug and Play (PnP) mode for rapid data-driven menus, or Compound Primitives for complete custom layout control.

Usage

1. Plug and Play (PnP) Mode — Zero Boilerplate

Pass an array of items directly via the data prop. NUI automatically constructs the menu, renders items, handles separators, disabled states, and keyboard navigation without requiring manual subcomponent declarations:

import { Dropdown, Button } from '@nofinite/nui';

export function QuickDropdown() {
  const items = [
    { label: 'View Profile', onClick: () => console.log('Profile') },
    { label: 'Account Settings', onClick: () => console.log('Settings') },
    { type: 'separator' as const },
    { label: 'Billing & Invoices', onClick: () => console.log('Billing') },
    { label: 'Admin Dashboard', disabled: true },
    { type: 'separator' as const },
    { label: 'Log Out', onClick: () => console.log('Logout') },
  ];

  return (
    <Dropdown data={items}>
      <Button variant="outline">Quick Actions</Button>
    </Dropdown>
  );
}

2. Composable Compound Mode — Full Structural Control

When you need custom item markup, badges, custom header blocks, or specific icon layouts, assemble the compound primitives directly:

import { Dropdown, Button } from '@nofinite/nui';

export function CustomDropdown() {
  return (
    <Dropdown>
      <Dropdown.Trigger>
        <Button variant="primary">Options</Button>
      </Dropdown.Trigger>

      <Dropdown.Menu>
        <Dropdown.Item onClick={() => console.log('Profile')}>Profile</Dropdown.Item>
        <Dropdown.Item onClick={() => console.log('Settings')}>Settings</Dropdown.Item>
        <Dropdown.Item onClick={() => console.log('Logout')}>Logout</Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  );
}

End-Aligned Menu

<Dropdown>
  <Dropdown.Trigger>More</Dropdown.Trigger>
  <Dropdown.Menu align="end">
    <Dropdown.Item>Edit</Dropdown.Item>
    <Dropdown.Item>Delete</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

Props Reference

Dropdown (Root)

Dropdown.Trigger

Dropdown.Menu

Dropdown.Item

Subcomponents

• Dropdown.Trigger
• Dropdown.Menu
• Dropdown.Item

Accessibility

• WAI-ARIA Pattern: Adheres strictly to the WAI-ARIA Menu button pattern.
• Keyboard Navigation: ArrowDown / ArrowUp cycles through menu items; Escape closes the menu and restores focus to the trigger button.
• Outside Click: Automatically closes when clicking anywhere outside the menu.
• Focus Restoration: Focus is cleanly returned to the trigger element when the menu closes.

API Reference