Dropdown

A floating menu that opens from a trigger element. Supports keyboard navigation (Arrow keys, Escape, Home/End), outside-click to dismiss, and optional link items via the

href attribute on lt-dropdown-item.

Playground

Open

Placement

Theme

Disabled

Selected

Href

HTMLReact

ShareCopy

Usage

<lt-dropdown>
<lt-button slot="trigger" appearance="outlined">Options</lt-button>
<lt-dropdown-item>Profile</lt-dropdown-item>
<lt-dropdown-item>Settings</lt-dropdown-item>
<lt-dropdown-item disabled>Admin Panel</lt-dropdown-item>
<lt-dropdown-item>Sign out</lt-dropdown-item>
</lt-dropdown>

<!-- Anchor items -->

<lt-dropdown>
<lt-button slot="trigger">Links</lt-button>
<lt-dropdown-item href="/profile">Profile</lt-dropdown-item>
<lt-dropdown-item href="/settings">Settings</lt-dropdown-item>
</lt-dropdown>

<!-- Top placement -->

<lt-dropdown placement="top-start">
<lt-button slot="trigger">Open above</lt-button>
<lt-dropdown-item>Item 1</lt-dropdown-item>
<lt-dropdown-item>Item 2</lt-dropdown-item>
</lt-dropdown>

<!-- Listen for selection -->

<lt-dropdown id="my-menu">
<lt-button slot="trigger">Actions</lt-button>
<lt-dropdown-item>Edit</lt-dropdown-item>
<lt-dropdown-item>Delete</lt-dropdown-item>
</lt-dropdown>
<script>
document.getElementById('my-menu').addEventListener('select', (e) => {
  console.log('Selected:', e.detail.item.textContent);
});
</script>

import { Dropdown, DropdownItem } from '@latty-ds/react';
import { Button } from '@latty-ds/react';

function ActionsMenu() {
return (

<Dropdown onSelect={(e) => console.log('Selected:', e.detail.item.textContent)}>
<Button slot="trigger" appearance="outlined">Options</Button>
<DropdownItem>Profile</DropdownItem>
<DropdownItem>Settings</DropdownItem>
<DropdownItem disabled>Admin Panel</DropdownItem>
<DropdownItem>Sign out</DropdownItem>
</Dropdown>
);
}

<script setup>
import {ref} from 'vue' function onSelect(e) {console.log('Selected:', e.detail.item.textContent)}
</script>

<template>
<lt-dropdown @select="onSelect">
  <lt-button slot="trigger" appearance="outlined">Options</lt-button>
  <lt-dropdown-item>Profile</lt-dropdown-item>
  <lt-dropdown-item>Settings</lt-dropdown-item>
  <lt-dropdown-item disabled>Admin Panel</lt-dropdown-item>
  <lt-dropdown-item>Sign out</lt-dropdown-item>
</lt-dropdown>
</template>

Dropdown vs. Select

Both let the user choose from a list of options, but they are built for different purposes and should not be used interchangeably:

	Dropdown	Select
Trigger	Any slotted element — button, icon, avatar	A styled form field with a label and helper text
Options	Fully custom slot content (lt-dropdown-item)	options prop — array of { value, label }
Use when	Action menus, context menus, overflow menus — the user is choosing an action, not setting a value	Form fields — the user is selecting a value that will be submitted or stored
Avoid when	You need the selected value to persist or participate in form submission — use Select instead	You need custom item layouts, icons per item, or the "trigger" isn't a form field

API