Examples
Default
With group label
Account
Workspace
Basic usage
<brio-dropdown>
<button
class="button"
type="button"
commandfor="dd-basic"
command="toggle-popover"
>
Actions
</button>
<div class="popover dropdown" id="dd-basic" popover role="menu">
<button class="dropdown-item" type="button" role="menuitem">Edit</button>
<button class="dropdown-item" type="button" role="menuitem">
Duplicate
</button>
<hr role="separator" />
<button class="dropdown-item is-danger" type="button" role="menuitem">
Delete
</button>
</div>
</brio-dropdown>
Separator
File
Sharing
<brio-dropdown>
<button
class="button"
type="button"
commandfor="dd-full"
command="toggle-popover"
>
File
</button>
<div class="popover dropdown" id="dd-full" popover role="menu">
<p class="dropdown-label">File</p>
<button class="dropdown-item" type="button" role="menuitem">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path
d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
/>
<polyline points="14 2 14 8 20 8" />
</svg>
New
<kbd>Ctrl+N</kbd>
</button>
<button class="dropdown-item" type="button" role="menuitem">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path
d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"
/>
<polyline points="17 21 17 13 7 13 7 21" />
</svg>
Save
<kbd>Ctrl+S</kbd>
</button>
<hr role="separator" />
<p class="dropdown-label">Sharing</p>
<button class="dropdown-item" type="button" role="menuitem">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<circle cx="18" cy="5" r="3" />
<circle cx="6" cy="12" r="3" />
<circle cx="18" cy="19" r="3" />
<line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
<line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
</svg>
Share
</button>
<button class="dropdown-item" type="button" role="menuitem" disabled>
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
<polyline points="16 6 12 2 8 6" />
<line x1="12" y1="2" x2="12" y2="15" />
</svg>
Export (disabled)
</button>
<hr role="separator" />
<button class="dropdown-item is-danger" type="button" role="menuitem">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<polyline points="3 6 5 6 21 6" />
<path d="M19 6l-2 14a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2L5 6" />
</svg>
Delete
</button>
</div>
</brio-dropdown>
Item state
<brio-dropdown>
<button
class="button"
type="button"
commandfor="dd-state"
command="toggle-popover"
>
Sort by
</button>
<div class="popover dropdown" id="dd-state" popover role="menu">
<button class="dropdown-item" type="button" role="menuitem">
Recently updated
</button>
<button
class="dropdown-item"
type="button"
role="menuitem"
aria-current="true"
>
Recently created
</button>
<button class="dropdown-item" type="button" role="menuitem">
Alphabetical
</button>
<button class="dropdown-item" type="button" role="menuitem" disabled>
Custom (locked)
</button>
</div>
</brio-dropdown>
End-aligned
Trigger near the inline-start edge:
Trigger near the inline-end edge:
<div class="flow">
<div class="cluster is-between">
<span>Trigger near the inline-start edge:</span>
<brio-dropdown>
<button
class="button is-outlined"
type="button"
commandfor="dd-start-align"
command="toggle-popover"
>
Open
</button>
<div class="popover dropdown" id="dd-start-align" popover role="menu">
<button class="dropdown-item" type="button" role="menuitem">
Default alignment
</button>
<button class="dropdown-item" type="button" role="menuitem">
Below, start-aligned
</button>
</div>
</brio-dropdown>
</div>
<div class="cluster is-between">
<span>Trigger near the inline-end edge:</span>
<brio-dropdown>
<button
class="button is-outlined"
type="button"
commandfor="dd-end-align"
command="toggle-popover"
>
Open
</button>
<div
class="popover dropdown is-end"
id="dd-end-align"
popover
role="menu"
>
<button class="dropdown-item" type="button" role="menuitem">
End-aligned
</button>
<button class="dropdown-item" type="button" role="menuitem">
Trailing edges meet
</button>
</div>
</brio-dropdown>
</div>
</div>
Checkmark indicator (customization)
<brio-dropdown>
<button
class="button"
type="button"
commandfor="dd-checked"
command="toggle-popover"
>
Sort by
</button>
<div class="popover dropdown" id="dd-checked" popover role="menu">
<button class="dropdown-item" type="button" role="menuitem">
Recently updated
</button>
<button
class="dropdown-item"
type="button"
role="menuitem"
aria-current="true"
>
Recently created
</button>
<button class="dropdown-item" type="button" role="menuitem">
Alphabetical
</button>
</div>
</brio-dropdown>
In a navbar
<header class="navbar">
<div class="cluster is-between">
<a href="#"><strong>Acme</strong></a>
<nav class="cluster" aria-label="Primary">
<brio-dropdown>
<button
class="nav-link"
type="button"
commandfor="nb-products"
command="toggle-popover"
>
Products
</button>
<div class="popover dropdown" id="nb-products" popover role="menu">
<a class="dropdown-item" href="#" role="menuitem">Analytics</a>
<a class="dropdown-item" href="#" role="menuitem">Workflows</a>
<a class="dropdown-item" href="#" role="menuitem">Reports</a>
<hr role="separator" />
<a class="dropdown-item" href="#" role="menuitem"
>All products</a
>
</div>
</brio-dropdown>
<button
class="nav-link"
type="button"
commandfor="nb-resources"
command="toggle-popover"
>
Resources
</button>
<div class="popover is-lg" id="nb-resources" popover>
<nav aria-label="Resources">
<div class="cluster">
<div class="flow">
<p class="dropdown-label">Learn</p>
<a class="nav-link" href="#">Tutorials</a>
<a class="nav-link" href="#">Guides</a>
<a class="nav-link" href="#">Examples</a>
</div>
<div class="flow">
<p class="dropdown-label">Build</p>
<a class="nav-link" href="#">CLI</a>
<a class="nav-link" href="#">SDKs</a>
<a class="nav-link" href="#">Templates</a>
</div>
<div class="flow">
<p class="dropdown-label">Connect</p>
<a class="nav-link" href="#">Community</a>
<a class="nav-link" href="#">Blog</a>
<a class="nav-link" href="#">Changelog</a>
</div>
</div>
</nav>
</div>
<a href="#" class="nav-link">Pricing</a>
</nav>
<div class="cluster">
<form class="cluster" role="search">
<input
class="input"
type="search"
placeholder="Search..."
aria-label="Search"
/>
</form>
<brio-dropdown>
<button
class="button is-ghost no-chevron"
type="button"
aria-label="Notifications"
commandfor="nb-notifications"
command="toggle-popover"
>
<svg
viewBox="0 0 24 24"
width="20"
height="20"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
<path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
</svg>
</button>
<div
class="popover dropdown is-end"
id="nb-notifications"
popover
role="menu"
>
<p class="dropdown-label">Recent</p>
<button class="dropdown-item" type="button" role="menuitem">
Build #142 succeeded
</button>
<button class="dropdown-item" type="button" role="menuitem">
Sarah commented on PR #87
</button>
<button class="dropdown-item" type="button" role="menuitem">
3 new pull requests
</button>
<hr role="separator" />
<a class="dropdown-item" href="#" role="menuitem"
>View all notifications</a
>
</div>
</brio-dropdown>
<brio-dropdown>
<button
class="button"
type="button"
commandfor="nb-account"
command="toggle-popover"
>
Account
</button>
<div
class="popover dropdown is-end"
id="nb-account"
popover
role="menu"
>
<p class="dropdown-label">Signed in as</p>
<button
class="dropdown-item"
type="button"
role="menuitem"
aria-current="true"
>
patrick@octetic.com
</button>
<hr role="separator" />
<a class="dropdown-item" href="#" role="menuitem">Settings</a>
<a class="dropdown-item" href="#" role="menuitem">Billing</a>
<hr role="separator" />
<button
class="dropdown-item is-danger"
type="button"
role="menuitem"
>
Sign out
</button>
</div>
</brio-dropdown>
</div>
</div>
</header>
Source comments
Dropdown -- action menu inside a popover
Markup:
<brio-dropdown>
<button class="button" type="button"
commandfor="menu" command="toggle-popover">Actions</button>
<div class="popover dropdown" id="menu" popover role="menu">
<button class="dropdown-item" role="menuitem">
<svg aria-hidden="true">...</svg>
Edit
<kbd>E</kbd>
</button>
<hr role="separator">
<button class="dropdown-item is-danger"
role="menuitem">Delete</button>
</div>
</brio-dropdown>
Archetype: Themed veneer + Slotted container (P3). Applied as a second
class on .popover; inherits positioning, animation, and the Safari-quirk
fences from popover.css. Companion JS: <brio-dropdown> wires keyboard
navigation, focus management, scroll-close, and trigger ARIA state.
Reference
Source: src/css/dropdown.css
Applies to
.dropdown.popover
Classes
| Class | Kind | Description |
|---|---|---|
.is-end | variant | End-aligned placement for triggers near the inline-end edge |
.is-danger | variant | Destructive action with danger coloring |
Slots
| Slot | Description |
|---|---|
.dropdown-item | Clickable menu row, also matched by [role="menuitem"] |
.dropdown-label | Group header inside the menu |
.dropdown :is(hr, [role="separator"]) | hr or any element with role="separator" acts as a menu separator |
Tokens
| Token | Default | Description |
|---|---|---|
--dropdown-min-width | 10rem | Minimum width of the menu panel |
--dropdown-padding-block | var(--ui-pad-square-tight) | Block-axis inner padding for the menu panel |
--dropdown-padding-inline | var(--ui-pad-square-tight) | Inline-axis inner padding for the menu panel |
--dropdown-divider-border-color | var(--color-border) | Border color for separator rules between groups |
--popover-padding-inline | var(--dropdown-padding-inline) | Inline-axis padding override for the popover surface |
--popover-padding-block | var(--dropdown-padding-block) | Block-axis padding override for the popover surface |
--popover-max-width | none | Max-width override, uncapped for menus |
--dropdown-item-padding-inline | var(--ui-pad-inline-tight) | Inline-axis padding for menu items |
--dropdown-item-padding-block | var(--ui-pad-block-compact) | Block-axis padding for menu items |
--dropdown-item-color | var(--color-text) | Text color for menu items |
--dropdown-item-bg-hover | var(--color-fill-on-float) | Background color on item hover |
--dropdown-item-bg-current | var(--color-state-fill-on-float) | Background color for the current selection |
--dropdown-item-focus-color | var(--color-fill-on-float) | Focus outline color for the current item's focused state |
--dropdown-item-radius | var(--radius-md) | Border radius for menu items |