Responsive React Dropdown Button built with Bootstrap 5. Dropdown can be created with the use of a button or link elements.

Check out React Bootstrap Dropdown Button Documentation for detailed instructions & even more examples.

Basic examples

Make sure to check out the main React Dropdowns documentation for more customization examples of dropdown buttons.

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

Dropdown Link

And with <a> elements:

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

export default function Link() {
  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>
  );
}

How to use?

1. Download MDB React - free UI KIT

2. Choose your favourite customized component and click on the image

3. Copy & paste the code into your MDB project

▶️ Subscribe to YouTube channel for web development tutorials & resources

More extended Bootstrap documentation