lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubIntegrationsAngularVueReactDemosFoundationThemesTypographyIconsPopoversInternationalizationStandaloneDrag and DropPopoversKeyboard NavigationVirtual ListLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupAvatarBadgeBreadcrumbButtonButton CopyButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat BytesFormat DatetimeFormat NumberFormat Relative TimeFormat TokenFormsForm InteractionsForm ValidationHeaderIconInputMenuMonthNavNumberPagePaginationPanelPasswordPinProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectSkeletonStepperSwitchTabsTagTelephoneTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVClipboardColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanColumn ResizeDraggable ColumnsDraggable RowsRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow GroupsVirtual List

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.

open dropdownThis is some static content in a dropdown.
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.

open dropdownAccountReportsProfile SettingsLogout
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.

open dropdown
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.

open dropdown
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-expanded and aria-activedescendant to 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

NameTypesDescription
opendispatched when the dialog is opened
closedispatched when the dialog is closed

Properties

NameTypesDescription
positionPositionControls the position of the dropdown relative to its anchor element
closablebooleanControls whether the dropdown displays a close button, allowing users to dismiss it
i18nProvides internationalization strings for accessibility labels and screen reader announcements
popoverConfig

Attributes

NameTypesDescription
positionPositionControls the position of the dropdown relative to its anchor element
closablebooleanControls whether the dropdown displays a close button, allowing users to dismiss it
i18nProvides internationalization strings for accessibility labels and screen reader announcements

CSS Properties

NameTypesDescription
--padding
--filter
--background
--color
--width
--height
--min-width
--min-height
--font-size

Slots

NameTypesDescription
defaultcontent