Angular Dropdown Component
Angular Dropdown component allows you to toggle contextual overlays for displaying lists, links, and more html elements.
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 positioningand viewport detection. Popper.js isn't used to position dropdowns in navbars though as dynamic positioning isn'trequired.
Examples
Bind the dropdown toggle and the dropdown menu insidec-dropdown, or different element that declaresposition: relative;. Dropdowns can be triggered froma orbutton elements to better fit your possible requirements.
Single button
Here's how you can put them to work with eitherbutton elements:
And witha elements:
The best part is you can do this with any button variant, too:
Split button
Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with theaddition of boolean propsplit for proper spacing around the dropdown caret.
We use this extra class to reduce the horizontalpadding on either side of the caret by 25% and remove themargin-left that's attached for normal button dropdowns. Those additional changes hold the caret centered in thesplit button and implement a more properly sized hit area next to the main button.
Sizing
Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
Dark dropdowns
Opt into darker dropdowns to match a dark navbar or custom style by setdark property. No changes are required to the dropdown items.
And putting it to use in a navbar:
Directions
RTL
Directions are mirrored when using CoreUI in RTL, meaningdropstart will appear on the right side.
Centered
Trigger dropdown menus centered below the toggle by addingdirection="center" to thec-dropdown component.
Dropup
Trigger dropdown menus above elements by addingdirection="dropup" to thec-dropdown component.
Dropup Centered
Trigger dropup menu centered above the toggle by addingdirection="dropup-center" to thec-dropdowncomponent.
Dropright
Trigger dropdown menus at the right of the elements by addingdirection="dropend" to thec-dropdowncomponent.
Dropleft
Trigger dropdown menus at the left of the elements by addingdirection="dropstart" to thec-dropdowncomponent.
Menu items
Historically dropdown menu contents had to be links, but that's no longer the case with v4. Now you can optionally usebutton elements in your dropdowns instead of justa.
You can also create non-interactive dropdown items withcDropdownItemText.
Active
Set boolean propertyactive to style item as active.
Disabled
Adddisabled boolean property to items in the dropdown to style them as disabled.
Menu alignment
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Addaligment="end" to right align the dropdown menu.
Heads up! Dropdowns are positioned thanks toPopper.js.
Menu content
Headers
Add a header to label sections of actions in any dropdown menu.
In the following example we use div withoutcDropdownMenu to show dropdown menu content.
Dividers
Separate groups of related menu items with a divider.
In the following example we use div withoutcDropdownMenu to show dropdown menu content.
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.
Some example text that's free-flowing within the dropdown menu.
And this is more example text.
Forms
Put a form within a dropdown menu, or make it into a dropdown menu.
API reference
Dropdown Module
import { DropdownModule } from '@coreui/angular';@NgModule({ imports: [DropdownModule,]})export class AppModule() { }c-dropdown
component
Inputs
| name | description | type | default |
|---|---|---|---|
alignment | Set alignment of dropdown menu. | string | undefined |
dark | Sets a darker color scheme to match a dark navbar. | boolean | false |
direction | Sets a specified direction and location of the dropdown menu. | center |dropup | 'dropup-center' |dropend |dropstart | undefined |
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. | Placements | bottom-start |
popper | If you want to disable dynamic positioning set this property tofalse. | boolean | true |
variant | Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item. | btn-group |dropdown |input-group |nav-item | dropdown |
visible | Toggle the visibility of dropdown menu component. | boolean | false |
autoClose | Configure the auto close behavior of the dropdown:
| boolean |string | true |
popperConfig | To change dropdown default Popper config, seePopper configuration | Options | default |
Outputs
| name | description | type |
|---|---|---|
visibleChange | Event emitted onvisible change. | boolean |
cDropdownClose
directive
Inputs
| name | description | type | default |
|---|---|---|---|
disabled | Toggle the disabled state for the cDropdownClose host element. | boolean | undefined |
cDropdownDivider
directive
cDropdownHeader
directive
cDropdownItem
directive
Inputs
| name | description | type | default |
|---|---|---|---|
active | Toggle the active state for the dropdown item. | boolean | undefined |
autoClose | Close dropdown menu on cDropdownItem click. | boolean | true |
disabled | Toggle the disabled state for the dropdown item. | boolean | undefined |
cDropdownItemPlain
directive
cDropdownMenu
directive
Inputs
| name | description | type | default |
|---|---|---|---|
dark | Sets a darker color scheme to match a dark navbar. | boolean | true |
cDropdownToggle
directive
Inputs
| name | description | type | default |
|---|---|---|---|
caret | Enables pseudo element caret on toggler. | boolean | true |
split | Create split button dropdowns. | boolean | undefined |