❤
npm
Sign UpSign In

@mdbootstrap/react-dropdown-button

1.0.0 • Public • Published

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

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
1.0.05latest

Version History

VersionDownloads (Last 7 Days)Published
1.0.05

Package Sidebar

Install

npm i @mdbootstrap/react-dropdown-button

Repository

github.com/mdbootstrap/react-dropdown-button

Homepage

mdbootstrap.com/docs/react/extended/dropdown-button

Weekly Downloads

5

Version

1.0.0

License

MIT

Unpacked Size

293 kB

Total Files

15

Last publish

Collaborators

  • mdbootstrap
Try on RunKit
Report malware