Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mdbootstrap/react-dropdown-button

Responsive React Dropdown Button built with Bootstrap 5. Dropdown can be created with the use of a button or link elements.
https://github.com/mdbootstrap/react-dropdown-button

bootstrap bootstrap-template bootstrap-theme bootstrap5 css html jsx react react-bootstrap react-dropdown reactjs

Last synced: 6 days ago
JSON representation

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

Awesome Lists containing this project

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](https://mdbootstrap.com/docs/react/extended/dropdown-button/) for detailed instructions & even more examples.



## Basic examples



Make sure to check out the main [React Dropdowns documentation](https://mdbootstrap.com/docs/react/extended/dropdown-button/) 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 `` elements:



```jsx

import React from 'react';

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



export default function App() {

  return (

    

      Dropdown button

      

        Action

        Another action

        Something else here

      

    

  );

}

```



### Dropdown Link



And with `` elements:



```jsx

import React from 'react';

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



export default function Link() {

  return (

    

      

        Dropdown link

      

      

        Action

        Another action

        Something else here

      

    

  );

}

```



## 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](https://www.youtube.com/MDBootstrap?sub_confirmation=1)



___



## More extended Bootstrap documentation