Dropdowns
React Bootstrap 5 Dropdowns component
Toggle contextual overlays for displaying lists of links and more with the MDB dropdown component.
Note: Read the API tab to find all available options and advanced customization
Basic examples
Wrap the dropdown’s toggle and the dropdown menu within
MDBDropdown
. The examples shown here use semantic
<ul>
elements where appropriate, but custom markup is supported.
Colors
You can do this with any button variant:
import React from 'react';
import { MDBDropdown, MDBDropdownMenu, MDBDropdownToggle, MDBDropdownItem } from 'mdb-react-ui-kit';
export default function App() {
return (
<>
<MDBDropdown group>
<MDBDropdownToggle color='primary'>Action</MDBDropdownToggle>
<MDBDropdownMenu>
<MDBDropdownItem link>Action</MDBDropdownItem>
<MDBDropdownItem link>Another action</MDBDropdownItem>
<MDBDropdownItem link>Something else here</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
<MDBDropdown group>
<MDBDropdownToggle color='success'>Action</MDBDropdownToggle>
<MDBDropdownMenu>
<MDBDropdownItem link>Action</MDBDropdownItem>
<MDBDropdownItem link>Another action</MDBDropdownItem>
<MDBDropdownItem link>Something else here</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
<MDBDropdown group>
<MDBDropdownToggle color='warning'>Action</MDBDropdownToggle>
<MDBDropdownMenu>
<MDBDropdownItem link>Action</MDBDropdownItem>
<MDBDropdownItem link>Another action</MDBDropdownItem>
<MDBDropdownItem link>Something else here</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
<MDBDropdown group>
<MDBDropdownToggle color='info'>Action</MDBDropdownToggle>
<MDBDropdownMenu>
<MDBDropdownItem link>Action</MDBDropdownItem>
<MDBDropdownItem link>Another action</MDBDropdownItem>
<MDBDropdownItem link>Something else here</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
<MDBDropdown group>
<MDBDropdownToggle color='danger'>Action</MDBDropdownToggle>
<MDBDropdownMenu>
<MDBDropdownItem link>Action</MDBDropdownItem>
<MDBDropdownItem link>Another action</MDBDropdownItem>
<MDBDropdownItem link>Something else here</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
<MDBDropdown group>
<MDBDropdownToggle color='dark'>Action</MDBDropdownToggle>
<MDBDropdownMenu>
<MDBDropdownItem link>Action</MDBDropdownItem>
<MDBDropdownItem link>Another action</MDBDropdownItem>
<MDBDropdownItem link>Something else here</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
<MDBDropdown group className='shadow-0'>
<MDBDropdownToggle color='light'>Action</MDBDropdownToggle>
<MDBDropdownMenu>
<MDBDropdownItem link>Action</MDBDropdownItem>
<MDBDropdownItem link>Another action</MDBDropdownItem>
<MDBDropdownItem link>Something else here</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
<MDBDropdown group className='shadow-0'>
<MDBDropdownToggle color='link'>Action</MDBDropdownToggle>
<MDBDropdownMenu>
<MDBDropdownItem link>Action</MDBDropdownItem>
<MDBDropdownItem link>Another action</MDBDropdownItem>
<MDBDropdownItem link>Something else here</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
</>
);
}
Sizing
Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
import React from 'react';
import { MDBDropdown, MDBDropdownMenu, MDBDropdownToggle, MDBDropdownItem, MDBBtn } from 'mdb-react-ui-kit';
export default function App() {
return (
<>
<MDBDropdown group>
<MDBDropdownToggle size='lg'>Large button</MDBDropdownToggle>
<MDBDropdownMenu>
<MDBDropdownItem link>Action</MDBDropdownItem>
<MDBDropdownItem link>Another action</MDBDropdownItem>
<MDBDropdownItem link>Something else here</MDBDropdownItem>
<MDBDropdownItem divider />
<MDBDropdownItem link>Separated link</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
<MDBDropdown group>
<MDBBtn size='lg'> Large split button</MDBBtn>
<MDBDropdownToggle size='lg' split />
<MDBDropdownMenu>
<MDBDropdownItem link>Action</MDBDropdownItem>
<MDBDropdownItem link>Another action</MDBDropdownItem>
<MDBDropdownItem link>Something else here</MDBDropdownItem>
<MDBDropdownItem divider />
<MDBDropdownItem link>Separated link</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
<MDBDropdown group>
<MDBDropdownToggle size='sm'>Small button</MDBDropdownToggle>
<MDBDropdownMenu>
<MDBDropdownItem link>Action</MDBDropdownItem>
<MDBDropdownItem link>Another action</MDBDropdownItem>
<MDBDropdownItem link>Something else here</MDBDropdownItem>
<MDBDropdownItem divider />
<MDBDropdownItem link>Separated link</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
<MDBDropdown group>
<MDBBtn size='sm'> Small split button</MDBBtn>
<MDBDropdownToggle size='sm' split />
<MDBDropdownMenu>
<MDBDropdownItem link>Action</MDBDropdownItem>
<MDBDropdownItem link>Another action</MDBDropdownItem>
<MDBDropdownItem link>Something else here</MDBDropdownItem>
<MDBDropdownItem divider />
<MDBDropdownItem link>Separated link</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
</>
);
}
Directions
Dropup
Trigger dropdown menus above elements by adding dropup
attribute to the MDBDropdown
element.
import React from 'react';
import { MDBDropdown, MDBDropdownMenu, MDBDropdownToggle, MDBDropdownItem, MDBBtn } from 'mdb-react-ui-kit';
export default function App() {
return (
<>
<MDBDropdown dropup group>
<MDBDropdownToggle>Dropup</MDBDropdownToggle>
<MDBDropdownMenu>
<MDBDropdownItem link>Action</MDBDropdownItem>
<MDBDropdownItem link>Another action</MDBDropdownItem>
<MDBDropdownItem link>Something else here</MDBDropdownItem>
<MDBDropdownItem divider />
<MDBDropdownItem link>Separated link</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
<MDBDropdown dropup group>
<MDBBtn>Split Dropup</MDBBtn>
<MDBDropdownToggle />
<MDBDropdownMenu>
<MDBDropdownItem link>Action</MDBDropdownItem>
<MDBDropdownItem link>Another action</MDBDropdownItem>
<MDBDropdownItem link>Something else here</MDBDropdownItem>
<MDBDropdownItem divider />
<MDBDropdownItem link>Separated link</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
</>
);
}
Dropright
Trigger dropdown menus at the right of the elements by adding
dropright
attribute to the MDBDropdown
element.
import React from 'react';
import { MDBDropdown, MDBDropdownMenu, MDBDropdownToggle, MDBDropdownItem, MDBBtn } from 'mdb-react-ui-kit';
export default function App() {
return (
<>
<MDBDropdown dropright group>
<MDBDropdownToggle>Dropright</MDBDropdownToggle>
<MDBDropdownMenu>
<MDBDropdownItem link>Action</MDBDropdownItem>
<MDBDropdownItem link>Another action</MDBDropdownItem>
<MDBDropdownItem link>Something else here</MDBDropdownItem>
<MDBDropdownItem divider />
<MDBDropdownItem link>Separated link</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
<MDBDropdown dropright group>
<MDBBtn>Split Dropright</MDBBtn>
<MDBDropdownToggle />
<MDBDropdownMenu>
<MDBDropdownItem link>Action</MDBDropdownItem>
<MDBDropdownItem link>Another action</MDBDropdownItem>
<MDBDropdownItem link>Something else here</MDBDropdownItem>
<MDBDropdownItem divider />
<MDBDropdownItem link>Separated link</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
</>
);
}
Dropleft
Trigger dropdown menus at the left of the elements by adding
dropleft
attribute to the MDBDropdown
element.
import React from 'react';
import { MDBDropdown, MDBDropdownMenu, MDBDropdownToggle, MDBDropdownItem, MDBBtn } from 'mdb-react-ui-kit';
export default function App() {
return (
<>
<MDBDropdown dropleft group>
<MDBDropdownToggle>Dropleft</MDBDropdownToggle>
<MDBDropdownMenu>
<MDBDropdownItem link>Action</MDBDropdownItem>
<MDBDropdownItem link>Another action</MDBDropdownItem>
<MDBDropdownItem link>Something else here</MDBDropdownItem>
<MDBDropdownItem divider />
<MDBDropdownItem link>Separated link</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
<MDBDropdown dropleft group>
<MDBBtn>Split Dropleft</MDBBtn>
<MDBDropdownToggle />
<MDBDropdownMenu>
<MDBDropdownItem link>Action</MDBDropdownItem>
<MDBDropdownItem link>Another action</MDBDropdownItem>
<MDBDropdownItem link>Something else here</MDBDropdownItem>
<MDBDropdownItem divider />
<MDBDropdownItem link>Separated link</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
</>
);
}
Remove animation
To remove the fade animation on click, use
animation
attribute on the MDBDropdown
element.
import React from 'react';
import { MDBDropdown, MDBDropdownMenu, MDBDropdownToggle, MDBDropdownItem } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBDropdown animation={false}>
<MDBDropdownToggle>Dropdown button</MDBDropdownToggle>
<MDBDropdownMenu>
<MDBDropdownItem link>Action</MDBDropdownItem>
<MDBDropdownItem link>Another action</MDBDropdownItem>
<MDBDropdownItem link>Something else here</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
);
}
Dropdown options
Use options
prop to change options in dropdown.
import React from 'react';
import { MDBDropdown, MDBDropdownMenu, MDBDropdownToggle, MDBDropdownItem } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBDropdown
options={{
modifiers: [
{
name: 'offset',
options: {
offset: [10, 20],
},
},
],
}}
>
<MDBDropdownToggle>Dropdown button</MDBDropdownToggle>
<MDBDropdownMenu>
<MDBDropdownItem link>Action</MDBDropdownItem>
<MDBDropdownItem link>Another action</MDBDropdownItem>
<MDBDropdownItem link>Something else here</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
);
}
Dark variant
Add dark
attribute onto an existing MDBDropdownMenu
to match a
dark navbar.
import React from 'react';
import { MDBDropdown, MDBDropdownMenu, MDBDropdownToggle, MDBDropdownItem } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBDropdown>
<MDBDropdownToggle color='secondary'>Dropdown button</MDBDropdownToggle>
<MDBDropdownMenu dark>
<MDBDropdownItem link>Action</MDBDropdownItem>
<MDBDropdownItem link>Another action</MDBDropdownItem>
<MDBDropdownItem link>Something else here</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
);
}
Dropdowns - API
Import
import {
MDBDropdown,
MDBDropdownMenu,
MDBDropdownToggle,
MDBDropdownItem,
} from 'mdb-react-ui-kit';
Properties
MDBDropdown
Name | Type | Default | Description | Example |
---|---|---|---|---|
animation
|
Boolean | true |
Turn off/on animation to MDBDropdown element |
<MDBDropdown animation />
|
dropleft
|
Boolean | false |
Set placement with this prop to MDBDropdown element
|
<MDBDropdown dropleft />
|
dropup
|
Boolean | false |
Set placement with this prop to MDBDropdown element
|
<MDBDropdown dropup />
|
dropright
|
Boolean | false |
Set placement with this prop to MDBDropdown element
|
<MDBDropdown dropright />
|
group
|
Boolean | false |
Set class group to MDBDropdown element |
<MDBDropdown group />
|
isOpen
|
Boolean | false |
Set open dropdown on mounted in MDBDropdown element
|
<MDBDropdown isOpen />
|
options
|
Object |
|
Set default options to MDBDropdown element |
<MDBDropdown options={{...}} />
|
tag
|
String | 'div' |
Defines tag of the MDBDropdown element |
<MDBDropdown tag="section" />
|
MDBDropdownToggle
Name | Type | Default | Description | Example |
---|---|---|---|---|
split
|
Boolean | false |
Set split to MDBDropdownToggle element if you add
more buttons to split
|
<MDBDropdownToggle split />
|
tag
|
String | 'MDBBtn' |
Defines tag of the MDBDropdownToggle element |
<MDBDropdownToggle tag="section" />
|
MDBDropdownItem
Name | Type | Default | Description | Example |
---|---|---|---|---|
childTag
|
String | '' |
Defines tag of the MDBDropdownItem children element |
<MDBDropdownItem childTag="button" />
|
disabled
|
Boolean | false |
Adds class .disabled to MDBDropdownItem when it's rendered as a link |
<MDBDropdownItem disabled link />
|
divider
|
Boolean | false |
Renders MDBDropdownItem as a divider |
<MDBDropdownItem divider />
|
header
|
Boolean | false |
Renders MDBDropdownItem as a header |
<MDBDropdownItem header />
|
href
|
String | '#' |
Defines href in MDBDropdownItem when it's rendered as a link |
<MDBDropdownItem link href='#home' />
|
link
|
Boolean | false |
Renders MDBDropdownItem as a link |
<MDBDropdownItem link />
|
tag
|
String | 'li' |
Defines tag of the MDBDropdownItem element |
<MDBDropdownItem tag="section" />
|
Events
MDBDropdown
Name | Type | Description |
---|---|---|
onHide
|
() => any | Fires immediately when the onHide instance method has been called. |
onShow
|
() => any | Fires immediately when the onShow instance method is called. |