@if (show) {

<sky-dropdown
  #dropdownRef
  [buttonStyle]="buttonStyle"
  [buttonType]="buttonType"
  [disabled]="disabled"
  [horizontalAlignment]="horizontalAlignment"
  [label]="label"
  [messageStream]="messageStream"
  [title]="title"
  [trigger]="trigger"
>
  <sky-dropdown-button> Show dropdown </sky-dropdown-button>

  <sky-dropdown-menu
    #dropdownMenuRef
    [ariaLabelledBy]="menuAriaLabelledBy"
    [ariaRole]="menuAriaRole"
    [useNativeFocus]="useNativeFocus"
    (menuChanges)="onMenuChanges($event)"
  >
    @for (item of items; track item) {
    <sky-dropdown-item [ariaRole]="itemAriaRole">
      <button
        type="button"
        [attr.disabled]="item.disabled ? '' : null"
        (click)="onItemClick(item.name)"
      >
        {{ item.name }}
      </button>
    </sky-dropdown-item>
    }
  </sky-dropdown-menu>
</sky-dropdown>

}