The dropdown are a is a generic popup component that can be positioned relative to an anchor element.
Example
Displays a positioned overlay with content anchored to a trigger element.
code
<div bp-layout="block center" style="height: 200px">
<bp-button id="dropdown-anchor" popovertarget="dropdown-example">open dropdown</bp-button>
<bp-dropdown id="dropdown-example" anchor="dropdown-anchor">This is some static content in a dropdown.</bp-dropdown>
</div>
<script type="module">
import '@blueprintui/components/include/dropdown.js';
import '@blueprintui/components/include/button.js';
</script>Menu
Demonstrates dropdown with menu items for action selection.
code
<div bp-layout="block center" style="height: 100%">
<bp-button id="dropdown-menu-anchor" popovertarget="dropdown-menu" action="outline">open dropdown</bp-button>
<bp-dropdown id="dropdown-menu" anchor="dropdown-menu-anchor">
<bp-menu>
<bp-menu-item>Account</bp-menu-item>
<bp-menu-item>Reports</bp-menu-item>
<bp-menu-item>Profile Settings</bp-menu-item>
<bp-divider></bp-divider>
<bp-menu-item>Logout <bp-icon shape="logout" style="margin-left: auto"></bp-icon></bp-menu-item>
</bp-menu>
</bp-dropdown>
</div>
<script type="module">
import '@blueprintui/components/include/dropdown.js';
import '@blueprintui/components/include/menu.js';
import '@blueprintui/components/include/button.js';
import '@blueprintui/components/include/divider.js';
import '@blueprintui/icons/include.js';
import '@blueprintui/icons/shapes/caret.js';
import '@blueprintui/icons/shapes/logout.js';
</script>Checkbox Group
Shows dropdown containing checkbox group for multi-select options.
code
<div bp-layout="block center" style="height: 100%">
<bp-button id="dropdown-checkbox-group-anchor" popovertarget="dropdown-checkbox-group">open dropdown</bp-button>
<bp-dropdown id="dropdown-checkbox-group" anchor="dropdown-checkbox-group-anchor" closable>
<bp-fieldset layout="vertical" style="min-width: 120px">
<label>label</label>
<label>checkbox 1</label>
<bp-checkbox value="1" checked></bp-checkbox>
<label>checkbox 2</label>
<bp-checkbox value="2"></bp-checkbox>
<label>checkbox 3</label>
<bp-checkbox value="3"></bp-checkbox>
</bp-fieldset>
</bp-dropdown>
</div>
<script type="module">
import '@blueprintui/components/include/dropdown.js';
import '@blueprintui/components/include/checkbox.js';
import '@blueprintui/components/include/button.js';
</script>Radio Group
Shows dropdown containing radio group for single-select options.
code
<div bp-layout="block center" style="height: 100%">
<bp-button id="dropdown-radio-group-anchor" popovertarget="dropdown-radio-group" action="outline">open dropdown</bp-button>
<bp-dropdown id="dropdown-radio-group" anchor="dropdown-radio-group-anchor" closable>
<bp-fieldset layout="vertical" style="min-width: 120px">
<label>label</label>
<label>radio 1</label>
<bp-radio value="1" checked></bp-radio>
<label>radio 2</label>
<bp-radio value="2"></bp-radio>
<label>radio 3</label>
<bp-radio value="3"></bp-radio>
</bp-fieldset>
</bp-dropdown>
</div>
<script type="module">
import '@blueprintui/components/include/dropdown.js';
import '@blueprintui/components/include/radio.js';
import '@blueprintui/components/include/button.js';
</script>Install
NPM
// npm package
import '@blueprintui/components/include/dropdown.js';CDN
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/dropdown.js/+esm';
</script>Accessibility
- Use ARIA attributes such as
aria-expandedandaria-activedescendantto indicate the state of the dropdown. - Use a button or link to open and close the dropdown, rather than relying on hover or swipe gestures.
bp-dropdown
Events
| Name | Types | Description |
|---|---|---|
open | dispatched when the dialog is opened | |
close | dispatched when the dialog is closed |
Properties
| Name | Types | Description |
|---|---|---|
position | Position | Controls the position of the dropdown relative to its anchor element |
closable | boolean | Controls whether the dropdown displays a close button, allowing users to dismiss it |
anchor | HTMLElement | string | Defines the anchor element that the dropdown will position itself relative to |
i18n | Provides internationalization strings for accessibility labels and screen reader announcements |
Attributes
| Name | Types | Description |
|---|---|---|
position | Position | Controls the position of the dropdown relative to its anchor element |
closable | boolean | Controls whether the dropdown displays a close button, allowing users to dismiss it |
anchor | HTMLElement | string | Defines the anchor element that the dropdown will position itself relative to |
i18n | Provides internationalization strings for accessibility labels and screen reader announcements |
CSS Properties
| Name | Types | Description |
|---|---|---|
--padding | ||
--filter | ||
--background | ||
--color | ||
--width | ||
--height | ||
--min-width | ||
--min-height | ||
--font-size |
Slots
| Name | Types | Description |
|---|---|---|
default | content |