Dropdowns

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included dropdown directives.

The easiest way to add the dropdown component to your app (will be added to the root module)

Wrap the dropdown’s toggle (your button or link) and the dropdown menu within dropdown. Dropdowns can be triggered from <a> or <button> elements to better fit your potential needs.

Basic
#

Any <button> can became a dropdown toggle with few markup changes. Here’s how dropdown works with single button

<div class="btn-group" dropdown>
  <button id="button-basic" dropdownToggle type="button" class="btn btn-primary dropdown-toggle"
          aria-controls="dropdown-basic">
    Button dropdown <span class="caret"></span>
  </button>
  <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
      role="menu" aria-labelledby="button-basic">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
    <li class="divider dropdown-divider"></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
    </li>
  </ul>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-dropdown-basic',
  templateUrl: './basic.html',
  standalone: false
})
export class DemoDropdownBasicComponent {}

With animation
#

You can enable animation via isAnimated input or config option

<div class="btn-group" dropdown>
  <button id="button-animated" dropdownToggle type="button" class="btn btn-primary dropdown-toggle"
          aria-controls="dropdown-animated">
    Button dropdown <span class="caret"></span>
  </button>
  <ul id="dropdown-animated" *dropdownMenu class="dropdown-menu"
      role="menu" aria-labelledby="button-animated">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a>
    </li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else
      here</a></li>
  </ul>
</div>

import { Component } from '@angular/core';
import { BsDropdownConfig } from 'ngx-bootstrap/dropdown';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-dropdown-animation',
  templateUrl: './animated.html',
  providers: [{ provide: BsDropdownConfig, useValue: { isAnimated: true, autoClose: true } }],
  standalone: false
})
export class DemoDropdownAnimatedComponent {}

Trigger by tag <a>
#

Click me for a dropdown, yo!

<span dropdown (onShown)="onShown()" (onHidden)="onHidden()" (isOpenChange)="isOpenChange()">
  <a href id="basic-link" dropdownToggle (click)="false"
     aria-controls="basic-link-dropdown">Click me for a dropdown, yo!</a>
  <ul id="basic-link-dropdown" *dropdownMenu class="dropdown-menu"
      role="menu" aria-labelledby="basic-link">
    <li *ngFor="let choice of items">
      <a class="dropdown-item" href="#">{{choice}}</a>
    </li>
  </ul>
</span>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-dropdown-anchor-trigger',
  templateUrl: './anchor-trigger.html',
  standalone: false
})
export class DemoDropdownAnchorTriggerComponent {
  items: string[] = [
    'The first choice!',
    'And another choice for you.',
    'but wait! A third!'
  ];

  onHidden(): void {
    console.log('Dropdown is hidden');
  }
  onShown(): void {
    console.log('Dropdown is shown');
  }
  isOpenChange(): void {
    console.log('Dropdown state is changed');
  }
}

Split button dropdowns
#

Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of .dropdown-toggle-split for proper spacing around the dropdown caret.

<div class="btn-group" dropdown>
  <button type="button" class="btn btn-danger">Action</button>
  <button id="button-split" type="button" dropdownToggle class="btn btn-danger dropdown-toggle dropdown-toggle-split"
          aria-controls="dropdown-split">
    <span class="caret"></span>
    <span class="sr-only visually-hidden">Split button!</span>
  </button>
  <ul id="dropdown-split" *dropdownMenu class="dropdown-menu"
      role="menu" aria-labelledby="button-split">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a>
    </li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else
      here</a></li>
    <li class="divider dropdown-divider"></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
    </li>
  </ul>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-dropdown-split',
  templateUrl: './split.html',
  standalone: false
})
export class DemoDropdownSplitComponent {}

Manual triggering
#

Dropdown can be triggered by show, hide and toggle methods from directive
Use method toggle(true) if you want to toggle the dropdown or toggle(false) if you want to only close opened dropdown.

<div class="btn-group" dropdown #dropdown="bs-dropdown" [autoClose]="false">
  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
    Button dropdown <span class="caret"></span>
  </button>
  <ul id="dropdown-triggers-manual" *dropdownMenu class="dropdown-menu"
      role="menu" aria-labelledby="button-triggers-manual">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a>
    </li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else
      here</a></li>
    <li class="divider dropdown-divider"></li>
  </ul>
</div>
<button type="button" class="btn btn-primary" (click)="dropdown.toggle(true)">Toggle</button>
<button type="button" class="btn btn-primary" (click)="dropdown.show()">Show</button>
<button type="button" class="btn btn-primary" (click)="dropdown.hide()">Hide</button>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-dropdown-triggers-manual',
  templateUrl: './triggers-manual.html',
  standalone: false
})
export class DemoDropdownTriggersManualComponent {
}

Trigger by isOpen property
#

Dropdown can be shown or hidden by changing isOpen input property

<div class="btn-group" dropdown #dropdown="bs-dropdown" [autoClose]="false">
  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
    Button dropdown <span class="caret"></span>
  </button>
  <ul *dropdownMenu class="dropdown-menu" role="menu">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a>
    </li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else
      here</a></li>
  </ul>
</div>
<button type="button" class="btn btn-primary" (click)="dropdown.isOpen = !dropdown.isOpen">Toggle</button>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-dropdown-trigger-by-isopen',
  templateUrl: './trigger-by-isopen-property.html',
  standalone: false
})
export class DemoDropdownByIsOpenPropComponent {
}

Use isDisabled property to make dropdown disabled.

<div class="btn-group" dropdown [isDisabled]="disabled">
  <button id="button-disabled-menu" dropdownToggle type="button" class="btn btn-primary dropdown-toggle"
          aria-controls="dropdown-disabled-menu">
    Button dropdown <span class="caret"></span>
  </button>
  <ul id="dropdown-disabled-menu" *dropdownMenu class="dropdown-menu"
      role="menu" aria-labelledby="button-disabled-menu">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a>
    </li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else
      here</a></li>
    <li class="divider dropdown-divider"></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
    </li>
  </ul>
</div>
<button type="button" class="btn btn-warning" (click)="disabled = !disabled">
  Enable/Disable
</button>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-dropdown-disabled',
  templateUrl: './disabled-menu.html',
  standalone: false
})
export class DemoDropdownDisabledComponent {
  disabled = false;
}

Mark item as disabled
#

Add a disabled class to <a> to make it as disabled.

<div class="btn-group" dropdown>
  <button id="button-disabled-item" dropdownToggle type="button" class="btn btn-primary dropdown-toggle"
          aria-controls="dropdown-disabled-item">
    Button dropdown <span class="caret"></span>
  </button>
  <ul id="dropdown-disabled-item" *dropdownMenu class="dropdown-menu"
      role="menu" aria-labelledby="button-disabled-item">
    <li class="disabled" role="menuitem"><a class="dropdown-item disabled" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a>
    </li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else
      here</a></li>
  </ul>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-dropdown-disabled-item',
  templateUrl: './disabled-item.html',
  standalone: false
})
export class DemoDropdownDisabledItemComponent {}

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add class .dropdown-menu-right to a dropdownMenu to right align the dropdown menu.

<div class="btn-group" dropdown placement="bottom right">
  <button id="button-alignment" dropdownToggle type="button"
          class="btn btn-primary dropdown-toggle" aria-controls="dropdown-alignment">
    This dropdown's menu is right-aligned <span class="caret"></span>
  </button>
  <ul id="dropdown-alignment" *dropdownMenu class="dropdown-menu dropdown-menu-right"
      role="menu" aria-labelledby="button-alignment">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
    <li class="divider dropdown-divider"></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-dropdown-alignment',
  templateUrl: './menu-alignment.html',
  standalone: false
})
export class DemoDropdownAlignmentComponent {}

Inside click
#

By default, a dropdown menu closes on document click, even if you clicked on an element inside the dropdown. Use [insideClick]="true" to allow click inside the dropdown

<div class="btn-group" dropdown [insideClick]="true">
  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
    Button dropdown <span class="caret"></span>
  </button>
  <ul *dropdownMenu class="dropdown-menu" role="menu">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
    <li class="divider dropdown-divider"></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
    </li>
  </ul>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-dropdown-inside-click',
  templateUrl: './inside-click.html',
  standalone: false
})
export class DemoDropdownInsideClickComponent {}

Nested dropdowns (experimental)
#

<div class="btn-group" dropdown [autoClose]="false" container="body">
  <button id="button-nested" dropdownToggle type="button" class="btn btn-primary dropdown-toggle"
          aria-controls="dropdown-nested">
    This dropdown has nested submenu <span class="caret"></span>
  </button>
  <ul id="dropdown-nested" *dropdownMenu class="dropdown-menu"
      role="menu" aria-labelledby="button-nested">
    <li role="menuitem"><a class="dropdown-item" routerLink="." fragment="nested-dropdowns">Action</a></li>

    <li role="menuitem" dropdown triggers="mouseover" placement="right" container="body">
      <a dropdownToggle class="dropdown-item dropdown-toggle"
         (click)="false">Hover me for nested dropdown <span class="caret"></span></a>
      <ul *dropdownMenu class="dropdown-menu" role="menu">
        <li role="menuitem"><a class="dropdown-item" routerLink="." fragment="nested-dropdowns">Action</a></li>
        <li role="menuitem"><a class="dropdown-item" routerLink="." fragment="nested-dropdowns">Action1</a></li>
        <li role="menuitem"><a class="dropdown-item" routerLink="." fragment="nested-dropdowns">Action2</a></li>
      </ul>
    </li>

    <li role="menuitem" dropdown triggers="mouseover" placement="right" container="body">
      <a dropdownToggle class="dropdown-item dropdown-toggle"
         (click)="false">Hover me for nested dropdown <span class="caret"></span></a>
      <ul *dropdownMenu class="dropdown-menu" role="menu">
        <li role="menuitem"><a class="dropdown-item" routerLink="." fragment="nested-dropdowns">Action</a></li>
        <li role="menuitem"><a class="dropdown-item" routerLink="." fragment="nested-dropdowns">Action1</a></li>
        <li role="menuitem"><a class="dropdown-item" routerLink="." fragment="nested-dropdowns">Action2</a></li>
      </ul>
    </li>

    <li role="menuitem"><a class="dropdown-item" routerLink="." fragment="nested-dropdowns">Something else here</a></li>
    <li class="divider dropdown-divider"></li>
    <li role="menuitem"><a class="dropdown-item" routerLink="." fragment="nested-dropdowns">Separated link</a></li>
  </ul>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-nested-dropdowns',
  templateUrl: './nested-dropdowns.html',
  standalone: false
})
export class DemoNestedDropdownsComponent {}

Append to body
#

Append dropdown to body by adding container="body" to the parent element.

<div class="btn-group" dropdown container="body">
  <button id="button-container" dropdownToggle type="button" class="btn btn-primary dropdown-toggle"
          aria-controls="dropdown-container">
    Dropdown on Body <span class="caret"></span>
  </button>
  <ul id="dropdown-container" *dropdownMenu class="dropdown-menu"
      role="menu" aria-labelledby="button-container">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
    <li class="divider dropdown-divider"></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
    </li>
  </ul>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-dropdown-container',
  templateUrl: './container.html',
  standalone: false
})
export class DemoDropdownContainerComponent {}

Dropup variation
#

To make dropdown's menu appear above toggle element set dropup property as true

<div class="btn-group" dropdown [dropup]="isDropup">
  <button id="button-dropup" dropdownToggle type="button" class="btn btn-primary dropdown-toggle"
          aria-controls="dropdown-dropup">
    Dropup <span class="caret"></span>
  </button>
  <ul id="dropdown-dropup" *dropdownMenu class="dropdown-menu"
      role="menu" aria-labelledby="button-dropup">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a>
    </li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else
      here</a></li>
    <li class="divider dropdown-divider"></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
    </li>
  </ul>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-dropdown-dropup',
  templateUrl: './dropup.html',
  standalone: false
})
export class DemoDropdownDropupComponent {
  isDropup = true;
}

Separate groups of related menu items with a .dropdown-divider for bootstrap 4.

<div class="btn-group" dropdown>
  <button id="button-menu-dividers" dropdownToggle type="button" class="btn btn-primary dropdown-toggle"
          aria-controls="dropdown-menu-dividers">
    Button dropdown <span class="caret"></span>
  </button>
  <ul id="dropdown-menu-dividers" *dropdownMenu class="dropdown-menu"
      role="menu" aria-labelledby="button-menu-dividers">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a>
    </li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else
      here</a></li>
    <li class="divider dropdown-divider"></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
    </li>
  </ul>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-dropdown-menu-dividers',
  templateUrl: './menu-dividers.html',
  standalone: false
})
export class DemoDropdownMenuDividersComponent {}

Custom html
#

Dropdown allows you to use any html markup inside of it

<div class="btn-group" dropdown>
  <button id="button-custom-html" dropdownToggle type="button" class="btn btn-primary dropdown-toggle"
          aria-controls="dropdown-custom-html">
    Button dropdown <span class="caret"></span>
  </button>
  <ul id="dropdown-custom-html" *dropdownMenu class="dropdown-menu"
      role="menu" aria-labelledby="button-custom-html">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#"><span class="badge badge-secondary bg-secondary">Some HTML here</span></a></li>
  </ul>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-dropdown-custom-html',
  templateUrl: './custom-html.html',
  standalone: false
})
export class DemoDropdownCustomHtmlComponent {}

Configuring defaults
#

It is possible to override default dropdown config partially or completely.

<div class="btn-group" dropdown>
  <button id="button-config" dropdownToggle type="button" class="btn btn-primary dropdown-toggle"
          aria-controls="dropdown-config">
    Button dropdown <span class="caret"></span>
  </button>
  <ul id="dropdown-config" *dropdownMenu class="dropdown-menu"
      role="menu" aria-labelledby="button-config">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a>
    </li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else
      here</a></li>
  </ul>
</div>

import { Component } from '@angular/core';
import { BsDropdownConfig } from 'ngx-bootstrap/dropdown';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-dropdown-config',
  templateUrl: './config.html',
  providers: [{ provide: BsDropdownConfig, useValue: { autoClose: false } }],
  standalone: false
})
export class DemoDropdownConfigComponent {}

Visibility Events
#

You can subscribe to dropdown's visibility events

<div class="row">
  <div class="col-xs-12 col-12">
    <pre class="card card-block card-header mb-3" *ngFor="let message of messages">{{message}}</pre>
  </div>
  <div class="col-xs-12 col-12 mb-3">
    <div class="btn-group"
         dropdown
         (onShown)="handler('onShown')"
         (onHidden)="handler('onHidden')">
      <button id="button-visbility" dropdownToggle type="button" class="btn btn-primary dropdown-toggle"
              aria-controls="dropdown-visbility">
        Button dropdown <span class="caret"></span>
      </button>
      <ul id="dropdown-visbility" *dropdownMenu class="dropdown-menu"
          role="menu" aria-labelledby="button-visbility">
        <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
        <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
        <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-dropdown-visibility-events',
  templateUrl: './visibility-events.html',
  standalone: false
})
export class DemoDropdownVisibilityEventsComponent {
  messages: string[] = [];
  message = 'onShown';

  handler(value: string): void {
    this.messages.push(`Event ${value} is fired`);
    this.messages = this.messages.length > 2 ? this.messages.slice(0, 1) : this.messages;
  }
}

State change event
#

You can subscribe to dropdown's state change event (isOpenChange).

<div class="row">
  <div class="col-xs-12 col-12 mb-3" *ngIf="text">
      <pre class="card card-block card-header">The dropdown is {{text}}</pre>
  </div>
  <div class="col-xs-12 col-12 mb-2">
    <div class="btn-group"
         dropdown
         (isOpenChange)="onOpenChange($event)">
      <button id="button-state-change" dropdownToggle type="button" class="btn btn-primary dropdown-toggle"
              aria-controls="dropdown-state-change">
        Button dropdown <span class="caret"></span>
      </button>
      <ul id="dropdown-state-change" *dropdownMenu class="dropdown-menu"
          role="menu" aria-labelledby="button-state-change">
        <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
        <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
        <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-dropdown-state-change-event',
  templateUrl: './state-change-event.html',
  standalone: false
})
export class DemoDropdownStateChangeEventComponent {
  text?: string;
  onOpenChange(data: boolean): void {
    this.text = data ? 'opened' : 'closed';
  }
}

Auto close
#

Use autoClose property to change dropdown's default behavior

Default behavior: dropdown closes after outside click or pressing ESC

This dropdown won't be closed after outside click or pressing ESC

<div class="row">
  <div class="col-xs-12 col-12 col-sm-6 mb-3">
    <p>Default behavior: dropdown closes after outside click or pressing ESC</p>
    <div class="btn-group" dropdown>
      <button id="button-autoclose1" dropdownToggle type="button" class="btn btn-primary dropdown-toggle"
              aria-controls="dropdown-autoclose1">
        Button dropdown <span class="caret"></span>
      </button>
      <ul id="dropdown-autoclose1" *dropdownMenu class="dropdown-menu"
          role="menu" aria-labelledby="button-autoclose1">
        <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
        <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
        <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  </div>
  <div class="col-xs-12 col-12 col-sm-6 mb-3">
    <p>This dropdown won't be closed after outside click or pressing ESC</p>
    <div class="btn-group" dropdown [autoClose]="false">
      <button id="button-autoclose2" dropdownToggle type="button" class="btn btn-primary dropdown-toggle"
              aria-controls="dropdown-autoclose2">
        Button dropdown <span class="caret"></span>
      </button>
      <ul id="dropdown-autoclose2" *dropdownMenu class="dropdown-menu" role="menu" aria-labelledby="button-autoclose2">
        <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
        <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
        <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-dropdown-autoclose',
  templateUrl: './autoclose.html',
  standalone: false
})
export class DemoDropdownAutoCloseComponent {}

Accessibility

The WAIARIA standard defines an actual role="menu" widget, but this is specific to application-like menus which trigger actions or functions. ARIA menus can only contain menu items, checkbox menu items, radio button menu items, radio button groups, and sub-menus.

Dropdowns, on the other hand, are designed to be generic and applicable to a variety of situations and markup structures. For instance, it is possible to create dropdowns that contain additional inputs and form controls, such as search fields or login forms. For this reason, ngx-bootstrap does not expect (nor automatically add) any of the role and aria- attributes required for true ARIA menus. Authors will have to include these more specific attributes themselves.

Installation

ng add ngx-bootstrap  --component dropdowns

### Standalone component usage
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';

@Components({
  standalone: true,
  imports: [
    BrowserAnimationsModule,
    BsDropdownModule,
    ...
  ]
})
export class AppComponents(){}


### Module usage
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    BsDropdownModule
  ]
})
export class AppModule(){}

Also should be added web-animations-js polyfill for IE browser (Edge)

Selector

Default dropdown configuration

Properties

`autoClose`	Type: `boolean` Default value: `true` default dropdown auto closing behavior
`insideClick`	Type: `boolean` Default value: `false` default dropdown auto closing behavior
`isAnimated`	Type: `boolean` Default value: `false` turn on/off animation
`stopOnClickPropagation`	Type: `boolean` Default value: `false` value true of stopOnClickPropagation allows event stopPropagation

Dropdowns

Basic #

With animation #

Trigger by tag <a> #

Split button dropdowns #

Manual triggering #

Trigger by isOpen property #

Disabled menu #

Mark item as disabled #

Menu alignment #

Inside click #

Nested dropdowns (experimental) #

Append to body #

Dropup variation #

Menu dividers #

Custom html #

Configuring defaults #

Visibility Events #

State change event #

Auto close #

Accessibility

Installation

BsDropdownConfig

Properties

Basic

With animation

Trigger by tag <a>

Split button dropdowns

Manual triggering

Trigger by isOpen property

Disabled menu

Mark item as disabled

Menu alignment

Inside click

Nested dropdowns (experimental)

Append to body

Dropup variation

Menu dividers

Custom html

Configuring defaults

Visibility Events

State change event

Auto close