🤩
Windframe Import update is finally here!

DropDown

Angular Bootstrap DropDown

Angular Bootstrap Dropdown is a toggleable menu embedding additional links or content. It allows you to construct advanced navigation and link categorization.

In case of more complicated navigations systems dropdowns are the essential elements providing you with possibility of placing all the most relevant links in our navigation bar (or other component acting as navigation - such as SideNav)

Aside from being not only highly functional, CDB dropdowns are also extraordinary visually attractive. It gives them this characteristic Material Design effects, like shadows, living colors or charming waves effect after opening a link.

They’re toggled by clicking, not by hovering; this is an intentional design decision. Why?

CDB is "mobile first" framework so, we avoid mixing functional elements and interaction by hovering because it decreases User Experience of users of mobile devices.

Importing the Contrast Angular Bootstrap Dropdown Module

To use the Contrast Angular Bootstrap Collapse component in your project you need to import DropdownModule.

typescript
import {DropdownModule } from 'cdbangular';

Dark Toggle Bar

Angular Bootstrap Dropdown Dark Toggle Bar

html
html
<CDBDropDown>
<CDBDropDownToggle color="dark" (click)="menu1.toggleDropdown($event)"
(mouseenter)="menu1.toggleDropdown($event)">
Dark Toggle Bar
</CDBDropDownToggle>
<CDBDropDownMenu #menu1="cdbDropdownMenu">
This is the toggle menu
</CDBDropDownMenu>
</CDBDropDown>

Primary Toggler with Caret

Angular Bootstrap Dropdown Primary Toggler with Caret

html
html
<CDBDropDown>
<CDBDropDownToggle color="primary" [caretDropDown]=true (click)="menu2.toggleDropdown($event)">
Primary Toggle Bar
</CDBDropDownToggle>
<CDBDropDownMenu #menu2="cdbDropdownMenu" placement="bottom">
This is the toogle menu with caret
</CDBDropDownMenu>
</CDBDropDown>

Secondary Toggle Bar

Angular Bootstrap Dropdown Secondary Toggle Bar

html
html
<CDBDropDown>
<CDBDropDownToggle [nav]=true color="secondary" [caretDropRight]=true
(click)="menu3.toggleDropdown($event)">
Secondary Toggle Bar as nav
</CDBDropDownToggle>
<CDBDropDownMenu #menu3="cdbDropdownMenu" placement="right">
This is the toogle menu to the right
</CDBDropDownMenu>
</CDBDropDown>

Danger Toggle Bar

Angular Bootstrap Dropdown Danger Toggle Bar

html
html
<CDBDropDown>
<CDBDropDownToggle color="danger" [caretDropUp]=true (click)="menu4.toggleDropdown($event)">
Danger Toggle Bar
</CDBDropDownToggle>
<CDBDropDownMenu #menu4="cdbDropdownMenu" placement="top">
This is the toogle menu to the top
</CDBDropDownMenu>
</CDBDropDown>

Success Toggle Bar

Angular Bootstrap Dropdown Success Toggle Bar

html
html
<CDBDropDown>
<CDBDropDownToggle color="success" [caretDropLeft]=true (click)="menu5.toggleDropdown($event)">
Success Toggle Bar
</CDBDropDownToggle>
<CDBDropDownMenu #menu5="cdbDropdownMenu" placement="left">
This is the toogle menu to the bottom
</CDBDropDownMenu>
</CDBDropDown>

Large DropDown

Angular Bootstrap Dropdown Large

html
html
<CDBDropDown>
<CDBDropDownToggle color="dark" size="lg" (click)="menu6.toggleDropdown($event)">
Large Dark Toggle Bar
</CDBDropDownToggle>
<CDBDropDownMenu #menu6="cdbDropdownMenu" placement="right">
This is the toogle menu to the right
</CDBDropDownMenu>
</CDBDropDown>

Small Dropdown

Angular Bootstrap Dropdown Small

html
html
<CDBDropDown>
<CDBDropDownToggle color="secondary" size="sm" (click)="menu7.toggleDropdown($event)">
Small Secondary Toggle Bar
</CDBDropDownToggle>
<CDBDropDownMenu #menu7="cdbDropdownMenu" placement="right">
<CDBDropDownItem [header]=true>cold place</CDBDropDownItem>
<CDBDropDownItem [divider]=true></CDBDropDownItem>
<CDBDropDownItem [disabled]=true>
First Item in cold place
</CDBDropDownItem>
<CDBDropDownItem [disabled]=true>second</CDBDropDownItem>
<CDBDropDownItem [toggle]=true>second</CDBDropDownItem>
<CDBDropDownItem>second</CDBDropDownItem>
<CDBDropDownItem>
<CDBLink to="/alert"> Alert</CDBLink>
</CDBDropDownItem>
</CDBDropDownMenu>
</CDBDropDown>

Disabled Danger Toggle Bar

Set the disabled prop of your dropdown to true to disable your dropdown.

Angular Bootstrap Dropdown Danger Toggle Bar Disabled

html
html
<CDBDropDown>
<CDBDropDownToggle color="danger" [disabled]=true (click)="menu8.toggleDropdown($event)">
Disabled Danger Toggle Bar
</CDBDropDownToggle>
<CDBDropDownMenu #menu8="cdbDropdownMenu" placement="right">
This is the toogle menu to the right
</CDBDropDownMenu>
</CDBDropDown>

Angular Bootstrap Dropdown Menu with Header

html
html
<CDBDropDown>
<CDBDropDownToggle color="secondary" (click)="menu9.toggleDropdown($event)">
DropDown
</CDBDropDownToggle>
<CDBDropDownMenu #menu9="cdbDropdownMenu" placement="right">
<CDBDropDownItem [header]=true>Cold place</CDBDropDownItem>
<CDBDropDownItem>
First Item in cold place
</CDBDropDownItem>
<CDBDropDownItem [toggle]=true>second</CDBDropDownItem>
<CDBDropDownItem>second</CDBDropDownItem>
</CDBDropDownMenu>
</CDBDropDown>

Angular Bootstrap Dropdown Menu with Divider

html
html
<CDBDropDown>
<CDBDropDownToggle color="warning" (click)="menu10.toggleDropdown($event)">
DropDown
</CDBDropDownToggle>
<CDBDropDownMenu #menu10="cdbDropdownMenu" placement="left">
<CDBDropDownItem>
<CDBLink to="/alert">Alert</CDBLink>
</CDBDropDownItem>
<CDBDropDownItem [divider]=true></CDBDropDownItem>
<CDBDropDownItem>
First Item in cold place
</CDBDropDownItem>
<CDBDropDownItem [toggle]=true>second</CDBDropDownItem>
<CDBDropDownItem>second</CDBDropDownItem>
</CDBDropDownMenu>
</CDBDropDown>

Disable Menu Items

Angular Bootstrap Dropdown Disable

html
html
<CDBDropDown>
<CDBDropDownToggle color="success" (click)="menu11.toggleDropdown($event)">
DropDown
</CDBDropDownToggle>
<CDBDropDownMenu #menu11="cdbDropdownMenu" placement="top">
<CDBDropDownItem>Cold place</CDBDropDownItem>
<CDBDropDownItem [disabled]=true>
Disabled
</CDBDropDownItem>
<CDBDropDownItem [disabled]=true>Second</CDBDropDownItem>
<CDBDropDownItem>Last</CDBDropDownItem>
</CDBDropDownMenu>
</CDBDropDown>

Active Menu Items

Angular Bootstrap Dropdown Active Menu Items

html
html
<CDBDropDown>
<CDBDropDownToggle color="dark" (click)="menu12.toggleDropdown($event)">
DropDown
</CDBDropDownToggle>
<CDBDropDownMenu #menu12="cdbDropdownMenu" placement="top">
<CDBDropDownItem>Cold place</CDBDropDownItem>
<CDBDropDownItem [active]=true>
Active
</CDBDropDownItem>
<CDBDropDownItem [toggle]=true>Second</CDBDropDownItem>
<CDBDropDownItem>Last</CDBDropDownItem>
</CDBDropDownMenu>
</CDBDropDown>

API Reference: Contrast Angular Bootstrap DropDown Props

This section will build on your information about the props you get to use with the Contrast Angular Bootstrap DropDown component. You will find out what these props do, their default values, and how you would use them in your code.

The table below lists other prop options of the CDBDropDown component.

NameTypeDefaultDescriptionExample
classStringAdds custom classesclass="myClass"
dropupBooleanfalseTrigger dropdown menu above dropdown buttondropUp
dropleftBooleanfalseTrigger dropdown menu on the left side of dropdown buttondropleft
droprightBooleanfalseTrigger dropdown menu on the right side of dropdown buttondropright
togglefunctionControl dropdown on clicktoggle={handleToggle}

API Reference: Contrast Angular Bootstrap DropDownItem Properties

The table below lists other prop options of the CDBDropDownItem component.

NameTypeDefaultDescriptionExample
classStringAdds custom classesclass="myClass"
activeBooleanfalseSets active state for of the menu itemactive=true
disableBooleanfalseDisables item and sets its color to light greydisable
dividerBooleanfalsePlaces dividing line instead of contentdivider
headerBooleanfalseFormats the item as a menu header (grey text, more padding)header
toggleBooleanfalseSet to false to prevent from closing Dropdown on clicktoggle=false
onClickfunctionToggle dropdown on clickonClick={handleToggle}

API Reference: Contrast Angular Bootstrap DropDownItem Properties

The table below lists other prop options of the CDBDropDownMenu component.

NameTypeDefaultDescriptionExample
classStringAdds custom classesclass="myClass"
colorStringprimaryChanges DropdownMenuItem hover background color, accepts ["primary", "secondary", "success", "dark", "danger", "info", "warning"]color="secondary"
disableBooleanfalseDisables item and sets its color to light greydisable=true
dividerBooleanfalsePlaces dividing line instead of contentdivider=true
headerBooleanfalseFormats the item as a menu header (grey text, more padding)header=true
toggleBooleanfalseSet to false to prevent from closing Dropdown on clicktoggle=false
onClickfunctionToggle dropdown on clickonClick={handleToggle}
dropupBooleanfalseTrigger dropdown menu above dropdown buttondropup=true
dropdownBooleanfalseTrigger dropdown menu below dropdown buttondropdown=true
dropleftBooleanfalseTrigger dropdown menu on the left side of dropdown buttondropleft=true
droprightBooleanfalseTrigger dropdown menu on the right side of dropdown buttondropright=true

API Reference: Contrast Angular Bootstrap DropDownItem Properties

The table below lists other prop options of the CDBDropDownToggle component.

NameTypeDefaultDescriptionExample
classStringAdds custom classesclass="myClass"
colorStringprimaryChanges DropdownMenuItem hover background color, accepts ["primary", "secondary", "success", "dark", "danger", "info", "warning"]color="secondary"
sizeStringDetermines size of the Dropdown button, available parameters: ["lg", "sm"] (medium by default)size="sm"
caretBooleanfalseInserts caret icon inside Dropdown buttoncaret=true
navBooleanfalseProps required while using Dropdown within Navbarnav=true
dropupBooleanfalseTrigger dropdown menu above dropdown buttondropup=true
dropdownBooleanfalseTrigger dropdown menu below dropdown buttondropdown=true
dropleftBooleanfalseTrigger dropdown menu on the left side of dropdown buttondropleft=true
droprightBooleanfalseTrigger dropdown menu on the right side of dropdown buttondropright=true

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast