Dropdown

Dropdowns display a list of actions or options in a menu panel. Styles are pure HTML + CSS — interactivity is handled in your app by toggling classes on .ro-dropdown-menu.

Examples

Menu surfaces

Use .ro-dropdown as the wrapper, a button as the trigger, and .ro-dropdown-menu for the panel.

The default panel uses the overlay token (--ro-colors-bg-overlay via --ro-dropdown-bg). Grey menus add ro-color-scheme-grey (or data-ro-color-scheme="grey"). Wrap long menus in .ro-dropdown-menu-scroller, use .ro-dropdown-label for section headings, and .ro-dropdown-item-text inside .ro-dropdown-item--truncate for ellipsis.

Previews below show the open state — add .show on .ro-dropdown-menu (see Vanilla JavaScript).

<div class="ro-dropdown">
  <button class="ro-btn ro-variant-outlined ro-color-scheme-product" type="button">
    Open menu (default)
  </button>
  <div class="ro-dropdown-menu show" style="max-width: 240px" role="menu">
    <div class="ro-dropdown-menu-scroller">
      <div class="ro-dropdown-label">Default surface</div>
      <div class="ro-dropdown-item" role="menuitem" tabindex="0">Entry</div>
      <div class="ro-dropdown-item" data-ro-color-scheme="product" role="menuitem" tabindex="0">Product</div>
      <hr class="ro-dropdown-separator" />
      <div class="ro-dropdown-item ro-dropdown-item--truncate" role="menuitem" tabindex="0">
        <span class="ro-dropdown-item-text">Very long label truncated with CSS</span>
      </div>
    </div>
  </div>
</div>

<div class="ro-dropdown">
  <button class="ro-btn ro-color-scheme-product" type="button">
    Open menu (grey)
  </button>
  <div class="ro-dropdown-menu ro-color-scheme-grey show" style="max-width: 240px" role="menu">
    <div class="ro-dropdown-menu-scroller">
      <div class="ro-dropdown-label">Grey surface</div>
      <div class="ro-dropdown-item" role="menuitem" tabindex="0">Entry</div>
      <div class="ro-dropdown-item" data-ro-color-scheme="product" role="menuitem" tabindex="0">Product</div>
      <hr class="ro-dropdown-separator" />
      <div class="ro-dropdown-item ro-dropdown-item--truncate" role="menuitem" tabindex="0">
        <i class="ro-icon ro-icon-edit-pencil ro-size-lg"></i>
        <span class="ro-dropdown-item-text">Very long label truncated with CSS</span>
      </div>
    </div>
  </div>
</div>

Preview

Open menu (default)

Default surface

Entry

Product

---

Very long label truncated with CSS

Open menu (grey)

Grey surface

Entry

Product

---

Very long label truncated with CSS

Danger items

Individual items support data-ro-color-scheme="danger" or .ro-color-scheme-danger, which swap --ro-dropdown-item-color and --ro-dropdown-item-bg-hover.

<div class="ro-dropdown">
<button class="ro-btn" type="button">Actions</button>
<div class="ro-dropdown-menu show" role="menu">
  <div class="ro-dropdown-menu-scroller">
    <div class="ro-dropdown-item" role="menuitem" tabindex="0">Rename</div>
    <div class="ro-dropdown-item ro-color-scheme-danger" role="menuitem" tabindex="0">
      <i class="ro-icon ro-icon-trash ro-size-lg"></i>
      Delete
    </div>
  </div>
</div>
</div>

Preview

Actions

Rename

Delete

Vanilla JavaScript

Vanilla dropdowns have no bundled web component. Toggle visibility and animation with .show on .ro-dropdown-menu:

State	Class / variable	Effect
Closed	(no .show)	display: none, --is-dropdown-shown: 0, faded out
Open	.show on .ro-dropdown-menu	display: flex, position: fixed, --is-dropdown-shown: 1

When open, set left / top on the menu (or use Floating UI to compute placement). Close on outside click or item selection.

const dropdown = document.querySelector('.ro-dropdown');
const menu = dropdown.querySelector('.ro-dropdown-menu');
const trigger = dropdown.querySelector('button');

function openMenu() {
  menu.classList.add('show'); // sets --is-dropdown-shown: 1
  menu.style.display = 'flex';
  // Position the panel (Floating UI, or manual left/top on position: fixed)
}

function closeMenu() {
  menu.classList.remove('show'); // --is-dropdown-shown falls back to 0
  menu.style.display = 'none';
}

trigger.addEventListener('click', () => {
  menu.classList.contains('show') ? closeMenu() : openMenu();
});

document.addEventListener('click', (event) => {
  if (!dropdown.contains(event.target)) closeMenu();
});

CSS classes & variables

Classes

Class	Required	Description
.ro-dropdown	Yes	Wrapper (position: relative).
.ro-dropdown-menu	Yes	Menu panel. Toggle .show for open state. Grey: data-ro-color-scheme="grey" or .ro-color-scheme-grey.
.ro-dropdown-menu-scroller	No	Scroll sub-container for long menus.
.ro-dropdown-item	No	Menu action. Danger: data-ro-color-scheme="danger" or .ro-color-scheme-danger.
.ro-dropdown-item-text	No	Truncation wrapper inside an item.
.ro-dropdown-label	No	Section label row.
.ro-dropdown-separator	No	Menu divider.

CSS custom properties

Variable	Set on	Description
--is-dropdown-shown	.ro-dropdown-menu	0 (closed) or 1 (open). Set automatically when .show is present.
--ro-dropdown-bg	.ro-dropdown-menu	Panel background (defaults to --ro-colors-bg-overlay).
--ro-dropdown-item-color	.ro-dropdown-item	Item text color.
--ro-dropdown-item-bg-hover	.ro-dropdown-item	Item hover background.