DataList allows to make lists or menus
<button
tuiButton
tuiChevron
tuiDropdownAuto
tuiDropdownRole="menu"
type="button"
[tuiDropdown]="content"
>
Menu
</button>
<ng-template #content>
<tui-data-list>
@for (group of groups; track group) {
@if (!group.label) {
<hr />
}
<tui-opt-group [label]="group.label">
@for (item of group.items; track item) {
<a
#rla="routerLinkActive"
role="menuitemradio"
routerLinkActive
tuiOption
[attr.aria-checked]="rla.isActive"
[iconEnd]="rla.isActive ? '@tui.check' : ''"
[routerLink]="item.routerLink"
>
{{ item.label }}
</a>
}
</tui-opt-group>
}
</tui-data-list>
</ng-template>
TuiDataListDropdownManager for nested menus
<button
appearance="flat"
iconStart="@tui.ellipsis-vertical"
tuiIconButton
type="button"
[tuiAppearanceState]="open ? 'hover' : null"
[tuiDropdown]="content"
[(tuiDropdownOpen)]="open"
>
Open
</button>
<ng-template #content>
<tui-data-list
tuiDataListDropdownManager
[size]="size"
>
@let frenchFries = 'French Fries';
<button
tuiOption
type="button"
(click)="selectOption(frenchFries)"
>
{{ frenchFries }}
</button>
<button
iconEnd="@tui.chevron-right"
tuiDropdownAlign="end"
tuiDropdownManual
tuiDropdownSided
tuiOption
type="button"
[tuiDropdown]="burgersTmp"
>
Burgers
</button>
<button
iconEnd="@tui.chevron-right"
tuiDropdownAlign="end"
tuiDropdownManual
tuiDropdownSided
tuiOption
type="button"
[tuiDropdown]="drinksTmp"
>
Drinks
</button>
@let item = 'Ice Cream';
<button
tuiOption
type="button"
(click)="selectOption(item)"
>
{{ item }}
</button>
</tui-data-list>
<ng-template #burgersTmp>
<tui-data-list tuiDataListDropdownManager>
@for (burger of burgers; track burger) {
<button
tuiOption
type="button"
(click)="selectOption(burger)"
>
{{ burger }}
</button>
}
<button
iconEnd="@tui.chevron-right"
iconStart="@tui.menu"
tuiDropdownAlign="end"
tuiDropdownManual
tuiDropdownSided
tuiOption
type="button"
[tuiDropdown]="drinksTmp"
>
Nested menu
</button>
</tui-data-list>
</ng-template>
<ng-template #drinksTmp>
<tui-data-list [size]="size">
@for (drink of drinks; track drink) {
<button
tuiOption
type="button"
(click)="selectOption(drink)"
>
{{ drink }}
</button>
}
</tui-data-list>
</ng-template>
</ng-template>
<h3>Multi select control</h3>
<button
appearance="flat"
tuiButtonSelect
tuiChevron
tuiIconButton
type="button"
[tuiAppearanceState]="open ? 'hover' : null"
[(ngModel)]="value"
[(open)]="open"
>
Open
<tui-data-list
*tuiDropdown
size="l"
[style.width.rem]="12"
>
<tui-opt-group tuiMultiSelectGroup>
<tui-opt-group label="Main dishes menu with long label">
@for (burger of burgers; track burger) {
<button
tuiOption
type="button"
[value]="burger"
>
{{ burger }}
</button>
}
</tui-opt-group>
<tui-opt-group label="Drinks">
@for (drink of drinks; track drink) {
<button
tuiOption
type="button"
[value]="drink"
>
{{ drink }}
</button>
}
</tui-opt-group>
</tui-opt-group>
</tui-data-list>
</button>
<p>{{ value }}</p>
<h3>Separate toggles</h3>
<button
appearance="flat"
tuiChevron
tuiIconButton
type="button"
[tuiAppearanceState]="label ? 'hover' : null"
[tuiDropdown]="separate"
[tuiDropdownMaxHeight]="500"
[(tuiDropdownOpen)]="label"
>
Open
</button>
<ng-template #separate>
<tui-data-list [style.width.rem]="10">
<label tuiOption>
First
<input
tuiCheckbox
type="checkbox"
[(ngModel)]="first"
/>
</label>
<label tuiOption>
Second
<input
tuiSwitch
type="checkbox"
[(ngModel)]="second"
/>
</label>
</tui-data-list>
</ng-template>
<tui-textfield
multi
tuiChevron
class="control"
[content]="valueContent"
[tuiTextfieldCleaner]="false"
>
<input
tuiInputChip
tuiSelectLike
[(ngModel)]="value"
/>
<ng-template tuiItem />
<custom-list
*tuiDropdown
[items]="items"
/>
</tui-textfield>
TuiDataListDropdownManager for nested menus Email: mail@mail.ru
Chosen date: 01.01.2020
Range date: 12.05.2026 – 12.05.2027
Dol - 75, Eur - 87
<button
appearance="outline"
iconStart="@tui.ellipsis-vertical"
size="m"
tuiButton
tuiDropdownLimitWidth="fixed"
type="button"
class="example"
[tuiDropdown]="content"
[(tuiDropdownOpen)]="dropdownOpen"
>
List of components
</button>
<ng-template #content>
<tui-data-list tuiDataListDropdownManager>
<button
iconEnd="@tui.chevron-right"
tuiDropdownAlign="end"
tuiDropdownDirection="top"
tuiDropdownSided
tuiOption
type="button"
[tuiDropdown]="money"
[tuiDropdownManual]="true"
>
💰 Money:
</button>
<button
automation-id="tui-data-list-calendar-option"
iconEnd="@tui.chevron-right"
tuiDropdownAlign="end"
tuiDropdownLimitWidth="auto"
tuiDropdownManual
tuiDropdownSided
tuiOption
type="button"
[tuiDropdown]="calendar"
>
📅 Calendar: {{ dateValue }}
</button>
<button
automation-id="tui-data-list-email-option"
iconEnd="@tui.chevron-right"
tuiDropdownAlign="end"
tuiDropdownManual
tuiDropdownSided
tuiOption
type="button"
[tuiDropdown]="input"
>
📧 Email: {{ emailValue }}
</button>
<button
automation-id="tui-data-list-range-option"
iconEnd="@tui.chevron-right"
tuiDropdownAlign="end"
tuiDropdownDirection="top"
tuiDropdownLimitWidth="auto"
tuiDropdownManual
tuiDropdownSided
tuiOption
type="button"
[tuiDropdown]="range"
>
⌛ Range: {{ rangeValue }}
</button>
</tui-data-list>
<ng-template #money>
<tui-textfield automation-id="tui-data-money-input">
<input
name="moneyValue"
tuiInput
[(ngModel)]="moneyValue"
/>
<label tuiLabel>RUB</label>
</tui-textfield>
<tui-data-list tuiDataListDropdownManager>
<button
iconEnd="@tui.chevron-right"
tuiDropdownAlign="end"
tuiDropdownDirection="bottom"
tuiDropdownLimitWidth="auto"
tuiDropdownSided
tuiOption
type="button"
[tuiDropdown]="currency"
[tuiDropdownManual]="true"
>
Exchange Rates:
</button>
</tui-data-list>
</ng-template>
<ng-template #calendar>
<tui-calendar
[value]="dateValue"
(dayClick)="onDayClick($event)"
(mousedown.zoneless.prevent)="(0)"
/>
</ng-template>
<ng-template #input>
<tui-textfield automation-id="tui-data-list-email-field">
<input
name="emailValue"
tuiInput
[(ngModel)]="emailValue"
/>
<label tuiLabel>Email</label>
</tui-textfield>
</ng-template>
<ng-template #currency>
<div class="example">
<div
tuiGroup
class="group"
>
<tui-textfield>
<input
tuiInput
[(ngModel)]="dollar"
/>
<label tuiLabel>1 Rub = (X) Dollars</label>
</tui-textfield>
<tui-textfield>
<input
tuiInput
[(ngModel)]="euro"
/>
<label tuiLabel>1 Rub = (Y) Euros</label>
</tui-textfield>
</div>
<ul class="exchange tui-list tui-list_large">
<li class="tui-list__item">
<span>{{ moneyValue / dollar | tuiAmount: 'USD' }}</span>
</li>
<li class="tui-list__item">
<span>{{ moneyValue / euro | tuiAmount: 'EUR' }}</span>
</li>
</ul>
</div>
</ng-template>
<ng-template #range>
<tui-textfield
class="form"
[tuiTextfieldCleaner]="false"
>
<label tuiLabel>Range</label>
<input
tuiInputDateRange
[(ngModel)]="rangeValue"
/>
<tui-calendar-range *tuiDropdown />
</tui-textfield>
</ng-template>
</ng-template>
<div class="example">
<p>Email: {{ emailValue }}</p>
<p>Chosen date: {{ dateValue }}</p>
<p>Range date: {{ rangeValue }}</p>
<p>Dol - {{ dollar }}, Eur - {{ euro }}</p>
</div>
.example {
margin-block-end: 0.5rem;
min-inline-size: 20.25rem;
}
.form {
min-inline-size: 18.75rem;
overflow: hidden;
}
.exchange {
margin: 1.5625rem;
}
.group {
max-inline-size: 30.25rem;
}
<button
appearance="flat"
tuiButton
tuiChevron
type="button"
[tuiDropdown]="content"
[tuiDropdownLimitWidth]="isMobile ? 'fixed' : 'min'"
[tuiDropdownMaxHeight]="700"
[(tuiDropdownOpen)]="open"
>
Why Taiga UI?
</button>
<ng-template #content>
<tui-data-list>
@for (group of groups; track group) {
<tui-opt-group [label]="group.label">
@for (item of group.items; track item) {
<button
tuiOption
type="button"
class="option"
(click)="open = false"
>
{{ item }}
</button>
}
</tui-opt-group>
}
</tui-data-list>
</ng-template>