Getting StartedInstallationSupportChangelogGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton Icon GroupButton SortCardCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleRadioRangeSearchSelectShellSwitchTabsTagTextareaTimeToastTooltipData GridGetting StartedFooterPlaceholderAsyncResponsiveScroll HeightPaginationBordersHoverColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityRow 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 Dropdown
code
<div bp-layout="block center" style="height: 100%">
  <bp-dropdown hidden anchor="dropdown" trigger="dropdown">This is some static content in a dropdown.</bp-dropdown>
  <bp-button id="dropdown" action="outline">Open Dropdown</bp-button>
</div>
<script type="module">
  import '@blueprintui/components/include/dropdown.js';
  import '@blueprintui/components/include/button.js';

  const dropdown = document.querySelector('bp-dropdown[anchor="dropdown"]');
  dropdown.addEventListener('close', () => (dropdown.hidden = true));
  dropdown.addEventListener('open', () => (dropdown.hidden = false));
</script>

Menu

Open Dropdown
code
<div bp-layout="block center" style="height: 100%">
  <bp-button id="menu-dropdown" action="outline">Open Dropdown</bp-button>
  <bp-dropdown hidden anchor="menu-dropdown" trigger="menu-dropdown">
    <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';

  const dropdown = document.querySelector('bp-dropdown[anchor="menu-dropdown"]');
  dropdown.addEventListener('close', () => (dropdown.hidden = true));
  dropdown.addEventListener('open', () => (dropdown.hidden = false));
</script>

Checkbox Group

Open Dropdown
code
<div bp-layout="block center" style="height: 100%">
  <bp-button id="checkbox-dropdown" action="outline">Open Dropdown</bp-button>
  <bp-dropdown hidden closable anchor="checkbox-dropdown" trigger="checkbox-dropdown">
    <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';

  const dropdown = document.querySelector('bp-dropdown[anchor="checkbox-dropdown"]');
  dropdown.addEventListener('close', () => (dropdown.hidden = true));
  dropdown.addEventListener('open', () => (dropdown.hidden = false));
</script>

Radio Group

Open Dropdown
code
<div bp-layout="block center" style="height: 100%">
  <bp-button id="radio-dropdown" action="outline">Open Dropdown</bp-button>
  <bp-dropdown hidden closable anchor="radio-dropdown" trigger="radio-dropdown">
    <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';

  const dropdown = document.querySelector('bp-dropdown[anchor="radio-dropdown"]');
  dropdown.addEventListener('close', () => (dropdown.hidden = true));
  dropdown.addEventListener('open', () => (dropdown.hidden = false));
</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

Properties

NameTypesDescription
anchorHTMLElement | string
positionPosition
closableboolean
triggerHTMLElement | string
i18n
hiddenboolean

Attributes

NameTypesDescription
anchorHTMLElement | string
positionPosition
closableboolean
triggerHTMLElement | string
i18n
hiddenboolean

CSS Properties

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

Slots

NameTypesDescription
defaultcontent