Officina UI
Components

Dropdown

A trigger-anchored menu of grouped items with icons, shortcuts, and links.

Dropdown is the low-level menu primitive the other menus build on. Pass any trigger element and a list of sections, each an optional heading plus items with label, icon, shortcut, danger, and onClick/href. The panel anchors to the trigger and aligns to start or end. Built on Headless UI, so keyboard navigation, focus management, and outside-click dismissal come for free.

Example

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

<Dropdown
  trigger={<Button variant="secondary">Options</Button>}
  align="end"
  sections={[
    {
      items: [
        { label: 'Rename', onClick: rename },
        { label: 'Delete', danger: true, onClick: remove },
      ],
    },
  ]}
/>;

API

PropTypeDefaultDescription
sections*DropdownSection[]—Grouped menu items, optionally with section headings.
trigger*ReactNode—Element that opens the dropdown when activated.
alignenumendMenu alignment relative to the trigger. Defaults to `'start'`.

Megamenu

A wide dropdown panel that lays out grouped link columns with descriptions and icons.

BottomNavigation

A mobile-style bottom bar of icon-and-label destinations with a controlled active value.

On this page

ExampleAPI