<sky-dropdown>
  <sky-dropdown-button> Show dropdown </sky-dropdown-button>
  <sky-dropdown-menu>
    @for (item of items; track item.name) {
      <sky-dropdown-item>
        <button
          type="button"
          [attr.disabled]="item.disabled() ? '' : null"
          (click)="actionClicked(item.name)"
        >
          {{ item.name }}
        </button>
      </sky-dropdown-item>
    }
  </sky-dropdown-menu>
</sky-dropdown>
<br />

<sky-dropdown buttonType="context-menu">
  <sky-dropdown-button> Show dropdown </sky-dropdown-button>
  <sky-dropdown-menu>
    @for (item of items; track item.name) {
      <sky-dropdown-item>
        <button
          type="button"
          [attr.disabled]="item.disabled() ? '' : null"
          (click)="actionClicked(item.name)"
        >
          {{ item.name }}
        </button>
      </sky-dropdown-item>
    }
  </sky-dropdown-menu>
</sky-dropdown>
<br />

<sky-dropdown label="Filter">
  <sky-dropdown-button><sky-icon icon="filter" /></sky-dropdown-button>
  <sky-dropdown-menu>
    @for (item of items; track item.name) {
      <sky-dropdown-item>
        <button
          type="button"
          [attr.disabled]="item.disabled() ? '' : null"
          (click)="actionClicked(item.name)"
        >
          {{ item.name }}
        </button>
      </sky-dropdown-item>
    }
  </sky-dropdown-menu>
</sky-dropdown>
