github
DocsBlog
Chapters
fontcolor_theme
Desktop UI

Dropdown

PreviewHTML
Toggle dropdownHover dropdown

Split buttonarrow_down

Menuarrow_down

API <dui-dropdown>(source)

searchclear

A dropdown component that can be used to display a list of items or content in a popup.

It can be opened and closed programmatically or via user interaction.

By monitoring the focused elements, it is possible to add interactive elements inside the dropdown.

Name
Description 
@Input() allowedFocus?: Element | ElementRef<any> | (Element | ElementRef<any>)[]
Additional elements that are allowed to have focus without closing the dropdown.cdk-global-overlay-wrapper 
@Input() center?: boolean
Whether the dropdown aligns to the horizontal center. 
@Input() connectedPositions?: ConnectedPosition[]
Additional positions to connect the dropdown to the target element. 
@Input() dropdownClass?: string
@Input() hasBackdrop?: boolean
@Input() height?: string | number
@Input() host?: Element | ElementRef<any>
If open() is called without a target, the host element is used as the target. THe target elements is allowed to have focus without closing the dropdown. 
@Input() keepOpen?: boolean
Keeps the dropdown open when it should be closed, ideal for debugging purposes. 
@Input() maxHeight?: string | number
@Input() maxWidth?: string | number
@Input() minHeight?: string | number
@Input() minWidth?: string | number
@Input() normalize-style?: boolean
@Input() overlay?: boolean
Whether is styled as overlay 
@Input() scrollbars?: boolean
Whether the dropdown should allow scrollbars. 
@Input() show?: boolean
@Input() width?: string | number
@Output() hidden?: void
Triggered when the dropdown is closed. 
@Output() lostFocus?: FocusEvent
Triggered when the dropdown loses focus and is about to close. 
@Output() showChange?: boolean
Triggered when the dropdown is opened or closed. 
@Output() shown?: void
Triggered when the dropdown is opened. 
dropdownTemplate: TemplateRef<any>
isOpen: WritableSignal<boolean>
overlayRef: OverlayRef
close(): void
focus(): void
open(target: 'null' | EventTarget | Element | 'center' | MouseEvent | ElementRef<any>, initiator: HTMLElement | ElementRef<any> | {height: number, width: number, x: number, y: number}): void
setContainer(container?: TemplateRef<any>): void
setInitiator(initiator: HTMLElement | ElementRef<any> | {height: number, width: number, x: number, y: number}): void
toggle(target: 'null' | EventTarget | Element | 'center' | MouseEvent | ElementRef<any>): boolean

API <dui-dropdown-item>(source)

searchclear

Interactive item inside a dropdown.

<dui-dropdown>
    <dui-dropdown-item (click)="doSomething()">Click me</dui-dropdown-item>
    <dui-dropdown-item [selected]="true">Selected item</dui-dropdown-item>
    <dui-dropdown-item [disabled]="true">Disabled item</dui-dropdown-item>
</dui-dropdown>
Name
Description 
@Input() active?: boolean
Whether the button is active (pressed) 
@Input() checkbox?: boolean
When set to true, the item is optimised to display left-aligned checkboxes next to the text. 
@Input() closeOnClick?: boolean
@Input() disabled?: boolean
@Input() selected?: boolean
@Output() activeChange?: boolean
@Output() destroy?: void
activate(): void

API [openDropdown](source)

searchclear

A directive to open the given dropdown on regular left click.

<dui-dropdown #dropdown>
</dui-dropdown>
<dui-button [openDropdown]="dropdown">Open dropdown</dui-button>
Name
Description 
@Input() openDropdown?: DropdownComponent
@Input() openDropdownHover?: boolean
activeComponent: 'null' | ActiveComponent
hiddenSub: OutputRefSubscription
openSub: OutputRefSubscription

API [openDropdownHover](source)

searchclear

A directive to open the given dropdown on mouseenter, and closes automatically on mouseleave. Dropdown keeps open when mouse enters the dropdown.

<dui-dropdown #dropdown>
</dui-dropdown>
<dui-button [openDropdownHover]="dropdown">Open on hover</dui-button>
Name
Description 
@Input() openDropdownHover?: DropdownComponent
@Input() openDropdownHoverCloseTimeout?: number
In milliseconds.

API [contextDropdown](source)

searchclear

A directive to open the given dropdown upon right click / context menu.

<dui-dropdown #dropdown>
</dui-dropdown>

<dui-button [contextDropdown]="dropdown">Open context menu</dui-button>
Name
Description 
@Input() contextDropdown?: DropdownComponent

API [dropdownContainer](source)

searchclear

This directive is necessary if you want to load and render the dialog content only when opening the dialog. Without it, it is immediately rendered, which can cause performance and injection issues.

<dui-dropdown>
    <ng-container *dropdownContainer>
        Dynamically created upon dropdown instantiation.
    </ng-container>
</dui-dropdown>
Name
Description 
template: TemplateRef<any>

API <dui-dropdown-splitter>, <dui-dropdown-separator>(source)

A component that acts as a visual separator or splitter inside a dropdown.

<dui-dropdown>
    <dui-dropdown-item>Item 1</dui-dropdown-item>
    <dui-dropdown-separator />
    <dui-dropdown-item>Item 2</dui-dropdown-item>
</dui-dropdown>