Components

Context Menu

Actions surfaced on right click, anchored to the pointer.

Usage

Basic

Right click anywhere in this area

HTML

<bs:bsui-context-menu>
  <bs:bsui-context-menu-trigger>
    <bs:bsui-text content="Right click anywhere in this area" variant="muted" />
  </bs:bsui-context-menu-trigger>
  <bs:bsui-context-menu-popup>
    <bs:bsui-context-menu-item label="Duplicate" />
    <bs:bsui-context-menu-item label="Rename" />
    <bs:bsui-context-menu-item label="Delete" />
  </bs:bsui-context-menu-popup>
</bs:bsui-context-menu>

On a card

The trigger takes inner blocks, so a whole card becomes the right click target.

Northwind API

Right click anywhere on the card for project actions.

Production Europe

HTML

<bs:bsui-context-menu>
  <bs:bsui-context-menu-trigger>
    <bs:bsui-card>
      <bs:bsui-card-header>
        <bs:bsui-card-title label="Northwind API" />
        <bs:bsui-card-description label="Right click anywhere on the card for project actions." />
      </bs:bsui-card-header>
      <bs:bsui-card-content>
        <bs:bsui-stack direction="row" gap="2">
          <bs:bsui-badge label="Production" variant="success" />
          <bs:bsui-badge label="Europe" variant="secondary" />
        </bs:bsui-stack>
      </bs:bsui-card-content>
    </bs:bsui-card>
  </bs:bsui-context-menu-trigger>
  <bs:bsui-context-menu-popup>
    <bs:bsui-context-menu-item label="Open in new tab" />
    <bs:bsui-context-menu-item label="Rename project" />
    <bs:bsui-context-menu-item label="Duplicate" />
    <bs:bsui-context-menu-item label="Move to archive" />
  </bs:bsui-context-menu-popup>
</bs:bsui-context-menu>

Media tile

A fixed ratio tile as the target, the shape a media library needs.

hero-banner.png

HTML

<bs:bsui-context-menu>
  <bs:bsui-context-menu-trigger>
    <bs:bsui-aspect-ratio ratio="4/3" background="var(--bs-ui-muted)">
      <bs:bsui-text content="hero-banner.png" variant="muted" />
    </bs:bsui-aspect-ratio>
  </bs:bsui-context-menu-trigger>
  <bs:bsui-context-menu-popup>
    <bs:bsui-context-menu-item label="Replace image" />
    <bs:bsui-context-menu-item label="Download original" />
    <bs:bsui-context-menu-item label="Copy file URL" />
    <bs:bsui-context-menu-item label="Delete from library" />
  </bs:bsui-context-menu-popup>
</bs:bsui-context-menu>

Anatomy

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

bsui/context-menu
bsui/context-menu-popup
bsui/context-menu-item
bsui/context-menu-trigger

Attributes

This block takes no attributes.

`bsui/context-menu-popup`

This block takes no attributes.

`bsui/context-menu-item`

Attribute	Type	Default
`label`	`richtext`	—

`bsui/context-menu-trigger`

This block takes no attributes.