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 This is some static content in a dropdown. 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>
Account Reports Profile Settings Logout
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 label checkbox 1 checkbox 2 checkbox 3
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 label radio 1 radio 2 radio 3
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 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 Name Types Description anchor
HTMLElement | string
position
Position
closable
boolean
trigger
HTMLElement | string
i18n
hidden
boolean
Attributes Name Types Description anchor
HTMLElement | string
position
Position
closable
boolean
trigger
HTMLElement | string
i18n
hidden
boolean
CSS Properties Name Types Description --padding
--filter
--background
--color
--width
--height
--min-width
--min-height
--font-size
Slots Name Types Description default
content