lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsPopoversLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVColumn 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. The content of a dropdown should be clearly labeled and organized, and should be related to the context in which it is used. Avoid using dropdowns for primary navigation, as they can be difficult to use on touch devices.

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">
      <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">
      <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
accessorset default aria/i18n strings
positionPosition
closableboolean
triggerHTMLElement | string
anchorHTMLElement | string
i18n

Attributes

NameTypesDescription
accessorset default aria/i18n strings

CSS Properties

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

Slots

NameTypesDescription
defaultcontent