Dropdown

React dropdown component allows you to toggle contextual overlays for displaying lists, links, and more html elements.

Usage

Example

Script


  return (
    <div>
      <CDropdown className="mt-2">
        <CDropdownToggle caret color="info">
          Dropdown button
        </CDropdownToggle>
        <CDropdownMenu>
          <CDropdownItem header>Header</CDropdownItem>
          <CDropdownItem disabled>Action Disabled</CDropdownItem>
          <CDropdownItem>Action</CDropdownItem>
          <CDropdownItem divider />
          <CDropdownItem>Another Action</CDropdownItem>
        </CDropdownMenu>
      </CDropdown>
    </div>
  )

# Features

Popper.js based toggleable menu
Toggling mechanism managed by default
Fully customizable toggler and menu

# Dropdown API

Name	Required	Type	Default Value
tag		any
main HTML tag name
children		any
children components
className		string
user classes for the main HTML tag
innerRef		(object \| Function \| string)
ref to the main tag
inNav		boolean
set for dropdowns placed in Nav component

DropdownDivider

Render divider variant of CDropdownItem.

DropdownHeader

Render header variant of CDropdownItem.

DropdownItem

# DropdownItem API

Name	Required	Type	Default Value
tag		any
main HTML tag name
className		string
user classes for the main HTML tag
innerRef		(object \| Function \| string)
ref to the main tag
color		string
backgroud color
divider		boolean
render as divider
header		boolean
render as header
disabled		boolean
disabled state
onClick		Function
on click event callback
active		boolean
active state

DropdownMenu

# DropdownMenu API

Name	Required	Type	Default Value
children	true	any
children components
className		string
user classes for the main HTML tag
innerRef		(object \| Function \| string)
ref to the main tag
modifiers		any[]
Popper Js modifiers
show		boolean
show state
placement		(top-end \| top \| top-start \| bottom-end \| bottom \| bottom-start \| right-start \| right \| right-end \| left-start \| left \| left-end)	bottom-start
the placement of dropdown menu

DropdownToggle

# DropdownToggle API

Name	Type	Default Value
tag	any
main HTML tag name
children	any
children components
className	string
user classes for the main HTML tag
innerRef	(object \| Function \| string)
ref to the main tag
caret	boolean	true
render default caret
onClick	Function
on click event callback
split	boolean
split version
disabled	boolean
disabled state