Pages
Introduction Colors & Tokens Icons
UI
Button Link Badge Notification Badge Alert Card Spinner Avatar Divider Empty State
Interactive
Modal Side Modal Dropdown Tooltip Accordion Tabs Flash Toast
Forms
Form Select Toggle Checkbox & Radio Text Fields Date & Time Fields
Layout
Navbar Sidebar Table Pagination Breadcrumbs Selector List
Utilities
Local Time

Dropdown

A toggleable menu anchored to its trigger.

Simple

Options
Edit
= app_theme_dropdown("Options") do
  = app_theme_link "Edit", href: "#"

Multiple items and custom trigger

Edit
Duplicate
Delete
= app_theme_dropdown do |dropdown|
  - dropdown.with_trigger do
    = app_theme_button "Actions", variant: :secondary
  - dropdown.with_item do
    = app_theme_link "Edit", href: "#"
  - dropdown.with_item do
    = app_theme_link "Duplicate", href: "#"
  - dropdown.with_item do
    = app_theme_link "Delete", href: "#", variant: :danger

Alignment

Menu item
Menu item
Menu item
.demo-row
  - %i[left center right].each do |align|
    = app_theme_dropdown(align: align) do |dropdown|
      - dropdown.with_trigger do
        = app_theme_button "Align #{align}", variant: :ghost
      - dropdown.with_item do
        = app_theme_link "Menu item", href: "#"