Import
import { DropdownMenuModule } from '@backbase/ui-ang/dropdown-menu'
Usage
Use the bb-dropdown-menu-ui component to use a dropdown menu and access its API.
<bb-dropdown-menu-ui
[label]="'Dropdown Menu Button'"
[options]="['Option 1', 'Option 2', 'Option 3']"
[container]="'body'"
(select)="onSelect($event)"
></bb-dropdown-menu-ui>
Inputs
|
Input |
Format |
Default |
|---|---|---|
|
autoClose |
boolean | "inside" | "outside" |
true |
|
btnCircle |
boolean |
false |
|
btnColor |
ButtonColor<string> |
“primary“ |
|
buttonSize |
"sm" | "md" |
“md“ |
|
container |
string |
— |
|
disabled |
boolean |
false |
|
fullWidth |
boolean |
false |
|
icon |
string |
— |
|
iconColor |
string |
— |
|
iconSize |
string |
”md" |
|
isOpen |
boolean |
false |
|
label |
string |
— |
|
leftIcon |
string |
— |
|
optionLabelKey |
string |
— |
|
options |
Array<string | IDropdownOption> |
[] |
|
position |
Placement | PlacementArray |
["bottom-end", "bottom-start", "top-end", "top-start"] |
|
popperOffset |
number[] |
undefined |
autoClose
The autoClose input sets whether the dropdown should close when clicking items or pressing ESC.
<!-- Dropdown that doesn't auto-close -->
<bb-dropdown-menu-ui
[label]="'Dropdown Menu Button'"
[autoClose]="false"
[options]="['Link 1', 'Link 2', 'Link 3']"
></bb-dropdown-menu-ui>
btnCircle
The btnCircle input sets whether the button should be circular. Only works when there's only an icon without text.
<!-- Circular icon-only dropdown -->
<bb-dropdown-menu-ui
[icon]="'favorite'"
[btnCircle]="true"
[options]="['Link 1', 'Link 2', 'Link 3']"
></bb-dropdown-menu-ui>
btnColor
The btnColor input sets the color theme of the dropdown button. Its value must be one of the available options in the ButtonColor — for more details on available button colors, see the Button documentation.
<!-- Primary colored dropdown -->
<bb-dropdown-menu-ui
[label]="'Dropdown Menu Button'"
[btnColor]="'primary'"
[options]="['Link 1', 'Link 2', 'Link 3']"
></bb-dropdown-menu-ui>
buttonSize
The buttonSize input sets the size of the dropdown button. It accepts either “sm" or "md" — for more details on available button sizes, see the Button documentation.
<!-- Small dropdown button -->
<bb-dropdown-menu-ui
[label]="'Dropdown Menu Button'"
[buttonSize]="'sm'"
[options]="['Link 1', 'Link 2', 'Link 3']"
></bb-dropdown-menu-ui>
container
The container input specifies which element the dropdown should be appended to.
<!-- Dropdown appended to the HTML `body` element -->
<bb-dropdown-menu-ui
[label]="'Dropdown Menu Button'"
[container]="'body'"
[options]="['Link 1', 'Link 2', 'Link 3']"
></bb-dropdown-menu-ui>
disabled
The disabled input sets whether the dropdown is clickable or mutable.
<!-- Dropdown with label -->
<bb-dropdown-menu-ui
[label]="'Dropdown Menu Button'"
[options]="['Link 1', 'Link 2', 'Link 3']"
[disabled]="true"
></bb-dropdown-menu-ui>
fullWidth
The fullWidth input sets whether the button should stretch to 100% width.
<!-- Full width dropdown -->
<bb-dropdown-menu-ui
[label]="'Dropdown Menu Button'"
[fullWidth]="true"
[options]="['Link 1', 'Link 2', 'Link 3']"
></bb-dropdown-menu-ui>
icon
The icon input sets an icon to display on the right side of the button. If both an icon and a label are set, this icon will be shown after the label (i.e., on the right side in LTR).
<!-- Dropdown with right icon -->
<bb-dropdown-menu-ui
[icon]="'caret-down'"
[label]="'Dropdown Menu Button'"
[options]="['Link 1', 'Link 2', 'Link 3']"
></bb-dropdown-menu-ui>
iconColor
The iconColor input sets the color of the icon displayed on the right side of the button (i.e., the one configured via the icon input). This does not affect the left icon color.
<!-- Dropdown with colored right icon -->
<bb-dropdown-menu-ui
[label]="'Dropdown Menu Button'"
[icon]="'favorite'"
[iconColor]="'danger'"
[options]="['Link 1', 'Link 2', 'Link 3']"
></bb-dropdown-menu-ui>
iconSize
The iconSize input sets the size of the icon displayed on the right side of the button (i.e., the one configured via the icon input). This does not affect the left icon, which is always medium-sized.
<!-- Dropdown with medium-sized right icon -->
<bb-dropdown-menu-ui
[label]="'Dropdown Menu Button'"
[icon]="'favorite'"
[iconSize]="'md'"
[options]="['Link 1', 'Link 2', 'Link 3']"
></bb-dropdown-menu-ui>
isOpen
The isOpen input controls whether the dropdown menu is opened.
<!-- Dropdown menu that is open by default -->
<bb-dropdown-menu-ui
[label]="'Dropdown Menu Button'"
[isOpen]="true"
[autoClose]="false"
[options]="['Link 1', 'Link 2', 'Link 3']"
></bb-dropdown-menu-ui>
label
The label input sets the text displayed on the dropdown button.
<!-- Dropdown with label -->
<bb-dropdown-menu-ui
[label]="'Dropdown Menu Button'"
[options]="['Link 1', 'Link 2', 'Link 3']"
></bb-dropdown-menu-ui>
leftIcon
The leftIcon input sets an icon to display on the left side of the button label. If both the left icon and a label are set, this icon will be shown before the label (i.e., on the left side in LTR).
<!-- Dropdown with left icon -->
<bb-dropdown-menu-ui
[leftIcon]="add"
[label]="Dropdown Menu Button"
[options]="['Link 1', 'Link 2', 'Link 3']"
></bb-dropdown-menu-ui>
optionLabelKey
The optionLabelKey input specifies which property to use as the label when options are objects. This is mandatory when using object options.
// Array of link objects with properties
links = [
{ id: 1, label: 'Link 1', url: 'https://www.backbase.com' },
{ id: 2, label: 'Link 2', url: 'https://www.backbase.com' },
{ id: 3, label: 'Link 3', url: 'https://www.backbase.com' }
];
<!-- Object options (optionLabelKey is required when using object options) -->
<bb-dropdown-menu-ui [options]="links" optionLabelKey="label"></bb-dropdown-menu-ui>
options
The options input sets the array of items to display in the dropdown menu. It can be an array of strings or an array of objects.
<!-- String options -->
<bb-dropdown-menu-ui [options]="['Link 1', 'Link 2', 'Link 3']"></bb-dropdown-menu-ui>
<!-- Object options (optionLabelKey is required when using object options) -->
<bb-dropdown-menu-ui [options]="links" optionLabelKey="label"></bb-dropdown-menu-ui>
position
The position input sets the preferred position of the dropdown menu. Position will be picked in order of feasibility.
<!-- Dropdown positioned on the bottom right -->
<bb-dropdown-menu-ui
[label]="'Dropdown Menu Button'"
[position]="'bottom-end'"
[options]="['Link 1', 'Link 2', 'Link 3']"
></bb-dropdown-menu-ui>
popperOffset
Custom offset values for the dropdown menu positioning. Specifies the [skidding, distance] offset in pixels for Popper.js positioning. Overrides the default Backbase offset of [0, 8]. Useful for fine-tuning dropdown placement in complex layouts or when custom spacing is required.
<bb-dropdown-menu-ui
[popperOffset]="[0, 12]"
label="Custom Offset Menu"
[options]="offsetOptions">
</bb-dropdown-menu-ui>
Accessibility
This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.
ARIA
These inputs support WAI-ARIA compliance and are intended to improve accessibility for users relying on assistive technologies. Use them to provide meaningful semantic information for the component when additional context is needed to convey its purpose, state, or behavior.
|
Prop |
Description |
Default |
|---|---|---|
|
dropDownButtonLabel |
Sets the aria-label for the triggering button, providing accessible context for screen readers about the dropdown's purpose |
"Toggle dropdown" |
|
dropDownMenuId |
Sets a custom ID for the dropdown menu element, used for ARIA relationships |
— |
|
dropDownMenuRole |
Sets the ARIA role for the dropdown menu container |
"menu" |
|
role |
Sets the ARIA role for the dropdown component container |
“group” |
<!-- Complete accessibility configuration example -->
<bb-dropdown-menu-ui
label="User Actions"
role="group"
dropDownButtonLabel="Open user management actions menu"
dropDownMenuRole="menu"
dropDownMenuId="user-actions-dropdown"
[options]="userActions"
(select)="onUserActionSelect($event)"
></bb-dropdown-menu-ui>
Keyboard Navigation
The following keyboard events are bound to actions on the component:
|
Key |
Actions |
|---|---|
|
Enter ↵ / Return ⌤ |
• When open: Selects focused item, closes dropdown, and returns focus to button
|
|
ArrowDown ↓ |
• When open: Moves focus to next item • When closed: Opens dropdown and focuses first item
|
|
ArrowUp ↑ |
• When closed: Opens dropdown and focuses first item • When open: Moves focus to previous item
|
|
Tab ⇥ |
• When focus is on button: Moves to first dropdown item • When focus is on last item: Closes dropdown and returns to button • When focus is on other items: Moves to next item
|
|
Tab ⇥ + Shift ⇧ |
• When focus is on button: Closes dropdown • When focus is on last item: Returns to button • When focus is on other items: Moves to previous item
|