Taiga UI 5.0 is out!

DropdownContext CORE

Examples API GitHub

On this page

See also

Dropdown, DropdownSelection, DropdownHover, DropdownOpen

DropdownContext allows to show custom right click context dropdown.

To close dropdown:

  • Use Esc
  • Make mouse left/right click outside of dropdown content
  • Manually toggle tuiDropdown to false using template reference variable (see first example)

Basic

Make right click on this icon -> 

    
      
    

      
      
    

  
    
      <p>
    Make right click on this icon ->
    <tui-icon
        #dropdown="tuiDropdown"
        icon="@tui.settings"
        tuiDropdownContext
        class="icon"
        [tuiDropdown]="content"
    >
        <ng-template #content>
            <span class="text">Nothing special</span>
            <button
                appearance="icon"
                iconStart="@tui.x"
                size="xs"
                tuiIconButton
                type="button"
                (click)="dropdown.toggle(false)"
            >
                Close
            </button>
        </ng-template>
    </tui-icon>
</p>

    

      
      
    

  
    
      .text {
    display: inline-block;
    margin: 0.4rem 1rem;
}

.icon {
    cursor: context-menu;
}

Context menu

Right-click any table row.

character actor 
    
      
    

      
      
    

  
    
      <p>Right-click any table row.</p>

<table tuiTable>
    <thead>
        <tr>
            @for (column of tableColumns; track column) {
                <th tuiTh>
                    {{ column }}
                </th>
            }
        </tr>
    </thead>
    <tbody tuiTbody>
        @for (rowInfo of tableData; track rowInfo) {
            <tr
                #dropdown="tuiDropdown"
                tuiDropdownContext
                [tuiDropdown]="contextMenu"
            >
                @for (value of getObjectValues(rowInfo); track value) {
                    <td tuiTd>
                        {{ value }}
                    </td>
                }
                <ng-template #contextMenu>
                    <tui-data-list
                        role="menu"
                        tuiDataListDropdownManager
                        class="context-menu"
                    >
                        @for (item of menuItems; track item) {
                            <button
                                tuiOption
                                type="button"
                                [iconEnd]="item.iconName"
                                (click)="printToConsole(item.title, rowInfo); dropdown.toggle(false)"
                            >
                                {{ item.title }}
                            </button>
                        }
                        <button
                            iconEnd="@tui.chevron-right"
                            tuiDropdownAlign="end"
                            tuiDropdownSided
                            tuiOption
                            type="button"
                            [tuiDropdown]="nestedMenu"
                        >
                            More
                        </button>
                    </tui-data-list>
                    <ng-template #nestedMenu>
                        <tui-data-list>
                            @for (option of moreOptions; track option) {
                                <button
                                    tuiOption
                                    type="button"
                                >
                                    {{ option }}
                                </button>
                            }
                        </tui-data-list>
                    </ng-template>
                </ng-template>
            </tr>
        }
    </tbody>
</table>

    

      
      
    

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

.context-menu {
    inline-size: 8rem;
}

[tuiTable] {
    inline-size: 100%;
}

[tuiTh],
[tuiTd] {
    border-inline-start: none;
    border-inline-end: none;
}

[tuiTh] {
    border-block-start: none;
}

[tuiTd] {
    font: var(--tui-typography-body-m) !important;
}

Report mistake form 

    
      
    

      
      
    

  
    
      <p
    tuiDropdownContext
    [tuiDropdown]="reportForm"
>
    Some text with a mistake. Right-click it.
</p>

<p
    tuiDropdownContext
    [tuiDropdown]="reportForm"
>
    Another text
</p>

<ng-template
    #reportForm
    let-close
>
    <form
        class="container"
        [formGroup]="form"
    >
        <tui-textfield>
            <label tuiLabel>Have you found a mistake?</label>
            <textarea
                formControlName="reportText"
                tuiTextarea
                [max]="3"
                [min]="3"
            ></textarea>
        </tui-textfield>

        <button
            tuiButton
            type="button"
            class="button"
            (click)="report(); close()"
        >
            SEND IT
        </button>
    </form>
</ng-template>

    

      
      
    

  
    
      .container {
    display: flex;
    inline-size: 20rem;
    margin: 1rem;
    flex-direction: column;
}

.button {
    margin: 1rem auto 0;
}
GitHub StackBlitz