Dropdowns

React Bootstrap 5 Dropdowns component

Toggle contextual overlays for displaying lists of links and more with the MDB dropdown plugin.

Note: Read the API tab to find all available options and advanced customization

Basic examples

Wrap the dropdown’s toggle (your button or link) and the dropdown menu within .dropdown, or another element that declares position: relative;. Dropdowns can be triggered from <a> or <button> elements to better fit your potential needs. The examples shown here use semantic <ul> elements where appropriate, but custom markup is supported.

Regular button

Any single .btn can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either <button> elements: 

        
            
            import React from 'react';
            import { MDBDropdown, MDBDropdownMenu, MDBDropdownToggle, MDBDropdownItem, MDBDropdownLink } from 'mdb-react-ui-kit';
            
            export default function App() {
              return (
                <MDBDropdown>
                  <MDBDropdownToggle>Dropdown button</MDBDropdownToggle>
                  <MDBDropdownMenu>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Action</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Another action</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Something else here</MDBDropdownLink>
                    </MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
              );
            }

Colors

You can do this with any button variant:

        
            
          import React from 'react';
          import { MDBDropdown, MDBDropdownMenu, MDBDropdownToggle, MDBDropdownItem, MDBDropdownLink } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <>
                <MDBDropdown group>
                  <MDBDropdownToggle color='primary'>Action</MDBDropdownToggle>
                  <MDBDropdownMenu>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Action</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Another action</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Something else here</MDBDropdownLink>
                    </MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
                <MDBDropdown group>
                  <MDBDropdownToggle color='success'>Action</MDBDropdownToggle>
                  <MDBDropdownMenu>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Action</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Another action</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Something else here</MDBDropdownLink>
                    </MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
    
                <MDBDropdown group>
                  <MDBDropdownToggle color='warning'>Action</MDBDropdownToggle>
                  <MDBDropdownMenu>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Action</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Another action</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Something else here</MDBDropdownLink>
                    </MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
    
                <MDBDropdown group>
                  <MDBDropdownToggle color='info'>Action</MDBDropdownToggle>
                  <MDBDropdownMenu>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Action</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Another action</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Something else here</MDBDropdownLink>
                    </MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
    
                <MDBDropdown group>
                  <MDBDropdownToggle color='danger'>Action</MDBDropdownToggle>
                  <MDBDropdownMenu>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Action</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Another action</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Something else here</MDBDropdownLink>
                    </MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
    
                <MDBDropdown group>
                  <MDBDropdownToggle color='dark'>Action</MDBDropdownToggle>
                  <MDBDropdownMenu>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Action</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Another action</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Something else here</MDBDropdownLink>
                    </MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
    
                <MDBDropdown group className='shadow-0'>
                  <MDBDropdownToggle color='light'>Action</MDBDropdownToggle>
                  <MDBDropdownMenu>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Action</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Another action</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Something else here</MDBDropdownLink>
                    </MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
    
                <MDBDropdown group className='shadow-0'>
                  <MDBDropdownToggle color='link'>Action</MDBDropdownToggle>
                  <MDBDropdownMenu>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Action</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Another action</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Something else here</MDBDropdownLink>
                    </MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
              </>
            );
          }

Split button

Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of .dropdown-toggle-split for proper spacing around the dropdown caret.

We use this extra class to reduce the horizontal padding on either side of the caret by 25% and remove the margin-left that’s added for regular button dropdowns. Those extra changes keep the caret centered in the split button and provide a more appropriately sized hit area next to the main button. 

        
            
          import React from 'react';
          import { MDBDropdown, MDBDropdownMenu, MDBDropdownToggle, MDBDropdownItem, MDBDropdownLink, MDBBtn } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <MDBDropdown className='btn-group'>
                <MDBBtn>Action</MDBBtn>
                <MDBDropdownToggle split></MDBDropdownToggle>
                <MDBDropdownMenu>
                  <MDBDropdownItem>
                    <MDBDropdownLink href="#">Action</MDBDropdownLink>
                  </MDBDropdownItem>
                  <MDBDropdownItem>
                    <MDBDropdownLink href="#">Another action</MDBDropdownLink>
                  </MDBDropdownItem>
                  <MDBDropdownItem>
                    <MDBDropdownLink href="#">Something else here</MDBDropdownLink>
                  </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, MDBDropdownLink, MDBBtn } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <>
                <MDBDropdown group>
                  <MDBDropdownToggle size='lg'>Large button</MDBDropdownToggle>
                  <MDBDropdownMenu>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Action</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Another action</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Something else here</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <hr className='dropdown-divider' />
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Separated link</MDBDropdownLink>
                    </MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>

                <MDBDropdown group>
                  <MDBBtn size='lg'> Large split button</MDBBtn>
                  <MDBDropdownToggle size='lg' split />
                  <MDBDropdownMenu>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Action</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Another action</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Something else here</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <hr className='dropdown-divider' />
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Separated link</MDBDropdownLink>
                    </MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>

                <MDBDropdown group>
                  <MDBDropdownToggle size='sm'>Small button</MDBDropdownToggle>
                  <MDBDropdownMenu>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Action</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Another action</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Something else here</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <hr className='dropdown-divider' />
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Separated link</MDBDropdownLink>
                    </MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>

                <MDBDropdown group>
                  <MDBBtn size='sm'> Small split button</MDBBtn>
                  <MDBDropdownToggle size='sm' split />
                  <MDBDropdownMenu>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Action</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Another action</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Something else here</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <hr className='dropdown-divider' />
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Separated link</MDBDropdownLink>
                    </MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
              </>
            );
          }

Directions

Dropup

Trigger dropdown menus above elements by adding .dropup to the parent element. 

        
            
            import React from 'react';
            import {
              MDBDropdown,
              MDBDropdownMenu,
              MDBDropdownToggle,
              MDBDropdownItem,
              MDBDropdownLink,
              MDBBtn
            } from 'mdb-react-ui-kit';
            
            export default function App() {
              return (
                <>
                  <MDBDropdown dropup group>
                    <MDBDropdownToggle>Dropup</MDBDropdownToggle>
                    <MDBDropdownMenu>
                      <MDBDropdownItem>
                        <MDBDropdownLink href="#">Action</MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <MDBDropdownLink href="#">Another action</MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <MDBDropdownLink href="#">Something else here</MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <hr className='dropdown-divider' />
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <MDBDropdownLink href="#">Separated link</MDBDropdownLink>
                      </MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
    
                  <MDBDropdown dropup group>
                    <MDBBtn>Split Dropup</MDBBtn>
                    <MDBDropdownToggle />
                    <MDBDropdownMenu>
                      <MDBDropdownItem>
                        <MDBDropdownLink href="#">Action</MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <MDBDropdownLink href="#">Another action</MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <MDBDropdownLink href="#">Something else here</MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <hr className='dropdown-divider' />
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <MDBDropdownLink href="#">Separated link</MDBDropdownLink>
                      </MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
                </>
              );
            }

Dropright

Trigger dropdown menus at the right of the elements by adding .dropend to the parent element. 

        
            
            import React from 'react';
            import {
              MDBDropdown,
              MDBDropdownMenu,
              MDBDropdownToggle,
              MDBDropdownItem,
              MDBDropdownLink,
              MDBBtn
            } from 'mdb-react-ui-kit';
            
            export default function App() {
              return (
                <>
                  <MDBDropdown dropright group>
                    <MDBDropdownToggle>Dropright</MDBDropdownToggle>
                    <MDBDropdownMenu>
                      <MDBDropdownItem>
                        <MDBDropdownLink href="#">Action</MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <MDBDropdownLink href="#">Another action</MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <MDBDropdownLink href="#">Something else here</MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <hr className='dropdown-divider' />
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <MDBDropdownLink href="#">Separated link</MDBDropdownLink>
                      </MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
    
                  <MDBDropdown dropright group>
                    <MDBBtn>Split Dropright</MDBBtn>
                    <MDBDropdownToggle />
                    <MDBDropdownMenu>
                      <MDBDropdownItem>
                        <MDBDropdownLink href="#">Action</MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <MDBDropdownLink href="#">Another action</MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <MDBDropdownLink href="#">Something else here</MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <hr className='dropdown-divider' />
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <MDBDropdownLink href="#">Separated link</MDBDropdownLink>
                      </MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
                </>
              );
            }

Dropleft

Trigger dropdown menus at the left of the elements by adding .dropstart to the parent element. 

        
            
            import React from 'react';
            import {
              MDBDropdown,
              MDBDropdownMenu,
              MDBDropdownToggle,
              MDBDropdownItem,
              MDBDropdownLink,
              MDBBtn
            } from 'mdb-react-ui-kit';
            
            export default function App() {
              return (
                <>
                  <MDBDropdown dropleft group>
                    <MDBDropdownToggle>Dropleft</MDBDropdownToggle>
                    <MDBDropdownMenu>
                      <MDBDropdownItem>
                        <MDBDropdownLink href="#">Action</MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <MDBDropdownLink href="#">Another action</MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <MDBDropdownLink href="#">Something else here</MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <hr className='dropdown-divider' />
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <MDBDropdownLink href="#">Separated link</MDBDropdownLink>
                      </MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
    
                  <MDBDropdown dropleft group>
                    <MDBBtn>Split Dropleft</MDBBtn>
                    <MDBDropdownToggle />
                    <MDBDropdownMenu>
                      <MDBDropdownItem>
                        <MDBDropdownLink href="#">Action</MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <MDBDropdownLink href="#">Another action</MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <MDBDropdownLink href="#">Something else here</MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <hr className='dropdown-divider' />
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <MDBDropdownLink href="#">Separated link</MDBDropdownLink>
                      </MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
                </>
              );
            }

Menu items

Historically dropdown menu contents had to be links, but that’s no longer the case with v4. Now you can optionally use <button> elements in your dropdowns instead of just <a>s. 

        
            
          import React from 'react';
          import { MDBDropdown, MDBDropdownMenu, MDBDropdownToggle, MDBDropdownItem, MDBDropdownLink } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <>
                <MDBDropdown>
                  <MDBDropdownToggle>Dropdown</MDBDropdownToggle>
                  <MDBDropdownMenu>
                    <MDBDropdownItem>
                      <MDBDropdownLink tag='button' type='button'>
                        Action
                      </MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink tag='button' type='button'>
                        Another action
                      </MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink tag='button' type='button'>
                        Something else here
                      </MDBDropdownLink>
                    </MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
              </>
            );
          }

You can also create non-interactive dropdown items with .dropdown-item-text. Feel free to style further with custom CSS or text utilities. 

        
            
          import React from 'react';
          import { MDBDropdown, MDBDropdownMenu, MDBDropdownToggle, MDBDropdownItem, MDBDropdownLink } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <>
                <MDBDropdown>
                  <MDBDropdownMenu>
                    <MDBDropdownItem>
                      <span class="dropdown-item-text">Dropdown item text</span>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">
                        Another action
                      </MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">
                        Something else here
                      </MDBDropdownLink>
                    </MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
              </>
            );
          }

Active

Add .active to items in the dropdown to style them as active. To convey the active state to assistive technologies, use the aria-current attribute — using the page value for the current page, or true for the current item in a set. 

        
            
            import React from 'react';
            import { MDBDropdown, MDBDropdownMenu, MDBDropdownToggle, MDBDropdownItem, MDBDropdownLink } from 'mdb-react-ui-kit';
            
            export default function App() {
              return (
                <>
                  <MDBDropdown>
                    <MDBDropdownMenu>
                      <MDBDropdownItem>
                        <MDBDropdownLink className="active" aria-current='true'> 
                          Another action
                        </MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <MDBDropdownLink href="#">
                          Another action
                        </MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <MDBDropdownLink href="#">
                          Something else here
                        </MDBDropdownLink>
                      </MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
                </>
              );
            }

Disabled

Add .disabled to items in the dropdown to style them as disabled. 

        
            
            import React from 'react';
            import { MDBDropdown, MDBDropdownMenu, MDBDropdownToggle, MDBDropdownItem, MDBDropdownLink } from 'mdb-react-ui-kit';
            
            export default function App() {
              return (
                <>
                  <MDBDropdown>
                    <MDBDropdownMenu>
                      <MDBDropdownItem>
                        <MDBDropdownLink className="disabled" aria-disabled='true'> 
                          Another action
                        </MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <MDBDropdownLink href="#">
                          Another action
                        </MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <MDBDropdownLink href="#">
                          Something else here
                        </MDBDropdownLink>
                      </MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
                </>
              );
            }

Menu content

Headers

Add a header to label sections of actions in any dropdown menu.

        
            
            import React from 'react';
            import { MDBDropdown, MDBDropdownMenu, MDBDropdownHeader, MDBDropdownToggle, MDBDropdownItem, MDBDropdownLink } from 'mdb-react-ui-kit';
            
            export default function App() {
              return (
                <MDBDropdown>
                  <MDBDropdownMenu>
                    <MDBDropdownItem>
                      <MDBDropdownHeader> 
                        Dropdown header
                      </MDBDropdownHeader>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">
                        Another action
                      </MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">
                        Something else here
                      </MDBDropdownLink>
                    </MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
              );
            }

Dividers

Separate groups of related menu items with a divider.

        
            
            import React from 'react';
            import { MDBDropdown, MDBDropdownMenu, MDBDropdownHeader, MDBDropdownDivider, MDBDropdownToggle, MDBDropdownItem, MDBDropdownLink } from 'mdb-react-ui-kit';
            
            export default function App() {
              return (
                <MDBDropdown>
                  <MDBDropdownMenu>
                    <MDBDropdownItem>
                      <MDBDropdownHeader> 
                        Dropdown header
                      </MDBDropdownHeader>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">
                        Another action
                      </MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">
                        Something else here
                      </MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownDivider>
                        Something else here
                      </MDBDropdownDivider>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">
                        Separated link
                      </MDBDropdownLink>
                    </MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
              );
            }

Text

Place any freeform text within a dropdown menu with text and use spacing utilities. Note that you’ll likely need additional sizing styles to constrain the menu width.

Some example text that's free-flowing within the dropdown menu.

And this is more example text.

        
            
            import React from "react";
            import {
              MDBDropdown,
              MDBDropdownMenu,
            } from "mdb-react-ui-kit";

            export default function App() {
              return (
                <MDBDropdown>
                  <MDBDropdownMenu className="p-4 text-muted" style={{ maxWidth: "200px" }}>
                    <p>Some example text that's free-flowing within the dropdown menu.</p>
                    <p className="mb-0">And this is more example text.</p>
                  </MDBDropdownMenu>
                </MDBDropdown>
              );
            }

Remove animation

To remove the fade animation on click, add data-mdb-dropdown-animation="off" attribute to the dropdown button. 

        
            
          import React from 'react';
          import { MDBDropdown, MDBDropdownMenu, MDBDropdownToggle, MDBDropdownItem, MDBDropdownLink } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <MDBDropdown animation={false}>
                <MDBDropdownToggle>Dropdown button</MDBDropdownToggle>
                <MDBDropdownMenu>
                  <MDBDropdownItem>
                    <MDBDropdownLink href="#">Action</MDBDropdownLink>
                  </MDBDropdownItem>
                  <MDBDropdownItem>
                    <MDBDropdownLink href="#">Another action</MDBDropdownLink>
                  </MDBDropdownItem>
                  <MDBDropdownItem>
                    <MDBDropdownLink href="#">Something else here</MDBDropdownLink>
                  </MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
            );
          }

Dropdown options

Use options prop to change options in dropdown. 

        
            
          import React from 'react';
          import { MDBDropdown, MDBDropdownMenu, MDBDropdownToggle, MDBDropdownItem, MDBDropdownLink } 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>
                      <MDBDropdownLink href="#">Action</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Another action</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Something else here</MDBDropdownLink>
                    </MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
              </>
            );
          }

Dark variant

Add .dropdown-menu-dark onto an existing .dropdown-menu to match a dark navbar. 

        
            
          import React from 'react';
          import { MDBDropdown, MDBDropdownMenu, MDBDropdownToggle, MDBDropdownItem, MDBDropdownLink } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <MDBDropdown>
                <MDBDropdownToggle color='secondary'>Dropdown button</MDBDropdownToggle>
                <MDBDropdownMenu dark>
                  <MDBDropdownItem>
                    <MDBDropdownLink href="#">Action</MDBDropdownLink>
                  </MDBDropdownItem>
                  <MDBDropdownItem>
                    <MDBDropdownLink href="#">Another action</MDBDropdownLink>
                  </MDBDropdownItem>
                  <MDBDropdownItem>
                    <MDBDropdownLink href="#">Something else here</MDBDropdownLink>
                  </MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
            );
          }

Dropdowns - API

Import

        
            
        import { 
          MDBDropdown,
          MDBDropdownLink,
          MDBDropdownMenu,
          MDBDropdownToggle,
          MDBDropdownItem,
          MDBDropdownHeader,
          MDBDropdownDivider
        } from 'mdb-react-ui-kit';

Properties

MDBDropdown

Name Type Default Description Example
className String '' Add custom class to MDBDropdown <MDBDropdown className="class" />
tag String 'span' Defines tag of the MDBDropdown element <MDBDropdown tag="section" />
group Boolean false Set class group to MDBDropdown element <MDBDropdown group />
isOpen Boolean false Set open dropdown on mounted in MDBDropdown element <MDBDropdown isOpen />
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 />
dropleft Boolean false Set placement with this prop to MDBDropdown element <MDBDropdown dropleft />
options Object {} Set default options to MDBDropdown element <MDBDropdown options={{...}} />
animation Boolean true Turn off/on animation to MDBDropdown element <MDBDropdown animation />

MDBDropdowMenu

Name Type Default Description Example
className String '' Add custom class to MDBDropdowMenu <MDBDropdowMenu className="class" />
tag String 'span' Defines tag of the MDBDropdownMenu element <MDBDropdownMenu tag="section" />
wrapperStyle Object {} Set defualt style option to wrapper in MDBDropdownMenu element <MDBDropdownMenu wrapperStyle={{...}} />
dark boolean {} Set dark mode theme to MDBDropdownMenu element <MDBDropdownMenu dark />

MDBDropdownToggle

Name Type Default Description Example
className String '' Add custom class to MDBDropdownToggle <MDBDropdownToggle className="class" />
tag String 'span' Defines tag of the MDBDropdownToggle element <MDBDropdownToggle tag="section" />
split Boolean false Set split to MDBDropdownToggle element if you add more buttons to split <MDBDropdownToggle tag="section" />

MDBDropdownItem

Name Type Default Description Example
className String '' Add custom class to MDBDropdownItem <MDBDropdownItem className="class" />
tag String 'li' Defines tag of the MDBDropdownItem element <MDBDropdownItem tag="section" />

MDBDropdownHeader

Name Type Default Description Example
className String '' Add custom class to MDBDropdownHeader <MDBDropdownHeader className="class" />
tag String 'h6' Defines tag of the MDBDropdownHeader element <MDBDropdownHeader tag="section" />

MDBDropdownDivider

Name Type Default Description Example
className String '' Add custom class to MDBDropdownDivider <MDBDropdownDivider className="class" />
tag String 'div' Defines tag of the MDBDropdownDivider element <MDBDropdownDivider tag="section" />