JSPM – @mdbootstrap/react-dropdown-button@1.0.0

Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@mdbootstrap/react-dropdown-button) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

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

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

@mdbootstrap/react-dropdown-button

Package Exports

Readme

Basic examples

Dropdown button

Dropdown Link

How to use?

More extended Bootstrap documentation