Dropdown

Dropdowns display a list of actions or options in a menu that appears when a user clicks on a trigger element.

Examples

Basic Dropdown

A dropdown is created using the <ro-dropdown> custom element. It requires a trigger with the .ro-dropdown-toggle class and a menu container with the .ro-dropdown-menu class. Inside the menu, use .ro-dropdown-item for each action.

<ro-dropdown>
  <button class="ro-btn ro-dropdown-toggle">
    Options
  </button>
  <ul class="ro-dropdown-menu">
    <li><button class="ro-dropdown-item">Action</button></li>
    <li><button class="ro-dropdown-item">Another action</button></li>
    <li><button class="ro-dropdown-item" disabled>Disabled action</button></li>
    <li><hr class="ro-divider"></li>
    <li><button class="ro-dropdown-item">Separated action</button></li>
  </ul>
</ro-dropdown>

Preview

Options

• Action
• Another action
• Disabled action

• ---

• Separated action

Placement

Use the data-ro-placement attribute on the <ro-dropdown> element to control the menu’s position. The default is bottom-start. It accepts all placements from Floating UI.

<ro-dropdown data-ro-placement="bottom-start">
  <button class="ro-btn ro-dropdown-toggle">Bottom Start</button>
  <ul class="ro-dropdown-menu">...</ul>
</ro-dropdown>
<ro-dropdown data-ro-placement="top-end">
  <button class="ro-btn ro-dropdown-toggle">Top End</button>
  <ul class="ro-dropdown-menu">...</ul>
</ro-dropdown>

Preview

bottom-start

• Item 1
• Item 2

bottom-end

• Item 1
• Item 2

top-start

• Item 1
• Item 2

top-end

• Item 1
• Item 2

Color Schemes

You can change the background color of the menu by adding data-ro-color-scheme="grey" to the .ro-dropdown-menu element. You can also color individual menu items by adding a data-ro-color-scheme attribute to any .ro-dropdown-item.

<ro-dropdown>
  <button class="ro-btn ro-dropdown-toggle">Grey Menu</button>
  <ul class="ro-dropdown-menu" data-ro-color-scheme="grey">
    <li><button class="ro-dropdown-item">Default Item</button></li>
  </ul>
</ro-dropdown>

<ro-dropdown>
  <button class="ro-btn ro-dropdown-toggle">Colored Items</button>
  <ul class="ro-dropdown-menu">
    <li><button class="ro-dropdown-item" data-ro-color-scheme="product">Product</button></li>
    <li><button class="ro-dropdown-item" data-ro-color-scheme="danger">Danger</button></li>
  </ul>
</ro-dropdown>

Preview

Grey Menu

• Default Item
• Another One

Colored Items

• Product
• Danger

Properties

<ro-dropdown>

Attribute	Default	Description
data-ro-placement	bottom-start	Sets the menu’s position relative to the trigger. Accepts values like top, bottom-end, etc.

---

Child Elements & Classes

Class	Required	Description
.ro-dropdown-toggle	Yes	Designates the element that triggers the dropdown menu on click. Must be a child of <ro-dropdown>.
.ro-dropdown-menu	Yes	The container for the dropdown’s list of items. It can take a data-ro-color-scheme="grey" attribute to change its background color.
.ro-dropdown-item	No	Represents a single, clickable action within the menu. It can take a data-ro-color-scheme attribute (product, danger) to change its text color. Deprecated options: info, success, warning.