DropDown

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.

Basic DropDown

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 with Caret

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 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

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 dropleft>
                    Success Toggle Bar
                  </CDBDropDownToggle>
                  <CDBDropDownMenu dropleft>
                    This is the toggle menu to the left
                  </CDBDropDownMenu>
                </CDBDropDown>
    </CDBContainer>
  );
};
export default DropDown;

Large DropDown

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

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

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;

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 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;

Menu with Divider

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

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;

API

In this section you will find advanced information about the DropDown component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.

Contrast DropDown Import Statement

You need to import the Contrast DropDown component first before using it.

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

API Reference: Contrast DropDown Properties

The table below shows the configuration options of the CDBDropDown component.

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 .../>
dropleft	Boolean	false	Trigger dropdown menu on the left side of dropdown button	<CDBDropDown dropleft .../>
dropright	Boolean	false	Trigger dropdown menu on the right side of dropdown button	<CDBDropDown dropright .../>
toggle	function		Control dropdown on click	<CDBDropDown toggle={handleToggle} .../>

API Reference: Contrast DropDownItem Properties

The table below shows the configuration options of the CDBDropDownItem component.

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 the configuration options of the CDBDropDownMenu component.

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 .../>
dropleft	Boolean	false	Trigger dropdown menu on the left side of dropdown button	<CDBDropDownMenu dropleft .../>
dropright	Boolean	false	Trigger dropdown menu on the right side of dropdown button	<CDBDropDownMenu dropright .../>

API Reference: Contrast DropDownToggle Properties

The table below shows the configuration options of the CDBDropDownToggle component.

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 .../>
dropleft	Boolean	false	Trigger dropdown menu on the left side of dropdown button	<CDBDropDownToggle dropleft .../>
dropright	Boolean	false	Trigger dropdown menu on the right side of dropdown button	<CDBDropDownToggle dropright .../>

Icon

Input