Skip to content
Teasim
TeaCSS documentation
StyleSheet

Dropdown

A disclosure surface that can use native popover or application-managed visibility.

A disclosure surface that can use native popover or application-managed visibility. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

  • dropdown, dropdown-panel, dropdown-panel--popover, dropdown-panel--floating, dropdown-content, dropdown--end, dropdown--top

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

html
<button type="button" popovertarget="actions">Actions</button>
<div id="actions" class="dropdown-panel dropdown-panel--popover bg-color:neutral-100 border-color:neutral-500" popover>
  <a href="/edit">Edit</a>
  <button type="button">Archive</button>
</div>

Variants and composition

There are two separate composition paths. A dropdown wrapper contains a direct dropdown-content; dropdown--end and dropdown--top change that child’s placement. Native details can own disclosure state here.

For a standalone dropdown-panel, choose exactly one mode: dropdown-panel--popover uses native popover, fixed positioning, reset insets, and zero margin. dropdown-panel--floating supplies display structure with no positioning and uses hidden for visibility. These modifiers do not belong on dropdown-content, and a panel should not wrap another positioned dropdown-content merely to style its links.

Both structures have a minimum inline size of spacing step 32, capped by the viewport width minus 2rem. At default spacing this is 128px when space permits. Match .dropdown-panel specificity when overriding its mode styles.

Behavior and accessibility

Native popover mode uses the Popover API for Escape and light dismissal. The example shows this visibility contract; the application still supplies placement relative to its trigger. Floating mode needs placement, dismissal, and focus return. Neither mode creates an ARIA menu.

Reference

See the interactive Storybook specimen. Continue to Empty or return to the Official preset overview.