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.

Regular button

Any single tag 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 } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <MDBDropdown>
                <MDBDropdownToggle>Dropdown button</MDBDropdownToggle>
                <MDBDropdownMenu>
                  <MDBDropdownItem link>Action</MDBDropdownItem>
                  <MDBDropdownItem link>Another action</MDBDropdownItem>
                  <MDBDropdownItem link>Something else here</MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
            );
          }

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>
              </>
            );
          }

Split button

Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of split attribute 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, MDBBtn } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <MDBDropdown className='btn-group'>
                <MDBBtn>Action</MDBBtn>
                <MDBDropdownToggle split></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>
              </>
            );
          }

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

        
            
          import React from 'react';
          import { MDBDropdown, MDBDropdownMenu, MDBDropdownToggle, MDBDropdownItem } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <MDBDropdown>
                <MDBDropdownToggle>Dropdown</MDBDropdownToggle>
                <MDBDropdownMenu>
                  <MDBDropdownItem link childTag='button'>
                    Action
                  </MDBDropdownItem>
                  <MDBDropdownItem link childTag='button'>
                    Another action
                  </MDBDropdownItem>
                  <MDBDropdownItem link childTag='button'>
                    Something else here
                  </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, MDBDropdownItem } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <MDBDropdown>
                <MDBDropdownMenu alwaysOpen>
                  <MDBDropdownItem link childTag='span' className='dropdown-item-text'>
                    Dropdown item text
                  </MDBDropdownItem>
                  <MDBDropdownItem link>Action</MDBDropdownItem>
                  <MDBDropdownItem link>Another action</MDBDropdownItem>
                  <MDBDropdownItem link>Something else here</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, MDBDropdownItem } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <MDBDropdown>
                <MDBDropdownMenu alwaysOpen>
                  <MDBDropdownItem link>Regular link</MDBDropdownItem>
                  <MDBDropdownItem link aria-current={true} className='active'>
                    Active link
                  </MDBDropdownItem>
                  <MDBDropdownItem link>Another link</MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
            );
          }

Disabled

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

        
            
          import React from 'react';
          import { MDBDropdown, MDBDropdownMenu, MDBDropdownItem } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <MDBDropdown>
                <MDBDropdownMenu alwaysOpen>
                  <MDBDropdownItem link>Regular link</MDBDropdownItem>
                  <MDBDropdownItem link disabled aria-disabled={true}>
                    Disabled link
                  </MDBDropdownItem>
                  <MDBDropdownItem link>Another link</MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
            );
          }

Menu alignment

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add responsive="end" to MDBDropdownMenu to right align the dropdown menu. 

        
            
          import React from 'react';
          import { MDBDropdown, MDBDropdownMenu, MDBDropdownToggle, MDBDropdownItem } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <MDBDropdown>
                <MDBDropdownMenu responsive='end'>
                  <MDBDropdownToggle>Right-aligned menu</MDBDropdownToggle>
                  <MDBDropdownItem link childTag='button'>
                    Action
                  </MDBDropdownItem>
                  <MDBDropdownItem link childTag='button'>
                    Another action
                  </MDBDropdownItem>
                  <MDBDropdownItem link childTag='button'>
                    Something else here
                  </MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
            );
          }

Responsive alignment

To align right the dropdown menu with the given breakpoint or larger, add responsive="{sm|md|lg|xl|xxl}-end" property to MDBDropdownMenu. 

        
            
            import React from 'react';
            import { MDBDropdown, MDBDropdownMenu, MDBDropdownToggle, MDBDropdownItem } from 'mdb-react-ui-kit';
            
            export default function App() {
              return (
                <MDBDropdown>
                  <MDBDropdownMenu responsive='lg-end'>
                    <MDBDropdownToggle>Left-aligned but right aligned when large screen</MDBDropdownToggle>
                    <MDBDropdownItem link childTag='button'>
                      Action
                    </MDBDropdownItem>
                    <MDBDropdownItem link childTag='button'>
                      Another action
                    </MDBDropdownItem>
                    <MDBDropdownItem link childTag='button'>
                      Something else here
                    </MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
              );
            }

To align left the dropdown menu with the given breakpoint or larger, add responsive="{sm|md|lg|xl|xxl}-start" property to MDBDropdownMenu.

Note that responsive by default accepts only one breakpoint. If you want your dropdown to handle multiple breakpoints you will have to add additional classes e.g. .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start 

        
            
            import React from 'react';
            import { MDBDropdown, MDBDropdownMenu, MDBDropdownToggle, MDBDropdownItem } from 'mdb-react-ui-kit';
            
            export default function App() {
              return (
                <MDBDropdown>
                  <MDBDropdownMenu className='dropdown-menu-end' responsive='lg-start'>
                    <MDBDropdownToggle>Right-aligned but left aligned when large screen</MDBDropdownToggle>
                    <MDBDropdownItem link childTag='button'>
                      Action
                    </MDBDropdownItem>
                    <MDBDropdownItem link childTag='button'>
                      Another action
                    </MDBDropdownItem>
                    <MDBDropdownItem link childTag='button'>
                      Something else here
                    </MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
              );
            }

Alignment options

Taking most of the options shown above, here’s a small kitchen sink demo of various dropdown alignment options in one place. 

        
            
            import React from 'react';
            import { MDBDropdown, MDBDropdownItem, MDBDropdownMenu, MDBDropdownToggle } from 'mdb-react-ui-kit';
            
            export default function App() {
              return (
                <>
                  <MDBDropdown>
                    <MDBDropdownToggle>Dropdown</MDBDropdownToggle>
                    <MDBDropdownMenu>
                      <MDBDropdownItem link>Menu item</MDBDropdownItem>
                      <MDBDropdownItem link>Menu item</MDBDropdownItem>
                      <MDBDropdownItem link>Menu item</MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
            
                  <MDBDropdown>
                    <MDBDropdownToggle>Right-aligned menu</MDBDropdownToggle>
                    <MDBDropdownMenu responsive='end'>
                      <MDBDropdownItem link>Menu item</MDBDropdownItem>
                      <MDBDropdownItem link>Menu item</MDBDropdownItem>
                      <MDBDropdownItem link>Menu item</MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
            
                  <MDBDropdown>
                    <MDBDropdownToggle>Left-aligned, right-aligned lg</MDBDropdownToggle>
                    <MDBDropdownMenu responsive='lg-end'>
                      <MDBDropdownItem link>Menu item</MDBDropdownItem>
                      <MDBDropdownItem link>Menu item</MDBDropdownItem>
                      <MDBDropdownItem link>Menu item</MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
            
                  <MDBDropdown>
                    <MDBDropdownToggle>Right-aligned, left-aligned lg</MDBDropdownToggle>
                    <MDBDropdownMenu className='dropdown-menu-end' responsive='lg-start'>
                      <MDBDropdownItem link>Menu item</MDBDropdownItem>
                      <MDBDropdownItem link>Menu item</MDBDropdownItem>
                      <MDBDropdownItem link>Menu item</MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
            
                  <MDBDropdown dropleft>
                    <MDBDropdownToggle>Dropstart</MDBDropdownToggle>
                    <MDBDropdownMenu>
                      <MDBDropdownItem link>Menu item</MDBDropdownItem>
                      <MDBDropdownItem link>Menu item</MDBDropdownItem>
                      <MDBDropdownItem link>Menu item</MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
            
                  <MDBDropdown dropright>
                    <MDBDropdownToggle>Dropend</MDBDropdownToggle>
                    <MDBDropdownMenu>
                      <MDBDropdownItem link>Menu item</MDBDropdownItem>
                      <MDBDropdownItem link>Menu item</MDBDropdownItem>
                      <MDBDropdownItem link>Menu item</MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
            
                  <MDBDropdown dropup>
                    <MDBDropdownToggle>Dropup</MDBDropdownToggle>
                    <MDBDropdownMenu>
                      <MDBDropdownItem link>Menu item</MDBDropdownItem>
                      <MDBDropdownItem link>Menu item</MDBDropdownItem>
                      <MDBDropdownItem link>Menu item</MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
                </>
              );
            }

Menu content

Headers

Add a header attribute to MDBDropdownItem to style it as a header.

        
            
          import React from 'react';
          import { MDBDropdown, MDBDropdownMenu, MDBDropdownItem } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <MDBDropdown>
                <MDBDropdownMenu alwaysOpen>
                  <MDBDropdownItem header>Dropdown header</MDBDropdownItem>
                  <MDBDropdownItem link>Another action</MDBDropdownItem>
                  <MDBDropdownItem link>Something else here</MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
            );
          }

Dividers

Separate groups of related menu items with a divider.

        
            
          import React from 'react';
          import { MDBDropdown, MDBDropdownMenu, MDBDropdownItem } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <MDBDropdown>
                <MDBDropdownMenu alwaysOpen>
                  <MDBDropdownItem link>Action</MDBDropdownItem>
                  <MDBDropdownItem link>Another action</MDBDropdownItem>
                  <MDBDropdownItem link>Something else here</MDBDropdownItem>
                  <MDBDropdownItem divider />
                  <MDBDropdownItem link>Separated link</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' }} alwaysOpen>
                    <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>
              );
            }

Forms

Put a form within a dropdown menu, and use margin or padding utilities to give it the negative space you require.

Forgot password?
New around here? Sign up Forgot password? 
        
            
              import React from 'react';
              import {
                MDBCol,
                MDBDropdown,
                MDBDropdownMenu,
                MDBDropdownToggle,
                MDBDropdownItem,
                MDBBtn,
                MDBInput,
                MDBCheckbox,
                MDBRow,
              } from 'mdb-react-ui-kit';

              export default function Template(): JSX.Element {
                return (
                  <MDBDropdown>
                    <MDBDropdownToggle>Dropdown button</MDBDropdownToggle>
                    <MDBDropdownMenu style={{ width: '320px' }}>
                      <form className='px-4 py-3'>
                        <MDBInput label='Email adress' type='email' className='mb-4' />
                        <MDBInput label='Password' type='password' className='mb-4' />
                        <MDBRow className='mb-4'>
                          <MDBCol className='d-flex justify-content-center'>
                            <MDBCheckbox className='d-flex justify-content-center' label='Remember me' />
                          </MDBCol>
                          <MDBCol>
                            <a href='#!'>Forgot password?</a>
                          </MDBCol>
                        </MDBRow>
                        <MDBBtn color='primary' className='btn-block'>
                          Sign in
                        </MDBBtn>
                      </form>
                      <div className='dropdown-divider'></div>
                      <MDBDropdownItem link>New around here? Sign up</MDBDropdownItem>
                      <MDBDropdownItem link>Forgot password?</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 />
open Boolean false Set open dropdown on mounted in MDBDropdown element <MDBDropdown open />
options Object Set default options to MDBDropdown element <MDBDropdown options={{...}} />
tag String 'div' Defines tag of the MDBDropdown element <MDBDropdown tag="section" />
wrapper boolean true Defines whether the dropdown should create a .dropdown wrapper div or not. <MDBDropdown wrapper={false} />

MDBDropdowMenu

Name Type Default Description Example
alwaysOpen Boolean false Sets MDBDropdowMenu to be always open. <MDBDropdowMenu alwaysOpen />
appendToBody Boolean false If set to true MDBDropdowMenu is appended to body <MDBDropdowMenu appendToBody />
dark Boolean false Set dark mode theme to MDBDropdownMenu element <MDBDropdownMenu dark />
responsive String '' Defines the responsive alignment of the MDBDropdownMenu component. <MDBDropdownMenu responsive="lg-start" />
tag String 'ul' Defines tag of the MDBDropdownMenu element <MDBDropdownMenu 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
onClose () => any Fires when the dropdown demands to be closed.
onOpen () => any Fires when the dropdown demands to be opened.

CSS variables

As part of MDB’s evolving CSS variables approach, dropdown now uses local CSS variables on .dropdown-menu, .dropdown-item and .dropdown-divider for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. 

        
            
          // .dropdown-menu
          --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
          --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
          --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
          --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
          --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
          --#{$prefix}dropdown-color: #{$dropdown-color};
          --#{$prefix}dropdown-bg: #{$dropdown-bg};
          --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
          --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
          --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
          --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
          --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
          --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
          --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
          --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
          --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
          --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
          --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
          --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
          --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
          --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
          --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
          --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
          --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
          --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};
          --#{$prefix}dropdown-item-border-radius: #{$dropdown-item-border-radius};
          --#{$prefix}dropdown-menu-animated-animation-duration: #{$dropdown-menu-animated-animation-duration};
          --#{$prefix}dropdown-menu-animated-animation-timing-function: #{$dropdown-menu-animated-animation-timing-function};

          // .dropdown-item
          --#{$prefix}dropdown-state-color: #{$dropdown-state-color};
          --#{$prefix}dropdown-state-background-color: #{$dropdown-state-background-color};

          // .dropdown-divider
          --#{$prefix}dropdown-divider-border-top-width: #{$dropdown-divider-border-top-width};
          --#{$prefix}dropdown-divider-border-top-bg: #{$dropdown-divider-bg};

          // .dropdown-menu-dark
          --#{$prefix}dropdown-color: #{$dropdown-dark-color};
          --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
          --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
          --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
          --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
          --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
          --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
          --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
          --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
          --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
          --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
          --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};

SCSS variables

        
            
            $zindex-dropdown: 1000;
            $dropdown-color: $body-color;
            $dropdown-padding-x: 0;
            $dropdown-padding-y: 0.5rem;
            $dropdown-margin-top: 0.125rem;
            $dropdown-box-shadow: $box-shadow-4;
            $dropdown-font-size: 0.875rem;
            $dropdown-item-border-radius: 0.5rem;
            $dropdown-item-padding-y: 0.5rem;
            $dropdown-item-padding-x: 1rem;
            $dropdown-border-radius: 0.5rem;
            $dropdown-divider-bg: hsl(0, 0%, 96%);
            $dropdown-divider-border-top-width: 2px;
            $dropdown-divider-margin-y: $spacer * 0.5;
            $dropdown-state-color: #16181b;
            $dropdown-state-background-color: #eee;
            $dropdown-menu-animated-animation-duration: 0.55s;
            $dropdown-menu-animated-animation-timing-function: ease;
            $dropdown-animation-duration: 1s;
            $dropdown-min-width: 10rem;
            $dropdown-spacer: 0.125rem;
            $dropdown-color: $body-color;
            $dropdown-bg: $white;
            $dropdown-border-color: var(--#{$prefix}border-color-translucent);
            $dropdown-border-width: $border-width;
            $dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width);
            $dropdown-link-color: $gray-900;
            $dropdown-link-hover-color: shade-color($dropdown-link-color, 10%);
            $dropdown-link-hover-bg: $gray-200;
            $dropdown-link-active-color: $component-active-color;
            $dropdown-link-active-bg: $component-active-bg;
            $dropdown-link-disabled-color: $gray-500;
            $dropdown-header-color: $gray-600;
            $dropdown-header-padding-x: $dropdown-item-padding-x;
            $dropdown-header-padding-y: $dropdown-padding-y;
            $dropdown-header-padding: $dropdown-header-padding-y $dropdown-header-padding-x;
            
            // dark
            $dropdown-dark-color: $gray-300;
            $dropdown-dark-bg: $gray-800;
            $dropdown-dark-border-color: $dropdown-border-color;
            $dropdown-dark-divider-bg: $dropdown-divider-bg;
            $dropdown-dark-box-shadow: null;
            $dropdown-dark-link-color: $dropdown-dark-color;
            $dropdown-dark-link-hover-color: $white;
            $dropdown-dark-link-hover-bg: rgba($white, 0.15);
            $dropdown-dark-link-active-color: $dropdown-link-active-color;
            $dropdown-dark-link-active-bg: $dropdown-link-active-bg;
            $dropdown-dark-link-disabled-color: $gray-500;
            $dropdown-dark-header-color: $gray-500;