🤩
Windframe Import Update is finally here.

DropDown

React Bootstrap 5 DropDown

The React Bootstrap 5 Dropdown is a toggleable menu that provides multiple links or content. It enables the creation of complex navigation and link categorization.

Dropdowns are key parts in more complex navigation systems, allowing you to place all of the most relevant links in our menu bar (or other component acting as navigation - such as SideNav).

CDB dropdowns are not only highly practical, but they are also visually appealing. After they open a link, it gives them these distinctive Material Design features, such as shadows, dynamic colors, and attractive waves.

They are toggled by clicking rather than hovering; this is an intentional design choice. Why?

Because CDB is a "mobile first" framework, we avoid mixing functional elements with interaction through hovering because it degrades the User Experience of mobile device users.

By adjusting props and prop values, we can give our dropdown component several predefined styles with the React Bootstrap 5 DropDown component. In the examples below, we explored with the 'color' prop (which changes the dropdown's background color), the dropup prop (which changes the caret symbol to face upwards), the dropleft prop (which changes the caret symbol to face left), the dropright prop (which changes the caret symbol to face right), and the size prop ( this prop can have values ranging from small to large ).

Importing the React Bootstrap 5 DropDown Component

To begin using the Contrast React Bootstrap 5 DropDown component, import CDBDropDown into your project.

js
import { CDBDropDown } from 'cdbreact';

Then we import CDBDropDownMenu, which holds the text we want to show in our dropdown, and CDBDropDownToggle, which is the caret that toggles our dropdown.

js
import { CDBDropDown, CDBDropDownMenu, CDBDropDownItem, CDBDropDownToggle } from 'cdbreact';

Dark Toggle Bar

js
import React from 'react';
import { CDBDropDown, CDBDropDownMenu, CDBDropDownToggle, CDBContainer } from 'cdbreact';
const DropDown = () => {
return (
<CDBContainer>
<CDBDropDown>
<CDBDropDownToggle color="dark" caret>
Dark Toggle Bar
</CDBDropDownToggle>
<CDBDropDownMenu>This is the toogle menu</CDBDropDownMenu>
</CDBDropDown>
</CDBContainer>
);
};
export default DropDown;

Primary Toggler

js
import React from 'react';
import { CDBDropDown, CDBDropDownMenu, CDBDropDownToggle, CDBContainer } from 'cdbreact';
const DropDown = () => {
return (
<CDBContainer>
<CDBDropDown>
<CDBDropDownToggle color="primary" caret dropdown>
Primary Toggle Bar
</CDBDropDownToggle>
<CDBDropDownMenu>This is the toogle menu with caret</CDBDropDownMenu>
</CDBDropDown>
</CDBContainer>
);
};
export default DropDown;

Secondary Toggle Bar

js
import React from 'react';
import { CDBDropDown, CDBDropDownMenu, CDBDropDownToggle, CDBContainer } from 'cdbreact';
const DropDown = () => {
return (
<CDBContainer>
<CDBDropDown>
<CDBDropDownToggle color="secondary" caret dropright>
Secondary Toggle Bar as nav
</CDBDropDownToggle>
<CDBDropDownMenu dropright>This is the toogle menu to the right</CDBDropDownMenu>
</CDBDropDown>
</CDBContainer>
);
};
export default DropDown;

Danger Toggle Bar

js
import React from 'react';
import { CDBDropDown, CDBDropDownMenu, CDBDropDownToggle, CDBContainer } from 'cdbreact';
const DropDown = () => {
return (
<CDBContainer>
<CDBDropDown style={{ margin: '30px 0' }}>
<CDBDropDownToggle color="danger" caret dropup>
Danger Toggle Bar
</CDBDropDownToggle>
<CDBDropDownMenu dropup>This is the toogle menu to the top</CDBDropDownMenu>
</CDBDropDown>
</CDBContainer>
);
};
export default DropDown;

Success Toggle Bar

js
import React from 'react';
import { CDBDropDown, CDBDropDownMenu, CDBDropDownToggle, CDBContainer } from 'cdbreact';
const DropDown = () => {
return (
<CDBContainer>
<CDBDropDown style={{ margin: '30px 0' }}>
<CDBDropDownToggle color="success" caret dropleft>
Success Toggle Bar
</CDBDropDownToggle>
<CDBDropDownMenu dropleft>This is the toggle menu to the left</CDBDropDownMenu>
</CDBDropDown>
</CDBContainer>
);
};
export default DropDown;

Large DropDown

The CDBDropDownToggle component takes in a size prop, giving the size prop a value of lg gives the DropDown extra padding all around.

js
import React from 'react';
import { CDBDropDown, CDBDropDownMenu, CDBDropDownToggle, CDBContainer } from 'cdbreact';
const DropDown = () => {
return (
<CDBContainer>
<CDBDropDown>
<CDBDropDownToggle color="dark" size="lg">
Large Dark Toggle Bar
</CDBDropDownToggle>
<CDBDropDownMenu dropright>This is the toogle menu to the right</CDBDropDownMenu>
</CDBDropDown>
</CDBContainer>
);
};
export default DropDown;

Small Dropdown

js
import React from 'react';
import {
CDBDropDown,
CDBDropDownItem,
CDBDropDownMenu,
CDBDropDownToggle,
CDBContainer,
} from 'cdbreact';
const DropDown = () => {
return (
<CDBContainer>
<CDBDropDown>
<CDBDropDownToggle color="secondary" size="sm">
small secondary toggle bar
</CDBDropDownToggle>
<CDBDropDownMenu dropright>
<CDBDropDownItem header>cold place</CDBDropDownItem>
<CDBDropDownItem divider />
<CDBDropDownItem disabled>First Item in cold place</CDBDropDownItem>
<CDBDropDownItem disabled>second</CDBDropDownItem>
<CDBDropDownItem toggle>second</CDBDropDownItem>
<CDBDropDownItem>second</CDBDropDownItem>
<CDBDropDownItem>
<CDBLink to="/alert"> Alert</CDBLink>
</CDBDropDownItem>
</CDBDropDownMenu>
</CDBDropDown>
</CDBContainer>
);
};
export default DropDown;

Disabled Danger Toggle Bar

js
import React from 'react';
import { CDBDropDown, CDBDropDownMenu, CDBDropDownToggle, CDBContainer } from 'cdbreact';
const DropDown = () => {
return (
<CDBContainer>
<CDBDropDown>
<CDBDropDownToggle color="danger" disabled>
Disabled Danger Toggle Bar
</CDBDropDownToggle>
<CDBDropDownMenu dropright>This is the toogle menu to the right</CDBDropDownMenu>
</CDBDropDown>
</CDBContainer>
);
};
export default DropDown;
js
import React from 'react';
import {
CDBDropDown,
CDBDropDownMenu,
CDBDropDownItem,
CDBDropDownToggle,
CDBContainer,
} from 'cdbreact';
const DropDown = () => {
return (
<CDBContainer>
<CDBDropDown>
<CDBDropDownToggle color="secondary">DropDown</CDBDropDownToggle>
<CDBDropDownMenu dropright>
<CDBDropDownItem header>Cold place</CDBDropDownItem>
<CDBDropDownItem>First Item in cold place</CDBDropDownItem>
<CDBDropDownItem toggle>second</CDBDropDownItem>
<CDBDropDownItem>second</CDBDropDownItem>
</CDBDropDownMenu>
</CDBDropDown>
</CDBContainer>
);
};
export default DropDown;
js
import React from 'react';
import {
CDBDropDown,
CDBDropDownItem,
CDBDropDownMenu,
CDBDropDownToggle,
CDBContainer,
} from 'cdbreact';
const DropDown = () => {
return (
<CDBContainer>
<CDBDropDown>
<CDBDropDownToggle color="warning">DropDown</CDBDropDownToggle>
<CDBDropDownMenu dropleft>
<CDBDropDownItem>
<CDBLink to="/alert"> Alert</CDBLink>
</CDBDropDownItem>
<CDBDropDownItem divider />
<CDBDropDownItem>First Item in cold place</CDBDropDownItem>
<CDBDropDownItem toggle>second</CDBDropDownItem>
<CDBDropDownItem>second</CDBDropDownItem>
</CDBDropDownMenu>
</CDBDropDown>
</CDBContainer>
);
};
export default DropDown;

Disabled Menu Items

js
import React from 'react';
import {
CDBDropDown,
CDBDropDownItem,
CDBDropDownMenu,
CDBDropDownToggle,
CDBContainer,
} from 'cdbreact';
const DropDown = () => {
return (
<CDBContainer>
<CDBDropDown>
<CDBDropDownToggle color="success">DropDown</CDBDropDownToggle>
<CDBDropDownMenu dropup>
<CDBDropDownItem>Cold place</CDBDropDownItem>
<CDBDropDownItem disabled>Disabled</CDBDropDownItem>
<CDBDropDownItem disabled>Second</CDBDropDownItem>
<CDBDropDownItem>Last</CDBDropDownItem>
</CDBDropDownMenu>
</CDBDropDown>
</CDBContainer>
);
};
export default DropDown;

Active Menu Items

js
import React from 'react';
import {
CDBDropDown,
CDBDropDownItem,
CDBDropDownMenu,
CDBDropDownToggle,
CDBContainer,
} from 'cdbreact';
const DropDown = () => {
return (
<CDBContainer>
<CDBDropDown>
<CDBDropDownToggle color="dark">DropDown</CDBDropDownToggle>
<CDBDropDownMenu dropup>
<CDBDropDownItem>Cold place</CDBDropDownItem>
<CDBDropDownItem active>Active</CDBDropDownItem>
<CDBDropDownItem toggle>Second</CDBDropDownItem>
<CDBDropDownItem>Last</CDBDropDownItem>
</CDBDropDownMenu>
</CDBDropDown>
</CDBContainer>
);
};
export default DropDown;

Contrast React Bootstrap 5 DropDown Props

This tutorial will expand on your previous knowledge of the props available with the React Bootstrap 5 DropDown component. You'll learn what these properties do, what their default values are, and how to use them in your code.

Other prop options for the CDBDropDown component are included in the table below.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBDropDown className="myClass" ... />
tagStringspanChanges default dropdown tag<CDBDropDown tag="p" ... />
dropupBooleanfalseTrigger dropdown menu above dropdown button<CDBDropDown dropup .../>
dropleftBooleanfalseTrigger dropdown menu on the left side of dropdown button<CDBDropDown dropleft .../>
droprightBooleanfalseTrigger dropdown menu on the right side of dropdown button<CDBDropDown dropright .../>
togglefunctionControl dropdown on click<CDBDropDown toggle={handleToggle} .../>

API Reference: Contrast React Bootstrap 5 DropDownItem Properties

The table below shows CDBDropDownItem component prop options.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBDropDownItem className="myClass" ... />
tagStringbuttonChanges default dropdown tag<CDBDropDownItem tag="button" ... />
activeBooleanfalseSets active state for of the menu item<CDBDropDownItem active .../>
disableBooleanfalseDisables item and sets its color to light grey<CDBDropDownItem disable .../>
dividerBooleanfalsePlaces dividing line instead of content<CDBDropDownItem divider .../>
headerBooleanfalseFormats the item as a menu header (grey text, more padding)<CDBDropDownItem header .../>
toggleBooleanfalseSet to false to prevent from closing Dropdown on click<CDBDropDownItem toggle={false} .../>
onClickfunctionToggle dropdown on click<CDBDropDownItem onClick={handleToggle} .../>

API Reference: Contrast DropDownMenu Properties

The table below shows CDBDropDownMenu component prop options.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBDropDownMenu className="myClass" ... />
tagStringspanChanges default dropdown tag<CDBDropDownMenu tag="button" ... />
colorStringprimaryChanges DropdownMenuItem hover background color, accepts ["primary", "secondary", "success", "dark", "danger", "info", "warning"]<CDBDropDownMenu color="secondary" .../>
disableBooleanfalseDisables item and sets its color to light grey<CDBDropDownMenu disable .../>
dividerBooleanfalsePlaces dividing line instead of content<CDBDropDownMenu divider .../>
headerBooleanfalseFormats the item as a menu header (grey text, more padding)<CDBDropDownMenu header .../>
toggleBooleanfalseSet to false to prevent from closing Dropdown on click<CDBDropDownMenu toggle={false} .../>
onClickfunctionToggle dropdown on click<CDBDropDownMenu onClick={handleToggle} .../>
dropupBooleanfalseTrigger dropdown menu above dropdown button<CDBDropDownMenu dropup .../>
dropdownBooleanfalseTrigger dropdown menu below dropdown button<CDBDropDownMenu dropdown .../>
dropleftBooleanfalseTrigger dropdown menu on the left side of dropdown button<CDBDropDownMenu dropleft .../>
droprightBooleanfalseTrigger dropdown menu on the right side of dropdown button<CDBDropDownMenu dropright .../>

API Reference: Contrast DropDownToggle Properties

The table below shows CDBDropDownToggle component prop options.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBDropDownToggle className="myClass" ... />
tagStringbuttonChanges default dropdown tag<CDBDropDownToggle tag="button" ... />
colorStringprimaryChanges DropdownMenuItem hover background color, accepts ["primary", "secondary", "success", "dark", "danger", "info", "warning"]<CDBDropDownToggle color="secondary" .../>
sizeStringDetermines size of the Dropdown button, available parameters: ["lg", "sm"] (medium by default)<CDBDropDownToggle size="sm" .../>
caretBooleanfalseInserts caret icon inside Dropdown button<CDBDropDownToggle caret .../>
navBooleanfalseProps required while using Dropdown within Navbar<CDBDropDownToggle nav .../>
dropupBooleanfalseTrigger dropdown menu above dropdown button<CDBDropDownToggle dropup .../>
dropdownBooleanfalseTrigger dropdown menu below dropdown button<CDBDropDownToggle dropdown .../>
dropleftBooleanfalseTrigger dropdown menu on the left side of dropdown button<CDBDropDownToggle dropleft .../>
droprightBooleanfalseTrigger dropdown menu on the right side of dropdown button<CDBDropDownToggle dropright .../>

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