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?

Download MDB React - free UI KIT
Choose your favourite customized component and click on the image
Copy & paste the code into your MDB project

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

More extended Bootstrap documentation

React Bootstrap Code
React Bootstrap Gallery
React Bootstrap Hamburger Menu
React Bootstrap Jumbotron
React Bootstrap Maps
React Bootstrap Mega Menu
React Bootstrap Media object
React Bootstrap Multiselect
React Bootstrap Masonry
React Bootstrap Contact form
React Bootstrap Gradients
React Bootstrap Pagination
React Bootstrap Panels
React Bootstrap Social Media icons & buttons
React Bootstrap Search
React Bootstrap Table sort
React Bootstrap Table responsive
React Bootstrap Table scroll
React Bootstrap Table search
React Bootstrap Textarea
React Bootstrap Sidebar
React Bootstrap Profiles
React Bootstrap Nested Dropdown
React Bootstrap Address Form
React Scroll Back to Top button
React Product Cards
React Avatar
React Carousel Slider with Thumbnails
React Chat
React Comparison table
React Comments
React Drawer
React FAQ component / section
React Invoice
React News feed
React Offcanvas
React Order details
React Page transitions
React Quotes
React Payment forms
React Select with custom Input
React Square Buttons
React Testimonial Slider
React Testimonials / Reviews
React Survey form
React Timeline
React To Do List
React Padding
React Modal Size
React Modal Backdrop
React CSS Text Animations
React Video
React Modal Show, Close, Hide & Toggle
React Card deck
React Table filter
React Slider
React Logo
React Popup
React Weather
React Hero
React Max Width
React Select dropdown
React Labels
React Dialog
React Screen Sizes
React Dropdown Button