Angular Dropdown Component

Dropdown

Angular Dropdown component allows you to toggle contextual overlays for displaying lists, links, and more html elements.

Available in Other JavaScript Frameworks

CoreUI Angular Dropdown Component is also available for Bootstrap, React, and Vue. Explore framework-specific implementations below:

On this page

Overview

Dropdowns are toggleable, contextual overlays for displaying lists of links and more.

Dropdowns are built on a third party library, Popper.js, which provides dynamic positioning and viewport detection. Popper.js isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.

Examples

Bind the dropdown toggle and the dropdown menu inside c-dropdown, or different element that declares position: relative;. Dropdowns can be triggered from a or button elements to better fit your possible requirements.

Single button

Here’s how you can put them to work with either button elements:

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import {
  ButtonDirective,
  DropdownComponent,
  DropdownItemDirective,
  DropdownMenuDirective,
  DropdownToggleDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-dropdown-single-button',
  templateUrl: './dropdown-single-button.component.html',
  imports: [
    DropdownComponent,
    ButtonDirective,
    DropdownToggleDirective,
    DropdownMenuDirective,
    DropdownItemDirective,
    RouterLink
  ]
})
export class DropdownSingleButtonComponent {}

<c-dropdown>
  <button cButton cDropdownToggle color="secondary">
    Dropdown button
  </button>
  <ul cDropdownMenu>
    <li><a [routerLink]="[]" cDropdownItem>Action</a></li>
    <li><a [routerLink]="[]" cDropdownItem>Another action</a></li>
    <li><a [routerLink]="[]" cDropdownItem>Something else here</a></li>
  </ul>
</c-dropdown>

And with a elements:

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import {
  ButtonDirective,
  DropdownComponent,
  DropdownItemDirective,
  DropdownMenuDirective,
  DropdownToggleDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-dropdown-single-button-2',
  templateUrl: './dropdown-single-button-2.component.html',
  imports: [
    DropdownComponent,
    ButtonDirective,
    DropdownToggleDirective,
    RouterLink,
    DropdownMenuDirective,
    DropdownItemDirective
  ]
})
export class DropdownSingleButton2Component {}

<c-dropdown>
  <a cButton cDropdownToggle color="secondary" [routerLink]="">
    Dropdown button
  </a>
  <ul cDropdownMenu>
    <li><a [routerLink]="[]" cDropdownItem>Action</a></li>
    <li><a [routerLink]="[]" cDropdownItem>Another action</a></li>
    <li><a [routerLink]="[]" cDropdownItem>Something else here</a></li>
  </ul>
</c-dropdown>

The best part is you can do this with any button variant, too:

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import {
  ButtonDirective,
  DropdownComponent,
  DropdownItemDirective,
  DropdownMenuDirective,
  DropdownToggleDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-dropdown-single-button-3',
  templateUrl: './dropdown-single-button-3.component.html',
  imports: [
    DropdownComponent,
    ButtonDirective,
    DropdownToggleDirective,
    DropdownMenuDirective,
    DropdownItemDirective,
    RouterLink
  ]
})
export class DropdownSingleButton3Component {
  public colors = ['primary', 'secondary', 'success', 'info', 'warning', 'danger'];
}

@for (color of colors; track color) {
  <c-dropdown variant="btn-group" class="m-1">
    <button [color]="color" cButton cDropdownToggle>
      {{ color }}
    </button>
    <ul cDropdownMenu>
      <li><button [routerLink]="[]" cDropdownItem>Action</button></li>
      <li><button [routerLink]="[]" cDropdownItem>Another action</button></li>
      <li><button [routerLink]="[]" cDropdownItem>Something else here</button></li>
    </ul>
  </c-dropdown>
}

Split button

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

We use this extra class to reduce the horizontal padding on either side of the caret by 25% and remove the margin-left that’s attached for normal button dropdowns. Those additional changes hold the caret centered in the split button and implement a more properly sized hit area next to the main button.

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import {
  ButtonDirective,
  DropdownComponent,
  DropdownItemDirective,
  DropdownMenuDirective,
  DropdownToggleDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-dropdown-split-button',
  templateUrl: './dropdown-split-button.component.html',
  imports: [
    DropdownComponent,
    ButtonDirective,
    DropdownToggleDirective,
    DropdownMenuDirective,
    DropdownItemDirective,
    RouterLink
  ]
})
export class DropdownSplitButtonComponent {
  public colors = ['primary', 'secondary', 'success', 'info', 'warning', 'danger'];
}

@for (color of colors; track color) {
  <c-dropdown
    class="m-1"
    placement="bottom-start"
    variant="btn-group">
    <button [color]="color" cButton>
      {{ color }}
    </button>
    <button [color]="color" cButton cDropdownToggle split>
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul cDropdownMenu>
      <li><button [routerLink]="[]" cDropdownItem>Action</button></li>
      <li><button cDropdownItem>Another action</button></li>
      <li><button cDropdownItem>Something else here</button></li>
    </ul>
  </c-dropdown>
}

Sizing

Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import {
  ButtonDirective,
  DropdownComponent,
  DropdownItemDirective,
  DropdownMenuDirective,
  DropdownToggleDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-dropdown-sizing-large',
  templateUrl: './dropdown-sizing-large.component.html',
  imports: [
    DropdownComponent,
    ButtonDirective,
    DropdownToggleDirective,
    DropdownMenuDirective,
    DropdownItemDirective,
    RouterLink
  ]
})
export class DropdownSizingLargeComponent {}

<c-dropdown variant="btn-group">
  <button cButton cDropdownToggle color="secondary" size="lg">
    Large button
  </button>
  <ul cDropdownMenu>
    <li><button cDropdownItem>Action</button></li>
    <li><button cDropdownItem>Another action</button></li>
    <li><button cDropdownItem>Something else here</button></li>
  </ul>
</c-dropdown>

<c-dropdown variant="btn-group">
  <button cButton color="secondary" size="lg">Large split button</button>
  <button cButton cDropdownToggle color="secondary" size="lg" split>
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul cDropdownMenu>
    <li><button [routerLink]="[]" cDropdownItem>Action</button></li>
    <li><button cDropdownItem>Another action</button></li>
    <li><button cDropdownItem>Something else here</button></li>
  </ul>
</c-dropdown>

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import {
  ButtonDirective,
  DropdownComponent,
  DropdownItemDirective,
  DropdownMenuDirective,
  DropdownToggleDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-dropdown-sizing-small',
  templateUrl: './dropdown-sizing-small.component.html',
  imports: [
    DropdownComponent,
    ButtonDirective,
    DropdownToggleDirective,
    DropdownMenuDirective,
    DropdownItemDirective,
    RouterLink
  ]
})
export class DropdownSizingSmallComponent {}

<c-dropdown variant="btn-group">
  <button cButton cDropdownToggle color="secondary" size="sm">
    Small button
  </button>
  <ul cDropdownMenu>
    <li><button cDropdownItem>Action</button></li>
    <li><button cDropdownItem>Another action</button></li>
    <li><button cDropdownItem>Something else here</button></li>
  </ul>
</c-dropdown>

<c-dropdown variant="btn-group">
  <button cButton color="secondary" size="sm">Small split button</button>
  <button cButton cDropdownToggle color="secondary" size="sm" split>
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul cDropdownMenu>
    <li><button [routerLink]="[]" cDropdownItem>Action</button></li>
    <li><button cDropdownItem>Another action</button></li>
    <li><button cDropdownItem>Something else here</button></li>
  </ul>
</c-dropdown>

Dark dropdowns

Opt into darker dropdowns to match a dark navbar or custom style by set dark property. No changes are required to the dropdown items.

import { Component } from '@angular/core';
import {
  ButtonDirective,
  DropdownComponent,
  DropdownItemDirective,
  DropdownMenuDirective,
  DropdownToggleDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-dropdown-dark-dropdowns',
  templateUrl: './dropdown-dark-dropdowns.component.html',
  imports: [DropdownComponent, ButtonDirective, DropdownToggleDirective, DropdownMenuDirective, DropdownItemDirective]
})
export class DropdownDarkDropdownsComponent {}

<c-dropdown>
  <button cButton cDropdownToggle color="secondary">Dropdown button</button>
  <ul cDropdownMenu dark>
    <li><button cDropdownItem>Action</button></li>
    <li><button cDropdownItem>Another action</button></li>
    <li><button cDropdownItem>Something else here</button></li>
  </ul>
</c-dropdown>

And putting it to use in a navbar:

import { Component } from '@angular/core';
import {
  CollapseDirective,
  ContainerComponent,
  DropdownComponent,
  DropdownItemDirective,
  DropdownMenuDirective,
  DropdownToggleDirective,
  NavbarBrandDirective,
  NavbarComponent,
  NavbarNavComponent,
  NavbarTogglerDirective,
  NavItemComponent,
  NavLinkDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-dropdown-dark-dropdowns-2',
  templateUrl: './dropdown-dark-dropdowns-2.component.html',
  imports: [
    NavbarComponent,
    ContainerComponent,
    NavbarBrandDirective,
    NavbarTogglerDirective,
    CollapseDirective,
    NavbarNavComponent,
    NavItemComponent,
    DropdownComponent,
    DropdownToggleDirective,
    NavLinkDirective,
    DropdownMenuDirective,
    DropdownItemDirective
  ]
})
export class DropdownDarkDropdowns2Component {}

<c-navbar class="bg-dark" colorScheme="dark" expand="lg">
  <c-container [fluid]="true">
    <a cNavbarBrand href="https://coreui.io/angular/" target="_blank">
      Navbar
    </a>
    <button [cNavbarToggler]="collapseRef"></button>
    <div #collapseRef="cCollapse" [navbar]="true" cCollapse>
      <c-navbar-nav class="me-auto mb-2 mb-lg-0">
        <c-nav-item>
          <c-dropdown variant="nav-item" [popper]="false">
            <a cDropdownToggle cNavLink>Dropdown</a>
            <ul cDropdownMenu dark>
              <li><button cDropdownItem>Action</button></li>
              <li><button cDropdownItem>Another action</button></li>
              <li><button cDropdownItem>Something else here</button></li>
            </ul>
          </c-dropdown>
        </c-nav-item>
      </c-navbar-nav>
    </div>
  </c-container>
</c-navbar>

Directions

RTL

Directions are mirrored when using CoreUI in RTL, meaning dropstart will appear on the right side.

Centered

Trigger dropdown menus centered below the toggle by adding direction="center" to the c-dropdown component.

import { Component } from '@angular/core';
import {
  ButtonDirective,
  DropdownComponent,
  DropdownItemDirective,
  DropdownMenuDirective,
  DropdownToggleDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-dropdown-centered',
  templateUrl: './dropdown-centered.component.html',
  imports: [DropdownComponent, ButtonDirective, DropdownToggleDirective, DropdownMenuDirective, DropdownItemDirective]
})
export class DropdownCenteredComponent {}

<c-dropdown direction="center">
  <button cButton cDropdownToggle color="secondary">Centered dropdown</button>
  <ul cDropdownMenu>
    <li><button cDropdownItem>Action one</button></li>
    <li><button cDropdownItem>Action two</button></li>
    <li><button cDropdownItem>Action three</button></li>
  </ul>
</c-dropdown>

Dropup

Trigger dropdown menus above elements by adding direction="dropup" to the c-dropdown component.

import { Component } from '@angular/core';
import {
  ButtonDirective,
  DropdownComponent,
  DropdownItemDirective,
  DropdownMenuDirective,
  DropdownToggleDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-dropdown-dropup',
  templateUrl: './dropdown-dropup.component.html',
  imports: [DropdownComponent, ButtonDirective, DropdownToggleDirective, DropdownMenuDirective, DropdownItemDirective]
})
export class DropdownDropupComponent {}

<c-dropdown direction="dropup" variant="btn-group">
  <button cButton cDropdownToggle color="secondary">Dropup</button>
  <ul cDropdownMenu>
    <li><button cDropdownItem>Action</button></li>
    <li><button cDropdownItem>Another action</button></li>
    <li><button cDropdownItem>Something else here</button></li>
  </ul>
</c-dropdown>

<c-dropdown direction="dropup" variant="btn-group">
  <button cButton color="secondary">Split Dropup</button>
  <button [split]="true" cButton cDropdownToggle color="secondary">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul cDropdownMenu>
    <li><button cDropdownItem>Action</button></li>
    <li><button cDropdownItem>Another action</button></li>
    <li><button cDropdownItem>Something else here</button></li>
  </ul>
</c-dropdown>

Dropup Centered

Trigger dropup menu centered above the toggle by adding direction="dropup-center" to the c-dropdowncomponent.

import { Component } from '@angular/core';
import {
  ButtonDirective,
  DropdownComponent,
  DropdownItemDirective,
  DropdownMenuDirective,
  DropdownToggleDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-dropdown-dropup-centered',
  templateUrl: './dropdown-dropup-centered.component.html',
  imports: [DropdownComponent, ButtonDirective, DropdownToggleDirective, DropdownMenuDirective, DropdownItemDirective]
})
export class DropdownDropupCenteredComponent {}

<c-dropdown direction="dropup-center">
  <button cButton cDropdownToggle color="secondary">Centered dropup</button>
  <ul cDropdownMenu>
    <li><button cDropdownItem>Action</button></li>
    <li><button cDropdownItem>Another action</button></li>
    <li><button cDropdownItem>Something else here</button></li>
  </ul>
</c-dropdown>

Dropright

Trigger dropdown menus at the right of the elements by adding direction="dropend" to the c-dropdowncomponent.

import { Component } from '@angular/core';
import {
  ButtonDirective,
  DropdownComponent,
  DropdownItemDirective,
  DropdownMenuDirective,
  DropdownToggleDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-dropdown-dropright',
  templateUrl: './dropdown-dropright.component.html',
  imports: [DropdownComponent, ButtonDirective, DropdownToggleDirective, DropdownMenuDirective, DropdownItemDirective]
})
export class DropdownDroprightComponent {}

<c-dropdown direction="dropend" variant="btn-group">
  <button cButton cDropdownToggle color="secondary">Dropend</button>
  <ul cDropdownMenu>
    <li><button cDropdownItem>Action</button></li>
    <li><button cDropdownItem>Another action</button></li>
    <li><button cDropdownItem>Something else here</button></li>
  </ul>
</c-dropdown>

<c-dropdown direction="dropend" variant="btn-group">
  <button cButton color="secondary">Split Right</button>
  <button [split]="true" cButton cDropdownToggle color="secondary">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul cDropdownMenu>
    <li><button cDropdownItem>Action</button></li>
    <li><button cDropdownItem>Another action</button></li>
    <li><button cDropdownItem>Something else here</button></li>
  </ul>
</c-dropdown>

Dropleft

Trigger dropdown menus at the left of the elements by adding direction="dropstart" to the c-dropdowncomponent.

import { Component } from '@angular/core';
import {
  ButtonDirective,
  ButtonGroupComponent,
  DropdownComponent,
  DropdownItemDirective,
  DropdownMenuDirective,
  DropdownToggleDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-dropdown-dropleft',
  templateUrl: './dropdown-dropleft.component.html',
  imports: [
    DropdownComponent,
    ButtonDirective,
    DropdownToggleDirective,
    DropdownMenuDirective,
    DropdownItemDirective,
    ButtonGroupComponent
  ]
})
export class DropdownDropleftComponent {}

<c-dropdown direction="dropstart" variant="btn-group">
  <button cButton cDropdownToggle color="secondary">Dropstart</button>
  <ul cDropdownMenu>
    <li><button cDropdownItem>Action</button></li>
    <li><button cDropdownItem>Another action</button></li>
    <li><button cDropdownItem>Something else here</button></li>
  </ul>
</c-dropdown>

<c-button-group>
  <c-dropdown direction="dropstart" variant="input-group">
    <button [split]="true" cButton cDropdownToggle color="secondary">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul cDropdownMenu>
      <li><button cDropdownItem>Action</button></li>
      <li><button cDropdownItem>Another action</button></li>
      <li><button cDropdownItem>Something else here</button></li>
    </ul>
    <button cButton color="secondary">Split Left</button>
  </c-dropdown>
</c-button-group>

Historically dropdown menu contents had to be links, but that’s no longer the case with v4. Now you can optionally use button elements in your dropdowns instead of just a.

import { Component } from '@angular/core';
import {
  ButtonDirective,
  DropdownComponent,
  DropdownItemDirective,
  DropdownMenuDirective,
  DropdownToggleDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-dropdown-menu-items',
  templateUrl: './dropdown-menu-items.component.html',
  imports: [DropdownComponent, ButtonDirective, DropdownToggleDirective, DropdownMenuDirective, DropdownItemDirective]
})
export class DropdownMenuItemsComponent {}

<c-dropdown>
  <button cButton cDropdownToggle color="secondary">
    Dropdown button
  </button>
  <div cDropdownMenu>
    <button cDropdownItem>Action</button>
    <button cDropdownItem>Another action</button>
    <button cDropdownItem>Something else here</button>
  </div>
</c-dropdown>

You can also create non-interactive dropdown items with cDropdownItemText.

import { Component } from '@angular/core';
import { DropdownItemDirective, DropdownItemPlainDirective } from '@coreui/angular';

@Component({
  selector: 'docs-dropdown-menu-items-plain-text',
  templateUrl: './dropdown-menu-items-plain-text.component.html',
  imports: [DropdownItemPlainDirective, DropdownItemDirective],
  styles: `
    :host {
      .dropdown-menu {
        display: block;
        position: static;
      }
    }
  `
})
export class DropdownMenuItemsPlainTextComponent {}

<div class="dropdown-menu">
  <span cDropdownItemPlain>Dropdown item text</span>
  <button cDropdownItem>Action</button>
  <button cDropdownItem>Another action</button>
  <button cDropdownItem>Something else here</button>
</div>

Active

Set boolean property active to style item as active.

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

@Component({
  selector: 'docs-dropdown-active',
  templateUrl: './dropdown-active.component.html',
  imports: [DropdownItemDirective],
  styles: `
    :host {
      .dropdown-menu {
        display: block;
        position: static;
      }
    }
  `
})
export class DropdownActiveComponent {}

<div class="dropdown-menu">
  <button cDropdownItem>Regular link</button>
  <button cDropdownItem [active]="true">Active link</button>
  <button cDropdownItem>Another link</button>
</div>

Disabled

Add disabled boolean property to items in the dropdown to style them as disabled.

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

@Component({
  selector: 'docs-dropdown-disabled',
  templateUrl: './dropdown-disabled.component.html',
  imports: [DropdownItemDirective],
  styles: `
    :host {
      .dropdown-menu {
        display: block;
        position: static;
      }
    }
  `
})
export class DropdownDisabledComponent {}

<div class="dropdown-menu">
  <button cDropdownItem>Regular link</button>
  <button cDropdownItem [disabled]="true">Disabled link</button>
  <button cDropdownItem>Another link</button>
</div>

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent, which is what alignment="start" sets explicitly. Add alignment="end" to right align the dropdown menu.

Heads up! Dropdowns are positioned thanks to Popper.js.

import { Component } from '@angular/core';
import {
  ButtonDirective,
  DropdownComponent,
  DropdownItemDirective,
  DropdownMenuDirective,
  DropdownToggleDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-dropdown-menu-alignment',
  templateUrl: './dropdown-menu-alignment.component.html',
  imports: [DropdownComponent, ButtonDirective, DropdownToggleDirective, DropdownMenuDirective, DropdownItemDirective]
})
export class DropdownMenuAlignmentComponent {}

<c-dropdown alignment="end">
  <button cButton cDropdownToggle color="secondary">
    Dropdown menu end-aligned
  </button>
  <div cDropdownMenu>
    <button cDropdownItem>Action</button>
    <button cDropdownItem>Another action</button>
    <button cDropdownItem>Something else</button>
  </div>
</c-dropdown>

Responsive alignment

If you use responsive alignment, dynamic positioning is disabled — the classes place the menu themselves. Set variant="btn-group" so that the dropdown wraps just the toggle; with the default variant it is a full-width block, and the menu aligns to the edge of the container instead of the button.

To align right the dropdown menu with the given breakpoint or larger, bind [alignment]="{ lg: 'end' }", replacing lg with any of xs, sm, md, lg, xl, xxl.

import { Component } from '@angular/core';
import {
  ButtonDirective,
  DropdownAlignment,
  DropdownComponent,
  DropdownItemDirective,
  DropdownMenuDirective,
  DropdownToggleDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-dropdown-responsive-alignment',
  templateUrl: './dropdown-responsive-alignment.component.html',
  imports: [DropdownComponent, ButtonDirective, DropdownToggleDirective, DropdownMenuDirective, DropdownItemDirective]
})
export class DropdownResponsiveAlignmentComponent {
  readonly alignment: DropdownAlignment = { lg: 'end' };
}

<c-dropdown [alignment]="alignment" variant="btn-group">
  <button cButton cDropdownToggle color="secondary">
    Left-aligned but right aligned when large screen
  </button>
  <div cDropdownMenu>
    <button cDropdownItem>Action</button>
    <button cDropdownItem>Another action</button>
    <button cDropdownItem>Something else</button>
  </div>
</c-dropdown>

To align left the dropdown menu with the given breakpoint or larger, bind [alignment]="{ xs: 'end', lg: 'start' }". Every entry of the map adds its own class, so this one is right aligned by default and left aligned from lg up.

import { Component } from '@angular/core';
import {
  ButtonDirective,
  DropdownAlignment,
  DropdownComponent,
  DropdownItemDirective,
  DropdownMenuDirective,
  DropdownToggleDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-dropdown-responsive-alignment-2',
  templateUrl: './dropdown-responsive-alignment-2.component.html',
  imports: [DropdownComponent, ButtonDirective, DropdownToggleDirective, DropdownMenuDirective, DropdownItemDirective]
})
export class DropdownResponsiveAlignment2Component {
  readonly alignment: DropdownAlignment = { xs: 'end', lg: 'start' };
}

<c-dropdown [alignment]="alignment" variant="btn-group">
  <button cButton cDropdownToggle color="secondary">
    Right-aligned but left aligned when large screen
  </button>
  <div cDropdownMenu>
    <button cDropdownItem>Action</button>
    <button cDropdownItem>Another action</button>
    <button cDropdownItem>Something else</button>
  </div>
</c-dropdown>

Headers

Add a header to label sections of actions in any dropdown menu.

In the following example we use div without cDropdownMenu to show dropdown menu content.

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { DropdownHeaderDirective, DropdownItemDirective } from '@coreui/angular';

@Component({
  selector: 'docs-dropdown-headers',
  templateUrl: './dropdown-headers.component.html',
  imports: [DropdownHeaderDirective, DropdownItemDirective, RouterLink],
  styles: `
    :host {
      .dropdown-menu {
        display: block;
        position: static;
      }
    }
  `
})
export class DropdownHeadersComponent {}

<div class="dropdown-menu">
  <h6 cDropdownHeader>Header</h6>
  <a [routerLink]="[]" cDropdownItem>Action</a>
  <a [routerLink]="[]" cDropdownItem>Another action</a>
</div>

Dividers

Separate groups of related menu items with a divider.

In the following example we use div without cDropdownMenu to show dropdown menu content.

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { DropdownDividerDirective, DropdownItemDirective } from '@coreui/angular';

@Component({
  selector: 'docs-dropdown-dividers',
  templateUrl: './dropdown-dividers.component.html',
  imports: [DropdownItemDirective, RouterLink, DropdownDividerDirective],
  styles: `
    :host {
      .dropdown-menu {
        display: block;
        position: static;
      }
    }
  `
})
export class DropdownDividersComponent {}

<ul class="dropdown-menu">
  <li><a [routerLink]="[]" cDropdownItem>Action</a></li>
  <li><a [routerLink]="[]" cDropdownItem>Another action</a></li>
  <li><a [routerLink]="[]" cDropdownItem>Something else here</a></li>
  <li><hr cDropdownDivider></li>
  <li><button cDropdownItem>Separated link</button></li>
</ul>

Text

Place any freeform text within a dropdown menu with text. Note that you’ll likely need additional sizing styles to constrain the menu width.

import { Component } from '@angular/core';
import { NgStyle } from '@angular/common';
import { ButtonDirective, DropdownComponent, DropdownMenuDirective, DropdownToggleDirective } from '@coreui/angular';

@Component({
  selector: 'docs-dropdown-text',
  templateUrl: './dropdown-text.component.html',
  imports: [DropdownComponent, ButtonDirective, DropdownToggleDirective, DropdownMenuDirective, NgStyle]
})
export class DropdownTextComponent {}

<c-dropdown [autoClose]="'inside'">
  <button cButton cDropdownToggle color="secondary">
    Dropdown
  </button>
  <div cDropdownMenu [ngStyle]="{ 'minWidth.px': 200 }" class="p-4 text-medium-emphasis">
    <p>Some example text that's free-flowing within the dropdown menu.</p>
    <p class="mb-0">And this is more example text.</p>
  </div>
</c-dropdown>

Forms

Put a form within a dropdown menu, or make it into a dropdown menu.

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { NgStyle } from '@angular/common';
import {
  ButtonCloseDirective,
  ButtonDirective,
  DropdownCloseDirective,
  DropdownComponent,
  DropdownDividerDirective,
  DropdownItemDirective,
  DropdownMenuDirective,
  DropdownToggleDirective,
  FormCheckComponent,
  FormCheckInputDirective,
  FormCheckLabelDirective,
  FormControlDirective,
  FormDirective,
  FormLabelDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-dropdown-forms',
  templateUrl: './dropdown-forms.component.html',
  imports: [
    DropdownComponent,
    ButtonDirective,
    DropdownToggleDirective,
    DropdownMenuDirective,
    NgStyle,
    ButtonCloseDirective,
    DropdownCloseDirective,
    FormDirective,
    FormLabelDirective,
    FormControlDirective,
    FormCheckComponent,
    FormCheckInputDirective,
    FormCheckLabelDirective,
    DropdownDividerDirective,
    DropdownItemDirective,
    RouterLink
  ]
})
export class DropdownFormsComponent {}

<c-dropdown [autoClose]="'outside'">
  <button cButton cDropdownToggle color="secondary">
    Login
  </button>
  <div cDropdownMenu [ngStyle]="{'min-width.px': 300}">
    <button cButtonClose cDropdownClose class="d-flex ms-auto me-1" [tabIndex]="0"></button>
    <form cForm class="px-4 py-0">
      <div class="mb-3">
        <label cLabel for="exampleDropdownFormEmail1">Email address</label>
        <input cFormControl id="exampleDropdownFormEmail1" placeholder="[email protected]" type="email">
      </div>
      <div class="mb-3">
        <label cLabel for="exampleDropdownFormPassword1">Password</label>
        <input cFormControl id="exampleDropdownFormPassword1" placeholder="Password" type="password">
      </div>
      <div class="mb-3">
        <c-form-check>
          <input cFormCheckInput id="dropdownCheck">
          <label cFormCheckLabel for="dropdownCheck">
            Remember me
          </label>
        </c-form-check>
      </div>
      <button cButton color="primary" cDropdownClose>Sign in</button>
    </form>
    <div cDropdownDivider></div>
    <button [autoClose]="false" cDropdownItem [routerLink]="[]" fragment="text">New around here? Sign up</button>
    <button [autoClose]="false" cDropdownItem >Forgot password?</button>
  </div>
</c-dropdown>

API reference

import { DropdownModule } from '@coreui/angular';

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

component

jsx

import { DropdownComponent } from '@coreui/angular'

Props

Property	Default	Type
alignment	-	`DropdownAlignment`
Set alignment of dropdown menu.
autoClose	`true`	`boolean`, `'inside'`, `'outside'`
Configure the auto close behavior: - `true` closes the dropdown on a click inside or outside the menu, - `false` only on the toggle button or an explicit hide/toggle call and not on the `Esc` key, - `inside` only on a click inside the menu, - `outside` only on a click outside it.
dark	`false`	`boolean`
Sets a darker color scheme. If the colorScheme is set to 'dark', the dark theme will be applied.
direction	-	`'center'`, `'dropup'`, `'dropup-center'`, `'dropend'`, `'dropstart'`
Sets a specified direction and location of the dropdown menu.
placement	`'bottom-start'`	`Placement`
Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
popper	`true`	`boolean`
If you want to disable dynamic positioning set this property to `false`.
popperOptions	`{}`	`Partial<Options>`
Optional Popper.js options object; the `placement` prop takes precedence over the placement set here. See https://popper.js.org/docs/v2/constructors/#options
variant	`'dropdown'`	`'btn-group'`, `'dropdown'`, `'input-group'`, `'nav-item'`
Set the dropdown variant to a btn-group, dropdown, input-group, and nav-item.
visible	`false`	`boolean`
Toggle the visibility of dropdown menu component.

Events

Event name

Event name
visibleChange
Event emitted on `visible` change. `$event` `boolean`

visibleChange

Event emitted on visible change.

$event boolean

cDropdownClose

directive

jsx

import { DropdownCloseDirective } from '@coreui/angular'

Property	Default	Type
disabled	`false`	`boolean`
Disables a dropdown-close directive.
dropdownComponent	-	`DropdownComponent`
The dropdown component instance this cDropdownClose belongs to.
tabIndex	`null`	`string`, `number`, `null`
Tab index of the dropdown-close element.

cDropdownDivider

directive

jsx

import { DropdownDividerDirective } from '@coreui/angular'

cDropdownHeader

directive

jsx

import { DropdownHeaderDirective } from '@coreui/angular'

cDropdownItem

directive

jsx

import { DropdownItemDirective } from '@coreui/angular'

Property	Default	Type
active	`undefined`	`boolean`
Set active state to a dropdown-item.
autoClose	`true`	`boolean`
Configure dropdown-item close dropdown behavior.
disabled	`false`	`boolean`
Disables a dropdown-item.
role	`'list-item'`	`string`
Default role for dropdown-item.
tabIndex	`'0'`	`string`, `number`, `null`
Tab index of the dropdown-item.

cDropdownItemPlain

directive

jsx

import { DropdownItemPlainDirective } from '@coreui/angular'

cDropdownMenu

directive

jsx

import { DropdownMenuDirective } from '@coreui/angular'

Property	Default	Type
alignment	-	`DropdownAlignment`
Set alignment of dropdown menu.
dark	`false`	`boolean`
Sets a darker color scheme. If the colorScheme is set to 'dark', the dark theme will be applied.
visible	`false`	`boolean`
Toggle the visibility of dropdown menu component.

cDropdownToggle

directive

jsx

import { DropdownToggleDirective } from '@coreui/angular'

Property	Default	Type
caret	`true`	`boolean`
Enables pseudo-element caret on toggler.
disabled	`false`	`boolean`
Disables the toggler.
dropdownComponent	`undefined`	`DropdownComponent`
Reference to dropdown component.
split	`false`	`boolean`
Create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` class for proper spacing around the dropdown caret.

Angular Dropdown Component

Dropdown

Available in Other JavaScript Frameworks

Overview

Examples

Single button

Split button

Sizing

Dark dropdowns

Directions

RTL

Centered

Dropup

Dropup Centered

Dropright

Dropleft

Menu items

Active

Disabled

Menu alignment

Responsive alignment

Menu content

Headers

Dividers

Text

Forms

API reference

Props

Events

cDropdownClose

cDropdownDivider

cDropdownHeader

cDropdownItem

cDropdownItemPlain

cDropdownMenu

cDropdownToggle

Angular Dropdown Component

Dropdown

Available in Other JavaScript Frameworks

Overview

Examples

Single button

Split button

Sizing

Dark dropdowns

Directions

RTL

Centered

Dropup

Dropup Centered

Dropright

Dropleft

Menu items

Active

Disabled

Menu alignment

Responsive alignment

Menu content

Headers

Dividers

Text

Forms

API reference

Dropdown Module

c-dropdown

Props

Events

cDropdownClose

cDropdownDivider

cDropdownHeader

cDropdownItem

cDropdownItemPlain

cDropdownMenu

cDropdownToggle