Blocks

Dropdown Menu

Displays a list of actions or links that appear below a trigger button.

Usage

Compose dropdown_menu_trigger and dropdown_menu_content inside dropdown_menu. The open/close behaviour is handled by the bundled Stimulus controller (shadcnrb--dropdown-menu) which is auto-installed with the gem.

My Account

sui.dropdown_menu do
  sui.dropdown_menu_trigger "Open menu"
  sui.dropdown_menu_content do
    sui.dropdown_menu_label "My Account"
    sui.dropdown_menu_separator
    sui.dropdown_menu_item "Profile"
    sui.dropdown_menu_item "Settings"
    sui.dropdown_menu_separator
    sui.dropdown_menu_item "Sign out"
  end
end

With links

Pass href: to dropdown_menu_item to render an <a> tag instead of a button.

Dashboard Billing

Log out

sui.dropdown_menu do
  sui.dropdown_menu_trigger "Navigate", variant: :default
  sui.dropdown_menu_content do
    sui.dropdown_menu_item "Dashboard", href: "#"
    sui.dropdown_menu_item "Billing",   href: "#"
    sui.dropdown_menu_separator
    sui.dropdown_menu_item "Log out",   href: "#"
  end
end

API

Method	Key args	Default	Description
dropdown_menu	—	—	Root container. Mounts the `shadcnrb--dropdown-menu` Stimulus controller.
dropdown_menu_trigger(name)	variant:, size:	:outline, :default	Button that toggles the menu. Accepts all `sui.button` options.
dropdown_menu_content	—	—	Floating panel that appears below the trigger. Hidden by default; shown when state is `open`.
dropdown_menu_label(name)	—	—	Non-interactive section heading inside the content panel.
dropdown_menu_separator	—	—	Horizontal divider line between groups of items.
dropdown_menu_item(name)	href:	nil	Interactive row. Renders `<button>` by default; `<a>` when `href:` is given. Closes menu on click.