Import
import { DropdownPanelModule } from '@backbase/ui-ang/dropdown-panel'
Usage
Use the bb-dropdown-panel-ui component with custom toggle and menu templates. Both bbDropdownToggle and bbDropdownMenu template directives are required.
<!-- Basic dropdown panel usage -->
<bb-dropdown-panel-ui>
<ng-template bbDropdownToggle>Toggle panel</ng-template>
<ng-template bbDropdownMenu>
<div class="card">
<div class="card-body">Custom content</div>
</div>
</ng-template>
</bb-dropdown-panel-ui>
Inputs
|
Input |
Format |
Default |
|---|---|---|
|
autofocus |
boolean |
false |
|
buttonClass |
string |
'' |
|
container |
string | null |
null |
|
disabled |
boolean |
false |
|
id |
string |
Unique string |
|
inputClassName |
string |
|
|
isDropdownOpen |
boolean |
false |
|
label |
string |
'' |
|
panelContentsOverflowVisible |
boolean |
false |
|
position |
PlacementArray |
['bottom-end', 'bottom-start', 'top-end', 'top-start'] |
|
readonly |
boolean |
false |
autofocus
The autofocus input determines whether the dropdown should automatically receive focus when the page loads. Defaults to false.
<!-- Dropdown panel with autofocus -->
<bb-dropdown-panel-ui [autofocus]="true">
<ng-template bbDropdownToggle>
<button>Auto-focused Toggle</button>
</ng-template>
<ng-template bbDropdownMenu>
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
</ul>
</ng-template>
</bb-dropdown-panel-ui>
buttonClass
The buttonClass input sets additional CSS classes for the dropdown toggle button.
<!-- Dropdown panel with custom button styling -->
<bb-dropdown-panel-ui [buttonClass]="'btn-custom-class'">
<ng-template bbDropdownToggle>
<span>Styled Toggle</span>
</ng-template>
<ng-template bbDropdownMenu>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
</ng-template>
</bb-dropdown-panel-ui>
container
The container input specifies which element the dropdown should be appended to.
<!-- Dropdown panel appended to body -->
<bb-dropdown-panel-ui [container]="'body'">
<ng-template bbDropdownToggle>
<button>Body Container</button>
</ng-template>
<ng-template bbDropdownMenu>
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
</ul>
</ng-template>
</bb-dropdown-panel-ui>
disabled
The disabled input disables the dropdown, preventing user interaction. Defaults to false.
<bb-dropdown-panel-ui [disabled]="true">
<ng-template bbDropdownToggle>
<button>Disabled Toggle</button>
</ng-template>
<ng-template bbDropdownMenu>
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
</ul>
</ng-template>
</bb-dropdown-panel-ui>
id
The id input sets a unique identifier for the dropdown. If not provided, a unique string is generated automatically.
<!-- Dropdown panel with custom ID -->
<bb-dropdown-panel-ui [id]="'my-dropdown'">
<ng-template bbDropdownToggle>
<button>Custom ID Toggle</button>
</ng-template>
<ng-template bbDropdownMenu>
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
</ul>
</ng-template>
</bb-dropdown-panel-ui>
inputClassName
The inputClassName input allows you to add custom CSS classes to the underlying input element.
<!-- Dropdown panel with input classes -->
<bb-dropdown-panel-ui [inputClassName]="'form-control-lg'">
<ng-template bbDropdownToggle>
<button>Large Form Control</button>
</ng-template>
<ng-template bbDropdownMenu>
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
</ul>
</ng-template>
</bb-dropdown-panel-ui>
isDropdownOpen
The isDropdownOpen input controls whether the dropdown menu is initially opened or closed.
<!-- Dropdown panel initially open -->
<bb-dropdown-panel-ui [isDropdownOpen]="true">
<ng-template bbDropdownToggle>
<button>Initially Open</button>
</ng-template>
<ng-template bbDropdownMenu>
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
</ul>
</ng-template>
</bb-dropdown-panel-ui>
label
The label input sets the accessible label for the dropdown. Used for form association and accessibility.
<!-- Dropdown panel with label -->
<bb-dropdown-panel-ui [label]="'Select an option'">
<ng-template bbDropdownToggle>
<button>Select</button>
</ng-template>
<ng-template bbDropdownMenu>
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
</ul>
</ng-template>
</bb-dropdown-panel-ui>
panelContentsOverflowVisible
The panelContentsOverflowVisible input determines whether the dropdown panel's contents should be visible when the panel container is overflowed.
<!-- Dropdown panel with overflow visible -->
<bb-dropdown-panel-ui [panelContentsOverflowVisible]="true">
<ng-template bbDropdownToggle>
<button>Overflow Visible</button>
</ng-template>
<ng-template bbDropdownMenu>
<div style="width: 300px; height: 200px;">
<p>This content can overflow the container bounds</p>
</div>
</ng-template>
</bb-dropdown-panel-ui>
position
The position input sets the position of the dropdown menu relative to the toggle. The position will be picked in order of feasibility.
<!-- Dropdown panel with top positioning -->
<bb-dropdown-panel-ui [position]="['top-start', 'top-end', 'bottom-start', 'bottom-end']">
<ng-template bbDropdownToggle>
<button>Top Positioned</button>
</ng-template>
<ng-template bbDropdownMenu>
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
</ul>
</ng-template>
</bb-dropdown-panel-ui>
readonly
The readonly input makes the dropdown toggle read-only, preventing keyboard events from opening the dropdown while maintaining visual appearance.
<!-- Read-only dropdown panel -->
<bb-dropdown-panel-ui [readonly]="true">
<ng-template bbDropdownToggle>
<button>Read-only Toggle</button>
</ng-template>
<ng-template bbDropdownMenu>
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
</ul>
</ng-template>
</bb-dropdown-panel-ui>
Accessibility
This component is built with accessibility in mind. See the information below for supported behaviours 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.
|
Input |
Description |
Type |
|---|---|---|
|
ariaActivedescendant |
Sets the aria-activedescendant attribute |
string |
|
ariaDescribedby |
Sets the aria-describedby attribute |
string |
|
ariaExpanded |
Sets the aria-expanded attribute |
string |
|
ariaInvalid |
Sets the aria-invalid attribute |
string |
|
ariaLabel |
Sets the aria-label attribute |
string |
|
ariaLabelledby |
Sets the aria-labelledby attribute |
string |
|
ariaOwns |
Sets the aria-owns attribute |
string |
- The component manages ARIA attributes for the dropdown and listbox.
- The dropdown and options are labeled and described for screen readers.
- Keyboard navigation and focus management are supported.