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:

Show code

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

Link button

And with <a> elements:

Show code

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

export default function App() {
  return (
    <MDBDropdown>
      <MDBDropdownToggle tag='a' className='btn btn-primary'>
        Dropdown link
      </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:

Show code

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.

Show code

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.

Show code

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.

Show code

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.

Show code

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.

Show code

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.

Show code

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.

Show code

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.

Show code

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.

Show code

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.

Show code

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.

Show code

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

Show code

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.

Show code

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.

Show code

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.

Show code

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.

Show code

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.

Show code

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.

Show code

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.

Show code

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.

Show code

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

Show code

javascript

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.

Show code

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

Show code

SCSS

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

Dropdowns

React Bootstrap 5 Dropdowns component

Basic examples

Regular button

Link button

Colors

Split button

Sizing

Directions

Dropup

Dropright

Dropleft

Menu items

Active

Disabled

Menu alignment

Responsive alignment

Alignment options

Menu content

Headers

Dropdown header

Dividers

Text

Forms

Remove animation

Dropdown options

Dark variant

Related resources

Dropdowns - API

Import

Properties

MDBDropdown

MDBDropdowMenu

MDBDropdownToggle

MDBDropdownItem

Events

MDBDropdown

CSS variables

SCSS variables