lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubIntegrationsAngularVueReactDemosFoundationThemesTypographyIconsPopoversInternationalizationDrag and DropKeyboard NavigationLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastToggletipTooltipTreeData 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 Groups

The dropdown are a is a generic popup component that can be positioned relative to an anchor element.

Example

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

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

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

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
positionPositiondetermine the position relative to the anchor
closablebooleandetermine user closable state
anchorHTMLElement | stringanchor element popover will positiion relative to
i18nset default aria/i18n strings

Attributes

NameTypesDescription
positionPositiondetermine the position relative to the anchor
closablebooleandetermine user closable state
anchorHTMLElement | stringanchor element popover will positiion relative to
i18nset default aria/i18n strings

CSS Properties

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

Slots

NameTypesDescription
defaultcontent