Menu

<tx-menu ariaLabel="Document" [model]="items" (itemSelected)="run($event)" />

<ul class="tasks">  @for (task of tasks(); track task.title) {    <li [class.done]="task.done">      <span>{{ task.title }}</span>      <button        txButton        icon="ellipsis-h"        size="small"        severity="secondary"        [text]="true"        [attr.aria-label]="'Actions for ' + task.title"        (click)="current = task; actions.toggle($event)"        (keydown.arrowdown)="          current = task; actions.show($event, 'first'); $event.preventDefault()        "        aria-haspopup="menu"      ></button>    </li>  }</ul><tx-menu  #actions  popup  placement="bottom-end"  ariaLabel="Task actions"  [model]="items"  (itemSelected)="run($event)"/><p class="note">  <button txButton size="small" severity="secondary" [outlined]="true" [txMenuTrigger]="sort">    Sort by  </button>  <tx-menu #sort popup ariaLabel="Sort by" [model]="sorting" /></p>

<tx-menu ariaLabel="Documentation" [model]="links" />

<div class="layout">  <tx-tiered-menu ariaLabel="Message" [model]="items" (itemSelected)="run($event)" />  <div>    <button      txButton      icon="ellipsis-v"      severity="secondary"      [outlined]="true"      [txMenuTrigger]="more"    >      More    </button>    <tx-tiered-menu #more popup ariaLabel="More" [model]="items" (itemSelected)="run($event)" />  </div></div>

<table #table class="files" aria-label="Files">  <thead>    <tr>      <th>Name</th>      <th>Size</th>    </tr>  </thead>  <tbody>    @for (file of files(); track file.name) {      <tr        tabindex="0"        [class.selected]="selected() === file"        (contextmenu)="selected.set(file)"        (focus)="selected.set(file)"      >        <td>{{ file.name }}</td>        <td>{{ file.size }}</td>      </tr>    }  </tbody></table><p class="hint">Right-click a row, or focus it and press Shift + F10.</p><tx-context-menu  ariaLabel="File actions"  [target]="table"  [model]="items"  (itemSelected)="run($event)"/>

<button txButton severity="secondary" [outlined]="true" [txMenuTrigger]="assign">  Assign to</button><tx-menu #assign popup ariaLabel="Assign to" [model]="people">  <ng-template txMenuItem let-item>    <tx-avatar size="small" [name]="item.label" />    <span class="person">      {{ item.label }}      <small>{{ item.data }}</small>    </span>  </ng-template></tx-menu>

<tx-menu  ariaLabel="Workspace"  [model]="items"  [dt]="{    root: { padding: '8px', gap: '4px' },    item: {      padding: '10px 14px',      borderRadius: '10px',      focusBackground: 'var(--tx-highlight-background)',    },  }"/>