@if (breakpoint() !== 'xs' && secondaryActionComponents().length < 5) {
  <div class="sky-summary-action-bar-secondary-buttons" role="menubar">
    <ng-container *ngTemplateOutlet="summaryActionBarSecondaryActions" />
  </div>
} @else {
  <sky-dropdown
    buttonType="select"
    [attr.title]="'skyux_summary_action_bar_open_secondary' | skyLibResources"
    [label]="'skyux_summary_action_bar_open_secondary' | skyLibResources"
    [messageStream]="dropdownMessageStream"
  >
    <sky-dropdown-button>
      <sky-icon icon="ellipsis" />
    </sky-dropdown-button>
    <sky-dropdown-menu>
      <ng-container *ngTemplateOutlet="summaryActionBarSecondaryActions" />
    </sky-dropdown-menu>
  </sky-dropdown>
}
<ng-template #summaryActionBarSecondaryActions>
  <ng-content select="sky-summary-action-bar-secondary-action" />
</ng-template>