Dropdown

Description

Dropdown provides both Bulma-flavored and renderless dropdown primitives for Enso UI.

The Bulma entrypoint renders trigger, menu, transition, and placement behavior, while the renderless layer owns keyboard navigation, registration, and selection flow.

Installation

Install the package:

yarn add @enso-ui/dropdown

This package can also be consumed outside the Enso ecosystem.

Features

• exports Dropdown and DropdownItem from the Bulma entrypoint
• exports CoreDropdown from the renderless entrypoint
• supports keyboard navigation, selection tracking, click-outside closing, and up/down placement
• composes cleanly with custom trigger, controls, and item slots

Usage

<script>
import { Dropdown, DropdownItem } from '@enso-ui/dropdown';

export default {
    components: { Dropdown, DropdownItem },
};
</script>

Renderless usage:

import { CoreDropdown } from '@enso-ui/dropdown/renderless';

API

Dropdown

Bulma-styled dropdown wrapper.

Import: @enso-ui/dropdown

Props:

• opensUp: boolean default false

Methods:

• show()
• hide()

Slots:

• trigger
• label
• controls
• items

DropdownItem

Selectable Bulma dropdown item.

Import: @enso-ui/dropdown

Props:

• selected: boolean default false

Events:

• select

CoreDropdown

Renderless dropdown state owner.

Import: @enso-ui/dropdown/renderless

Props:

• disableControls: boolean default false
• disabled: boolean default false
• dropdownClass: string default 'dropdown'
• itemClass: string default 'dropdown-item'
• manual: boolean default false

Events:

• show
• hide

Depends On

• @enso-ui/directives ↗
• @enso-ui/dropdown-indicator ↗
• @enso-ui/transitions ↗

Contributions

are welcome. Pull requests are great, but issues are good too.

Thank you to all the people who already contributed to Enso!

License

MIT