Dropdown

The bsDropdown structural directive on an <ng-template> inside an element turns that element into a menu button. A click toggles the panel, rendered at the end of <body> so no overflow: hidden ancestor clips it; ArrowDown and ArrowUp open it on the first and the last item. Escape, a click outside, tabbing out or choosing an item closes it, and focus returns to the trigger. The directive's value is the placement — bottom-start (the default), bottom-end, top-start or top-end — and it flips vertically when there is no room.

Any content

With hasPopup="dialog" the panel holds content that is not a menu — a calendar, a form — and takes focus itself.

  
    
      
        <button [color]="colors.primary">
        
    
      
          Actions
        
    
      
          <ng-container *bsDropdown>
        
    
      
            <bs-dropdown-menu (itemSelect)="chosen.set($event.value)">
        
    
      
              <bs-dropdown-header>File</bs-dropdown-header>
        
    
      
              <bs-dropdown-item [value]="'new'">New</bs-dropdown-item>
        
    
      
              <bs-dropdown-item [value]="'save'" [disabled]="true">Save</bs-dropdown-item>
        
    
      
              <bs-dropdown-divider></bs-dropdown-divider>
        
    
      
              <bs-dropdown-item><a href="https://getbootstrap.com">Bootstrap</a></bs-dropdown-item>
        
    
      
            </bs-dropdown-menu>
        
    
      
          </ng-container>
        
    
      
        </button>
        
    
      
        
        
    
      
        <button [color]="colors.primary">
        
    
      
          Pick a date
        
    
      
          <ng-container *bsDropdown="'bottom-start'; hasPopup: 'dialog'">
        
    
      
            <bs-calendar></bs-calendar>
        
    
      
          </ng-container>
        
    
      
        </button>

  
    
      
        import { Component, signal } from '@angular/core';
        
    
      
        import { Color } from '@mintplayer/ng-bootstrap';
        
    
      
        import { BsButtonTypeDirective } from '@mintplayer/ng-bootstrap/button-type';
        
    
      
        import {
        
    
      
          BsDropdownDirective,
        
    
      
          BsDropdownMenuComponent,
        
    
      
          BsDropdownItemComponent,
        
    
      
          BsDropdownHeaderComponent,
        
    
      
          BsDropdownDividerComponent,
        
    
      
        } from '@mintplayer/ng-bootstrap/dropdown';
        
    
      
        
        
    
      
        @Component({
        
    
      
          selector: 'my-dropdown-demo',
        
    
      
          templateUrl: './my-dropdown-demo.component.html',
        
    
      
          imports: [
        
    
      
            BsDropdownDirective,
        
    
      
            BsDropdownMenuComponent,
        
    
      
            BsDropdownItemComponent,
        
    
      
            BsDropdownHeaderComponent,
        
    
      
            BsDropdownDividerComponent,
        
    
      
            BsButtonTypeDirective,
        
    
      
          ],
        
    
      
        })
        
    
      
        export class MyDropdownDemoComponent {
        
    
      
          protected readonly colors = Color;
        
    
      
          protected readonly chosen = signal<unknown>(null);
        
    
      
        }