<DropdownButton> is a button that opens a dropdown menu — used for action menus, bulk actions, and grouped controls. Accepts an items array or yields a custom dropdown body.

`<DropdownButton>`

A button that opens a dropdown panel on click. Used for action menus ("More…"), grouped controls (bulk actions), and any UI where a primary trigger reveals a list of choices.

Items-Based Usage

<DropdownButton @text='Actions' @icon='ellipsis' @items={{this.actions}} />

actions = [
  { text: 'Edit', icon: 'pencil', onClick: this.edit },
  { text: 'Export', icon: 'download', onClick: this.exportData },
  { separator: true },
  {
    text: 'Delete',
    icon: 'trash',
    onClick: this.delete,
    class: 'text-red-500',
  },
];

Each item supports:

Field	Description
`text` (or `label`)	Menu item label
`icon`	FontAwesome icon
`iconSize`, `iconWidth`	Icon overrides
`onClick` (or `fn`)	Click handler
`perform`	Ember-concurrency task to perform
`disabled`	Disabled state
`class`	Extra classes on the item
`wrapperClass`	Extra classes on the wrapper
`separator: true`	Render a separator instead of an item
`seperatorClass`	Extra classes on the separator

Block-Based Usage

For richer dropdown content, yield a block. The yield is the BasicDropdown API — you can call dd.actions.close() from inside:

<DropdownButton @text='Filters' @icon='filter' as |dd|>
  <div class='next-dd-menu w-72 p-4'>
    <h3 class='mb-2 font-semibold'>Filter by status</h3>
    {{! ... }}
    <Button @text='Apply' @onClick={{dd.actions.close}} />
  </div>
</DropdownButton>

Arguments

Button

Argument	Type	Default	Description
`@text`	string	—	Button label
`@icon`	string	—	FontAwesome icon
`@iconPrefix`, `@iconSize`, `@iconClass`	—	—	Icon overrides
`@type`	string	`default`	Button type — `primary`, `magic`, etc.
`@size`	string	—	`xs`, `sm`, `md`, `lg`, `xl`
`@active`	boolean	—	Force the active state
`@isLoading`	boolean	—	Show a spinner
`@disabled`	boolean	—	Disable the button
`@visible`	boolean	`true`	When false, nothing renders
`@helpText`	string	—	Tooltip on the button
`@tooltipPlacement`	string	`top`	Tooltip placement
`@buttonClass`, `@buttonWrapperClass`, `@textClass`	—	—	Class overrides
`@buttonComponent`	string	—	Replace the default `<Button>` with a custom component
`@buttonComponentArgs`	object	—	Args forwarded to `@buttonComponent`
`@img`, `@imgClass`, `@alt`	—	—	Render an image inside the button
`@permission`	string	—	Permission gating

Argument	Type	Default	Description
`@items`	array	—	Item descriptors (when not using a block)
`@dropdownId`	string	—	DOM `id` for the dropdown
`@triggerClass`, `@contentClass`, `@dropdownMenuClass`	—	—	Class overrides
`@horizontalPosition`	string	—	`left`, `right`, `auto`
`@verticalPosition`	string	—	`above`, `below`, `auto`
`@matchTriggerWidth`	boolean	—	Make the panel as wide as the trigger
`@calculatePosition`	function	—	Custom positioning function
`@renderInPlace`	boolean	—	Render in DOM order vs. portal
`@overlay`	boolean	—	Render a backdrop behind the panel
`@defaultClass`	string	—	Class on the dropdown's default state
`@onOpen`, `@onClose`	functions	—	Lifecycle callbacks

Real-World Examples

{{! Action menu on a row }}
<DropdownButton @icon='ellipsis' @size='xs' @items={{this.rowActions}} />

{{! Bulk actions menu (only visible when rows are selected) }}
{{#if this.selectedCount}}
  <DropdownButton
    @icon='layer-group'
    @text='Bulk Actions'
    @type='magic'
    @items={{this.bulkActions}}
  />
{{/if}}

{{! Block-based filter panel }}
<DropdownButton @text='Filters' @icon='filter' as |dd|>
  <div class='p-4'>
    <FiltersPanel @onApply={{fn this.applyFilters dd}} />
  </div>
</DropdownButton>

Source

File	Description
`addon/components/dropdown-button.hbs`	Template
`addon/components/dropdown-button.js`	Class

DropdownButton

On this page