Components

Menu

A dropdown list of actions anchored to a trigger.

Usage

Basic

HTML
<bs:bsui-menu>
  <bs:bsui-menu-trigger trigger_label="Actions" trigger_variant="outline" />
  <bs:bsui-menu-popup>
    <bs:bsui-menu-item label="Duplicate" />
    <bs:bsui-menu-item label="Move to archive" />
    <bs:bsui-menu-item label="Delete" />
  </bs:bsui-menu-popup>
</bs:bsui-menu>

Disabled items

Unavailable actions stay visible for context but are skipped by keyboard navigation.

HTML
<bs:bsui-menu>
  <bs:bsui-menu-trigger trigger_label="Deploy" trigger_variant="outline" />
  <bs:bsui-menu-popup>
    <bs:bsui-menu-item label="Deploy to staging" />
    <bs:bsui-menu-item label="Deploy to production" disabled="true" />
    <bs:bsui-menu-item label="Roll back last deploy" disabled="true" />
    <bs:bsui-menu-item label="View build log" />
  </bs:bsui-menu-popup>
</bs:bsui-menu>

Split button

A menu inside a button group, giving the default action a button and the rest a dropdown.

HTML
<bs:bsui-button-group>
  <bs:bsui-button label="Save draft" variant="outline" />
  <bs:bsui-menu>
    <bs:bsui-menu-trigger trigger_label="More" trigger_variant="outline" />
    <bs:bsui-menu-popup>
      <bs:bsui-menu-item label="Save and publish" />
      <bs:bsui-menu-item label="Save as template" />
      <bs:bsui-menu-item label="Save and close" />
    </bs:bsui-menu-popup>
  </bs:bsui-menu>
</bs:bsui-button-group>

Row actions

A ghost kebab on each row, the quiet way per item actions reach a dense list.

API key
Created
Actions
Production
12 March
Staging
4 April
HTML
<bs:bsui-table sortable="false">
  <bs:bsui-table-header>
    <bs:bsui-table-header-cell columnId="key" label="API key" sortable="false" />
    <bs:bsui-table-header-cell columnId="created" label="Created" sortable="false" />
    <bs:bsui-table-header-cell columnId="actions" label="Actions" sortable="false" />
  </bs:bsui-table-header>
  <bs:bsui-table-body>
    <bs:bsui-table-row>
      <bs:bsui-table-cell>Production</bs:bsui-table-cell>
        <bs:bsui-table-cell>12 March</bs:bsui-table-cell>
          <bs:bsui-table-cell>
            <bs:bsui-menu>
              <bs:bsui-menu-trigger trigger_label="⋯" trigger_variant="ghost" trigger_size="icon-sm" />
              <bs:bsui-menu-popup>
                <bs:bsui-menu-item label="Copy key" />
                <bs:bsui-menu-item label="Rotate key" />
                <bs:bsui-menu-item label="Revoke key" />
              </bs:bsui-menu-popup>
            </bs:bsui-menu>
          </bs:bsui-table-cell>
        </bs:bsui-table-row>
        <bs:bsui-table-row>
          <bs:bsui-table-cell>Staging</bs:bsui-table-cell>
            <bs:bsui-table-cell>4 April</bs:bsui-table-cell>
              <bs:bsui-table-cell>
                <bs:bsui-menu>
                  <bs:bsui-menu-trigger trigger_label="⋯" trigger_variant="ghost" trigger_size="icon-sm" />
                  <bs:bsui-menu-popup>
                    <bs:bsui-menu-item label="Copy key" />
                    <bs:bsui-menu-item label="Rotate key" />
                    <bs:bsui-menu-item label="Revoke key" />
                  </bs:bsui-menu-popup>
                </bs:bsui-menu>
              </bs:bsui-table-cell>
            </bs:bsui-table-row>
          </bs:bsui-table-body>
        </bs:bsui-table>

Anatomy

Menu is composed of the blocks below. Each one is a separate block that only renders inside its parent.

  • bsui/menu
  • bsui/menu-popup
  • bsui/menu-item
  • bsui/menu-trigger

Attributes

This block takes no attributes.

bsui/menu-popup

This block takes no attributes.

bsui/menu-item

AttributeTypeDefault
label richtext —
disabled toggle false

bsui/menu-trigger

AttributeTypeDefault
trigger text —
trigger_block text bsui/button
trigger_label richtext —
trigger_icon icon —
trigger_iconPosition left right left
trigger_href text —
trigger_variant default secondary outline ghost link destructive default
trigger_size default sm lg icon icon-sm default
trigger_disabled toggle false