Menu

Menu is a thin wrapper over Dropdown that takes its trigger as children — hand it any element (a Button, an avatar) and it becomes the menu opener. The menu itself is described by sections, each an optional heading plus a list of items with label, icon, shortcut, and onClick/href. Control which edge it aligns to with align.

Example

import { Menu, Button } from '@officina/ui';

<Menu
  sections={[
    {
      heading: 'Account',
      items: [
        { label: 'Profile', href: '/profile' },
        { label: 'Sign out', onClick: signOut },
      ],
    },
  ]}
>
  <Button variant="secondary">Account</Button>
</Menu>;

API