!Ember Version

ember-basic-dropdown

This is a very minimal dropdown. That means that it is agnostic about what it is going to contain.

It is intended to be a building block for more complex components but is perfectly usable.

$3

- 🖊 TypeScript support – ships with type definitions for smooth TypeScript integration.
- ✨ Glint support – template type-checking out of the box for safer templates.
- 🚀 FastBoot compatible – works in server-rendered Ember apps.
- 🕶 Shadow DOM support – can be rendered inside shadow roots without breaking positioning or events.
- 🛠 Addon v2 ready – modern Ember Addon v2 format.
- 🎯 Headless & lightweight – provides dropdown logic and accessibility without forcing styles.
- 🔧 Flexible API – fully customizable trigger and content; you control the markup and styling.
- 🧩 Composable – integrates seamlessly with other Ember addons (e.g. ember-power-select).
- ♿ Accessible by default – full keyboard navigation, ARIA attributes, and focus management built-in.
- 📱 Responsive positioning – automatic repositioning on scroll and viewport boundaries.

$3

- Embroider or ember-auto-import v2
- Ember.js v3.28 or above

$3

``
pnpm install ember-basic-dropdown
`

For more installation details see documentation

$3

This component leverages contextual components for its API:

`glimmer-ts
import BasicDropdown from "ember-basic-dropdown/components/basic-dropdown";


`

The yielded dropdown object is the public API of the component, and contains
properties and actions that you can use to control the component.

`js
{
uniqueId: ,
disabled: ,
isOpen: ,
actions: {
open: ,
close: ,
toggle: ,
reposition: ,
registerTriggerElement: ,
registerDropdownElement: ,
getTriggerElement:
}
}
`

Check the full documentation with live examples in https://ember-basic-dropdown.com

$3

#### Renders on the body or in place

By default this component will render the dropdown in the body using #in-element and absolutely
position it to place it in the proper coordinates.

You can opt out to this behavior by passing renderInPlace=true. That will add the dropdown just
below the trigger.

#### Close automatically when clicking outside the component

You don't need to care about adding or removing events, it does that for you.

You can make the dropdown content standout a little more by adding overlay=true to the content options, see example below. This will add a semi transparent overlay covering the whole screen. Also this will stop bubbling the click/touch event which closed the dropdown.

`glimmer-ts
import BasicDropdown from "ember-basic-dropdown/components/basic-dropdown";


`

NOTE: If for some reason clicking outside a dropdown doesn't work, you might want to make sure the spans the entire viewport. Adding a css rule like body {min-height: 100vh;} would do the trick. It ensures that wherever you click on the page, it will close the dropdown.

#### Close automatically when clicking inside the component

If you'd like the dropdown to close itself after a user clicks on it, you can use dd.actions.close from our public API.

`glimmer-ts
import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
import { on } from '@ember/modifier';