Dropdowns

Dropdowns provide contextual menus, actions, or navigation options in a compact overlay triggered by a button or other interactive element.

Basic Usage

Create a dropdown by combining a trigger element (using slot="trigger") with dropdown items.

Basic Dropdown

100%

Options

Edit

Duplicate

Icons and Rich Content

Enhance dropdown items with icons and different styles to improve visual hierarchy and recognition.

Rich Dropdowns

100%

John Doe

View Profile

Settings

Sign out

Edit

Duplicate

Archive

Delete

<div class="flex items-center gap-4">
    <!-- User Menu -->
    <byte-dropdown>
      <div slot="trigger" class="flex items-center gap-2 cursor-pointer">
        <byte-avatar
          src="https://byteui.dev/assets/andrea-fomera-8411cac6.jpg"
          size="sm">
        </byte-avatar>
        <span>John Doe</span>
        <byte-icon name="chevron-down" size="small"></byte-icon>
      </div>
      <byte-dropdown-item icon="user">View Profile</byte-dropdown-item>
      <byte-dropdown-item icon="cog-6-tooth">Settings</byte-dropdown-item>
      <byte-dropdown-divider></byte-dropdown-divider>
      <byte-dropdown-item icon="arrow-right-on-rectangle" color="red">
        Sign out
      </byte-dropdown-item>
    </byte-dropdown>

    <!-- Action Menu -->
    <byte-dropdown>
      <byte-button slot="trigger" variant="outline" icon="ellipsis-vertical">
        More
      </byte-button>
      <byte-dropdown-item icon="pencil">Edit</byte-dropdown-item>
      <byte-dropdown-item icon="document">Duplicate</byte-dropdown-item>
      <byte-dropdown-item icon="archive-box">Archive</byte-dropdown-item>
      <byte-dropdown-divider></byte-dropdown-divider>
      <byte-dropdown-item icon="trash" color="red">Delete</byte-dropdown-item>
    </byte-dropdown>
  </div>

Positioning

Control where the dropdown menu appears relative to its trigger using the position attribute.

Dropdown Positions

100%

Bottom Left

Option 1

Option 2

Bottom Right

Option 1

Option 2

Top Left

Option 1

Option 2

Top Right

Option 1

Option 2

<div class="grid grid-cols-2 gap-4">
    <byte-dropdown position="bottom-left">
      <byte-button slot="trigger" variant="outline">Bottom Left</byte-button>
      <byte-dropdown-item>Option 1</byte-dropdown-item>
      <byte-dropdown-item>Option 2</byte-dropdown-item>
    </byte-dropdown>

    <byte-dropdown position="bottom-right">
      <byte-button slot="trigger" variant="outline">Bottom Right</byte-button>
      <byte-dropdown-item>Option 1</byte-dropdown-item>
      <byte-dropdown-item>Option 2</byte-dropdown-item>
    </byte-dropdown>

    <byte-dropdown position="top-left">
      <byte-button slot="trigger" variant="outline">Top Left</byte-button>
      <byte-dropdown-item>Option 1</byte-dropdown-item>
      <byte-dropdown-item>Option 2</byte-dropdown-item>
    </byte-dropdown>

    <byte-dropdown position="top-right">
      <byte-button slot="trigger" variant="outline">Top Right</byte-button>
      <byte-dropdown-item>Option 1</byte-dropdown-item>
      <byte-dropdown-item>Option 2</byte-dropdown-item>
    </byte-dropdown>
  </div>

States

Dropdowns support disabled items and can show different states for menu items.

Dropdown States

100%

States

Default Item

Disabled Item

Success

Error

<byte-dropdown>
    <byte-button slot="trigger">States</byte-button>
    <byte-dropdown-item>Default Item</byte-dropdown-item>
    <byte-dropdown-item disabled>Disabled Item</byte-dropdown-item>
    <byte-dropdown-item color="green" icon="check">Success</byte-dropdown-item>
    <byte-dropdown-item color="red" icon="x-mark">Error</byte-dropdown-item>
  </byte-dropdown>

Common Patterns

Filter Menu

100%

Filter

All Items

Active

Archived

Deleted

<byte-dropdown>
    <byte-button slot="trigger" variant="outline" icon="funnel">
      Filter
    </byte-button>
    <byte-dropdown-item icon="check">All Items</byte-dropdown-item>
    <byte-dropdown-divider></byte-dropdown-divider>
    <byte-dropdown-item>Active</byte-dropdown-item>
    <byte-dropdown-item>Archived</byte-dropdown-item>
    <byte-dropdown-item>Deleted</byte-dropdown-item>
  </byte-dropdown>

Sort Menu

100%

Sort

Newest First

Oldest First

Name (A-Z)

Name (Z-A)

<byte-dropdown>
    <byte-button slot="trigger" variant="outline" icon="arrows-up-down">
      Sort
    </byte-button>
    <byte-dropdown-item icon="arrow-up">Newest First</byte-dropdown-item>
    <byte-dropdown-item icon="arrow-down">Oldest First</byte-dropdown-item>
    <byte-dropdown-divider></byte-dropdown-divider>
    <byte-dropdown-item icon="bars-arrow-up">Name (A-Z)</byte-dropdown-item>
    <byte-dropdown-item icon="bars-arrow-down">Name (Z-A)</byte-dropdown-item>
  </byte-dropdown>

API Reference

Dropdown Properties

Property

Type

Default

Description

position

string

'bottom-right'

'bottom-right', 'bottom-left', 'top-right', 'top-left'

Dropdown Item Properties

Property

Type

Default

Description

icon

string

Icon name to display

color

string

Color theme for the item

disabled

boolean

false

Whether the item is disabled

Events

Event

Detail

Description

open

Fired when the dropdown opens

close

Fired when the dropdown closes

select

{ value: string }

Fired when an item is selected

Keyboard Navigation

Key

Action

Enter / Space

Open dropdown / Select item

↑

Move to previous item

↓

Move to next item

Esc

Close dropdown

Tab

Close dropdown and move focus

Best Practices

Keep dropdown items concise and clear
Use icons consistently to improve recognition
Group related actions with dividers
Position dropdowns to avoid overflow issues
Use color to indicate destructive or important actions
Ensure proper keyboard navigation support
Consider mobile touch targets

Pro tip: Dropdowns will automatically reposition themselves if there isn't enough space in the viewport.