Brand Dropdown · Snyder brandOS

Component primitive

<brand-dropdown> wraps Web Awesome's <wa-dropdown>. Put a trigger element in the trigger slot and a <brand-menu> in the default slot.

<brand-dropdown>Framework-agnostic custom element

Light themeSemantic surface

Dark themeSame component API

Element: <brand-dropdown>
Library: Brand
Runtime: Web Component
Theming: Semantic tokens

Basic

Actions

Edit

Duplicate

Delete

Options

Sort by

Name

Date modified

Size

View

Grid

List

With icons

File

New

Open

Save

Delete

Placements

Top

Option A

Option B

Right

Option A

Option B

Left

Option A

Option B

Usage

import { BrandDropdown, BrandMenu } from '@brandos/ui';

<brand-dropdown placement="bottom-start">
  <brand-button slot="trigger" variant="natural">Actions</brand-button>
  <brand-menu>
    <wa-dropdown-item value="edit">Edit</wa-dropdown-item>
    <wa-dropdown-item value="delete">Delete</wa-dropdown-item>
  </brand-menu>
</brand-dropdown>