Taiga UI 5.0 is out!

Dropdown CORE

Examples API GitHub

On this page

See also

DropdownSelection, DropdownHover, DropdownContext, DropdownOpen
tuiDropdown shows a dropdown with custom template. Use ActiveZone directive to hide dropdown.

See also DropdownOpen

Basic 

    
      
    

      
      
    

  
    
      <button
    tuiButton
    tuiChevron
    type="button"
    [attr.aria-expanded]="open()"
    [tuiDropdown]="dropdownContent"
    [tuiDropdownManual]="open()"
    [tuiObscuredEnabled]="open()"
    (click)="onClick()"
    (tuiActiveZoneChange)="onActiveZone($event)"
    (tuiObscured)="onObscured($event)"
>
    {{ buttonLabel() }}
    <ng-template #dropdownContent>
        <tui-data-list>
            @for (action of actions; track action.title) {
                <button
                    tuiOption
                    type="button"
                    (click)="onSelect(action)"
                >
                    <span tuiTitle>
                        {{ action.title }}
                        <span tuiSubtitle>{{ action.description }}</span>
                    </span>
                </button>
            }
        </tui-data-list>
    </ng-template>
</button>

    

      
      
    

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

tui-data-list {
    gap: 0.25rem;
    padding: 0.5rem;
}

Interesting

You can ask any questions about and will gladly answer! 
    
      
    

      
      
    

  
    
      <p>
    <label class="toggle">
        <input
            tuiSwitch
            type="checkbox"
            [(ngModel)]="open"
        />
        Show help
    </label>
</p>
You can ask any questions about
<code
    tuiDropdown="A directive to show content in a dropdown"
    tuiDropdownDirection="bottom"
    [textContent]="'tuiDropdown'"
    [tuiDropdownManual]="open"
></code>
and
<button
    tuiDropdownDirection="top"
    tuiLink
    type="button"
    [tuiDropdown]="dropdownContent"
    [tuiDropdownManual]="open"
>
    Alex
</button>
will gladly answer!

<ng-template #dropdownContent>
    <div class="dropdown">
        <div
            size="l"
            tuiAvatar="@tui.user"
        >
            <img
                alt=""
                src="assets/images/avatar.jpg"
            />
        </div>
        <div class="text">
            <div class="label">Taiga UI developer</div>
            <div class="name">Alex Inkin</div>
            <div class="account">a.inkin</div>
        </div>
    </div>
</ng-template>

    

      
      
    

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

.dropdown {
    display: flex;
    inline-size: 14rem;
    padding: 0.375rem 0.75rem;
}

.toggle {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.text {
    padding: 0 0.75rem;
}

.label {
    font: var(--tui-typography-body-m);
    color: var(--tui-text-tertiary);
}

.name {
    font: var(--tui-typography-heading-h6);
}

.account {
    font: var(--tui-typography-body-s);
    margin-block-start: 0.25rem;
    color: var(--tui-text-secondary);
}

Change detection 

    
      
    

      
      
    

  
    
      <tui-textfield>
    <label tuiLabel>Changes propagate both ways</label>
    <input
        tuiInput
        [(ngModel)]="value"
    />
</tui-textfield>
<label
    class="flex"
    [tuiDropdown]="dropdownContent"
    [tuiDropdownManual]="open"
>
    <input
        size="s"
        tuiSwitch
        type="checkbox"
        [showIcons]="false"
        [(ngModel)]="open"
    />
    Open dropdown
</label>

<ng-template
    #dropdownContent="polymorpheus"
    polymorpheus
>
    <div class="dropdown">
        <tui-textfield>
            <input
                tuiInput
                [(ngModel)]="value"
            />
            <label tuiLabel>Changes propagate both ways</label>
        </tui-textfield>

        <p>
            Use
            <code>polymorpheus</code>
            directive on the template to make changes propagate both ways
        </p>
        @if (showBigText$ | async) {
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda at corporis ea hic illo ipsa
                laboriosam laudantium nemo neque officiis pariatur quidem quos rerum sunt, temporibus tenetur ullam
                vitae?
            </p>
        }
    </div>
</ng-template>

    

      
      
    

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

.flex {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-start: 1rem;
}

.dropdown {
    max-inline-size: 20rem;
    padding: 1rem;
}

Appearance

Use unencapsulated styles to customize dropdown appearance 
    
      
    

      
      
    

  
    
      <label
    tuiDropdownAlign="center"
    tuiDropdownAppearance="round"
    tuiDropdownDirection="top"
    tuiLabel
    [tuiDropdown]="content"
    [tuiDropdownManual]="open"
>
    <input
        tuiSwitch
        type="checkbox"
        class="tui-space_right-2"
        [showIcons]="false"
        [(ngModel)]="open"
    />
    Show dropdown
    <ng-template #content>
        <blockquote>I'm a customized dropdown!</blockquote>
    </ng-template>
</label>

    

      
      
    

  
    
      tui-dropdown[data-appearance='round'] {
    border-radius: 10rem;
}

Mobile 

    
      
    

      
      
    

  
    
      <tui-textfield
    tuiChevron
    tuiDropdownMobile
>
    <input
        placeholder="Country"
        tuiComboBox
        [(ngModel)]="country"
    />

    <tui-data-list-wrapper
        *tuiDropdown
        [items]="countries | tuiFilterByInput"
    />
</tui-textfield>

<tui-textfield
    tuiChevron
    tuiDropdownSheet="Select user"
    class="tui-space_vertical-4"
    [content]="template"
>
    <input
        placeholder="Select user"
        tuiSelect
        [(ngModel)]="user"
    />
    <tui-data-list-wrapper
        *tuiDropdown
        [itemContent]="template"
        [items]="users"
    />
</tui-textfield>

<tui-textfield
    multi
    tuiChevron
    tuiDropdownMobile
    class="tui-space_vertical-4"
    [open]="open()"
    [stringify]="stringify"
    (openChange)="open.set($event)"
>
    <input
        placeholder="Pick more users"
        tuiInputChip
        [(ngModel)]="selected"
    />

    <tui-input-chip *tuiItem />

    <ng-container *tuiDropdown>
        <tui-data-list-wrapper
            tuiMultiSelectGroup
            [itemContent]="template"
            [items]="users | tuiFilterByInput"
        />
        <button
            appearance="accent"
            size="m"
            tuiButton
            tuiDropdownButton
            type="button"
            (click)="open.set(false)"
        >
            Done
        </button>
    </ng-container>
</tui-textfield>

<tui-textfield class="tui-space_vertical-4">
    <label tuiLabel>Sum</label>
    <input
        prefix="$"
        tuiInputNumber
        [(ngModel)]="sum"
    />
</tui-textfield>

<ng-template
    #template
    let-user
>
    <div [tuiAvatar]="user.name | tuiInitials">
        @if (user.url) {
            <img
                alt=""
                [src]="user.url"
            />
        }
    </div>
    <span tuiTitle>
        <span tuiFade>{{ user.name }}</span>
        <span tuiSubtitle>
            {{ user.balance | tuiAmount: '$' : 'start' }}
        </span>
    </span>
</ng-template>
GitHub StackBlitz