Taiga UI 5.0 is out!

DropdownOpen CORE

Examples API GitHub

On this page

See also

Dropdown, DropdownSelection, DropdownHover, DropdownContext

DropdownOpen is a composite dropdown directive, similar to manual dropdown, but it also takes care of opening and closing on its own.

If an element is a textfield ( input or textarea ), arrow down press opens a dropdown. The next press focuses the first item from the list.

If it is not a textfield, click opens and closes a dropdown. By default directive is applied to the first focusable element inside. If you want another element to be the host, use #tuiDropdownHost reference.

Use tuiDropdownAuto selector with no binding if you do not want to track open state

Menu 

    
      
    

      
      
    

  
    
      <button
    appearance="flat"
    iconEnd="@tui.chevron-right"
    size="m"
    tuiButton
    tuiDropdownAlign="end"
    type="button"
    [tuiAppearanceState]="open ? 'active' : null"
    [tuiDropdown]="dropdown"
    [tuiDropdownSided]="true"
    [(tuiDropdownOpen)]="open"
>
    Button
</button>
<ng-template
    #dropdown
    let-close
>
    <tui-data-list>
        <tui-opt-group>
            @for (item of items; track item) {
                <button
                    tuiOption
                    type="button"
                    (click)="onClick()"
                >
                    {{ item }}
                </button>
            }
        </tui-opt-group>
        <hr />
        <tui-opt-group>
            <button
                tuiOption
                type="button"
                (click)="close()"
            >
                Nevermind
            </button>
        </tui-opt-group>
    </tui-data-list>
</ng-template>

    

      
      
    

  
    
      [tuiButton]::after {
    font-size: 1rem;
}

With custom host 

    
      
    

      
      
    

  
    
      <div
    tuiDropdownLimitWidth="fixed"
    tuiGroup
    [tuiDropdown]="dropdown"
    [(tuiDropdownOpen)]="open"
>
    <button
        size="l"
        tuiButton
        type="button"
    >
        Button that does not open dropdown
    </button>
    <button
        #tuiDropdownHost
        size="l"
        tuiChevron
        tuiIconButton
        type="button"
        [style.flex]="'0 0 auto'"
    >
        Menu
    </button>
</div>
<ng-template #dropdown>
    <tui-textfield
        tuiChevron
        class="margin"
    >
        <label tuiLabel>Nested Select</label>

        <input
            tuiSelect
            [(ngModel)]="selected"
        />

        <tui-data-list-wrapper
            *tuiDropdown
            [items]="selectItems"
        />
    </tui-textfield>
    <tui-data-list>
        @for (item of items; track item) {
            <button
                tuiOption
                type="button"
                (click)="onClick()"
            >
                {{ item }}
            </button>
        }
    </tui-data-list>
</ng-template>

    

      
      
    

  
    
      :host {
    display: block;
    inline-size: max-content;
}

.margin {
    margin: 1rem;
}

With link 

    
      
    

      
      
    

  
    
      <button
    tuiChevron
    tuiDropdownAlign="end"
    tuiLink
    type="button"
    class="link"
    [iconStart]="ascending ? '@tui.chevron-up' : '@tui.chevron-down'"
    [textContent]="primary"
    [tuiDropdown]="dropdown"
    [(tuiDropdownOpen)]="open"
></button>

<ng-template #dropdown>
    <tui-data-list>
        @for (group of items; track group) {
            <tui-opt-group>
                @for (item of group; track item) {
                    <button
                        tuiOption
                        type="button"
                        class="item"
                        (click)="onClick(item)"
                    >
                        {{ item }}
                        @if (itemIsActive(item)) {
                            <tui-icon icon="@tui.check" />
                        }
                    </button>
                }
            </tui-opt-group>
            <hr />
        }
    </tui-data-list>
</ng-template>

    

      
      
    

  
    
      @import '@taiga-ui/styles/utils.less';

:host {
    display: block;
    text-align: end;
}

.link {
    font-size: 1.0625rem;
}

.item {
    min-inline-size: 12.5rem;
}

Complex example 

    
      
    

      
      
    

  
    
      <form [formGroup]="form">
    <button
        appearance="outline-grayscale"
        formControlName="control"
        tuiButton
        tuiButtonSelect
        type="button"
        [tuiAppearanceMode]="length ? 'checked' : null"
        [(open)]="open"
        (keydown.delete)="form.reset()"
    >
        {{ text }}
        <button
            appearance="icon"
            size="xs"
            tabindex="-1"
            tuiChevron
            tuiIconButton
            type="reset"
            [iconStart]="length ? '@tui.x' : ''"
            (mousedown.zoneless.prevent)="(0)"
        >
            Reset
        </button>

        <tui-data-list
            *tuiDropdown
            tuiMultiSelectGroup
        >
            @for (item of items; track item) {
                <button
                    tuiOption
                    [value]="item"
                >
                    {{ item }}
                </button>
            }
        </tui-data-list>
    </button>
</form>

Custom positioning 

    
      
    

      
      
    

  
    
      <button
    iconStart="@tui.arrow-up-right"
    size="s"
    topRight
    tuiDropdownAuto
    tuiIconButton
    type="button"
    [tuiDropdown]="content"
>
    Show details
</button>
<ng-template #content>
    <div class="dropdown">
        <h2 class="tui-text_h6">Custom positioning</h2>
        You can achieve this with
        <code>tuiAsPositionAccessor</code>
        helper and a custom directive
    </div>
</ng-template>

    

      
      
    

  
    
      .dropdown {
    inline-size: 13rem;
    padding: 0 1rem 1rem;
    line-height: 2;
}
GitHub StackBlitz