Dropdown

A popover menu using the <primus-dropdown> web component from @primus/ui-core. Requires the JS bundle.

Preview · Dropdown

Code

HTML · @primus/ui-core

<!-- Basic dropdown -->
<primus-dropdown>
  <button class="outline small" popovertarget="my-menu">Options ▾</button>
  <menu popover id="my-menu">
    <button role="menuitem">Edit</button>
    <button role="menuitem">Duplicate</button>
    <div role="separator"></div>
    <button role="menuitem" data-variant="danger">Delete</button>
  </menu>
</primus-dropdown>

<!-- Split button: primary action + dropdown for secondary -->
<primus-dropdown>
  <menu class="buttons">
    <li><button class="outline">Save</button></li>
    <li>
      <button class="outline" popovertarget="save-options"
        aria-label="More save options">▾</button>
    </li>
  </menu>
  <menu popover id="save-options">
    <button role="menuitem">Save draft</button>
    <button role="menuitem">Save and publish</button>
    <button role="menuitem">Duplicate</button>
  </menu>
</primus-dropdown>

<!-- With icons in menu items -->
<primus-dropdown>
  <button popovertarget="icon-menu">More ▾</button>
  <menu popover id="icon-menu">
    <button role="menuitem">Edit record</button>
    <button role="menuitem">Export as CSV</button>
    <button role="menuitem">View audit log</button>
    <div role="separator"></div>
    <button role="menuitem" data-variant="danger">Delete permanently</button>
  </menu>
</primus-dropdown>

React

// Declare the web component type (add to a global.d.ts)
declare namespace JSX {
  interface IntrinsicElements {
    'primus-dropdown': React.HTMLAttributes<HTMLElement>;
  }
}

function RowActions({ row, onEdit, onDelete }) {
  return (
    <primus-dropdown>
      <button
        className="ghost icon small"
        popovertarget={`row-menu-${row.id}`}
        aria-label="Row actions">
        ⋯
      </button>
      <menu popover id={`row-menu-${row.id}`}>
        <button role="menuitem" onClick={() => onEdit(row)}>Edit</button>
        <button role="menuitem" onClick={() => navigator.clipboard.writeText(row.id)}>
          Copy ID
        </button>
        <div role="separator" />
        <button role="menuitem" data-variant="danger"
          onClick={() => onDelete(row)}>
          Delete
        </button>
      </menu>
    </primus-dropdown>
  );
}

Angular

<!-- row-actions.component.html -->
<primus-dropdown>
  <button class="ghost icon small"
    [attr.popovertarget]="'row-menu-' + row.id"
    aria-label="Row actions">⋯</button>
  <menu popover [id]="'row-menu-' + row.id">
    <button role="menuitem" (click)="onEdit()">Edit</button>
    <button role="menuitem" (click)="onDuplicate()">Duplicate</button>
    <div role="separator"></div>
    <button role="menuitem" data-variant="danger"
      (click)="onDelete()">Delete</button>
  </menu>
</primus-dropdown>

Props

<primus-dropdown> is a Web Component. It positions and manages the popover menu automatically.

Element	Attribute	Description
Trigger button	popovertarget="id"	ID of the <menu popover> to toggle
Menu	popover	Native popover attribute — browser positions + dismisses automatically
Menu items	role="menuitem"	Marks each button as a menu item for accessibility
Separator	role="separator"	Divider line between groups
Danger item	data-variant="danger"	Red colour for destructive actions

Version history

See the Changelog for version history and breaking changes.