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 dropstart prop (which changes the caret symbol to face left), the dropend 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.

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.

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

Dark Toggle Bar

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

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

import React from 'react';
import { CDBDropDown, CDBDropDownMenu, CDBDropDownToggle, CDBContainer } from 'cdbreact';

const DropDown = () => {
  return (
    <CDBContainer>
      <CDBDropDown>
        <CDBDropDownToggle color="secondary" caret dropend>
          Secondary Toggle Bar as nav
        </CDBDropDownToggle>
        <CDBDropDownMenu dropend>This is the toogle menu to the right</CDBDropDownMenu>
      </CDBDropDown>
    </CDBContainer>
  );
};

export default DropDown;

Danger Toggle Bar

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

import React from 'react';
import { CDBDropDown, CDBDropDownMenu, CDBDropDownToggle, CDBContainer } from 'cdbreact';

const DropDown = () => {
  return (
    <CDBContainer>
      <CDBDropDown style={{ margin: '30px 0' }}>
        <CDBDropDownToggle color="success" caret dropstart>
          Success Toggle Bar
        </CDBDropDownToggle>
        <CDBDropDownMenu dropstart>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.

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 dropend>This is the toogle menu to the right</CDBDropDownMenu>
      </CDBDropDown>
    </CDBContainer>
  );
};

export default DropDown;

Small Dropdown

import React from 'react';
import {
  CDBDropDown,
  CDBDropDownItem,
  CDBDropDownMenu,
  CDBLink,
  CDBDropDownToggle,
  CDBContainer,
} from 'cdbreact';

const DropDown = () => {
  return (
    <CDBContainer>
      <CDBDropDown>
        <CDBDropDownToggle color="secondary" size="sm">
          small secondary toggle bar
        </CDBDropDownToggle>
        <CDBDropDownMenu dropend>
          <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

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 dropend>This is the toogle menu to the right</CDBDropDownMenu>
      </CDBDropDown>
    </CDBContainer>
  );
};

export default DropDown;

Menu with Header

import React from 'react';
import {
  CDBDropDown,
  CDBDropDownMenu,
  CDBDropDownItem,
  CDBDropDownToggle,
  CDBContainer,
} from 'cdbreact';

const DropDown = () => {
  return (
    <CDBContainer>
      <CDBDropDown>
        <CDBDropDownToggle color="secondary">DropDown</CDBDropDownToggle>
        <CDBDropDownMenu dropend>
          <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;

Menu with Divider

import React from 'react';
import {
  CDBDropDown,
  CDBDropDownItem,
  CDBDropDownMenu,
  CDBDropDownToggle,
  CDBLink,
  CDBContainer,
} from 'cdbreact';

const DropDown = () => {
  return (
    <CDBContainer>
      <CDBDropDown>
        <CDBDropDownToggle color="warning">DropDown</CDBDropDownToggle>
        <CDBDropDownMenu dropstart>
          <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

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

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.

Name	Type	Default	Description	Example
className	String		Adds custom classes	<CDBDropDown className="myClass" ... />
tag	String	span	Changes default dropdown tag	<CDBDropDown tag="p" ... />
dropup	Boolean	false	Trigger dropdown menu above dropdown button	<CDBDropDown dropup .../>
dropstart	Boolean	false	Trigger dropdown menu on the left side of dropdown button	<CDBDropDown dropstart .../>
dropend	Boolean	false	Trigger dropdown menu on the right side of dropdown button	<CDBDropDown dropend .../>
toggle	function		Control dropdown on click	<CDBDropDown toggle={handleToggle} .../>

API Reference: Contrast React Bootstrap 5 DropDownItem Properties

The table below shows CDBDropDownItem component prop options.

Name	Type	Default	Description	Example
className	String		Adds custom classes	<CDBDropDownItem className="myClass" ... />
tag	String	button	Changes default dropdown tag	<CDBDropDownItem tag="button" ... />
active	Boolean	false	Sets active state for of the menu item	<CDBDropDownItem active .../>
disable	Boolean	false	Disables item and sets its color to light grey	<CDBDropDownItem disable .../>
divider	Boolean	false	Places dividing line instead of content	<CDBDropDownItem divider .../>
header	Boolean	false	Formats the item as a menu header (grey text, more padding)	<CDBDropDownItem header .../>
toggle	Boolean	false	Set to `false` to prevent from closing Dropdown on click	<CDBDropDownItem toggle={false} .../>
onClick	function		Toggle dropdown on click	<CDBDropDownItem onClick={handleToggle} .../>

API Reference: Contrast DropDownMenu Properties

The table below shows CDBDropDownMenu component prop options.

Name	Type	Default	Description	Example
className	String		Adds custom classes	<CDBDropDownMenu className="myClass" ... />
tag	String	span	Changes default dropdown tag	<CDBDropDownMenu tag="button" ... />
color	String	primary	Changes DropdownMenuItem hover background color, accepts `["primary", "secondary", "success", "dark", "danger", "info", "warning"]`	<CDBDropDownMenu color="secondary" .../>
disable	Boolean	false	Disables item and sets its color to light grey	<CDBDropDownMenu disable .../>
divider	Boolean	false	Places dividing line instead of content	<CDBDropDownMenu divider .../>
header	Boolean	false	Formats the item as a menu header (grey text, more padding)	<CDBDropDownMenu header .../>
toggle	Boolean	false	Set to `false` to prevent from closing Dropdown on click	<CDBDropDownMenu toggle={false} .../>
onClick	function		Toggle dropdown on click	<CDBDropDownMenu onClick={handleToggle} .../>
dropup	Boolean	false	Trigger dropdown menu above dropdown button	<CDBDropDownMenu dropup .../>
dropdown	Boolean	false	Trigger dropdown menu below dropdown button	<CDBDropDownMenu dropdown .../>
dropstart	Boolean	false	Trigger dropdown menu on the left side of dropdown button	<CDBDropDownMenu dropstart .../>
dropend	Boolean	false	Trigger dropdown menu on the right side of dropdown button	<CDBDropDownMenu dropend .../>

API Reference: Contrast DropDownToggle Properties

The table below shows CDBDropDownToggle component prop options.

Name	Type	Default	Description	Example
className	String		Adds custom classes	<CDBDropDownToggle className="myClass" ... />
tag	String	button	Changes default dropdown tag	<CDBDropDownToggle tag="button" ... />
color	String	primary	Changes DropdownMenuItem hover background color, accepts `["primary", "secondary", "success", "dark", "danger", "info", "warning"]`	<CDBDropDownToggle color="secondary" .../>
size	String		Determines size of the Dropdown button, available parameters: `["lg", "sm"]` (medium by default)	<CDBDropDownToggle size="sm" .../>
caret	Boolean	false	Inserts caret icon inside Dropdown button	<CDBDropDownToggle caret .../>
nav	Boolean	false	Props required while using Dropdown within Navbar	<CDBDropDownToggle nav .../>
dropup	Boolean	false	Trigger dropdown menu above dropdown button	<CDBDropDownToggle dropup .../>
dropdown	Boolean	false	Trigger dropdown menu below dropdown button	<CDBDropDownToggle dropdown .../>
dropstart	Boolean	false	Trigger dropdown menu on the left side of dropdown button	<CDBDropDownToggle dropstart .../>
dropend	Boolean	false	Trigger dropdown menu on the right side of dropdown button	<CDBDropDownToggle dropend .../>

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically 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 Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

Carousel

Card