Skip to content

Commit 06a3b1b

Browse files
MAKUSrefMAKUSref
committed
Update
1 parent 5af0d12 commit 06a3b1b

File tree

2 files changed

+154
-6
lines changed

2 files changed

+154
-6
lines changed

Diff for: ‎README.md

+136-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,136 @@
1-
# react-dropdown-button
1+
Responsive React Dropdown Button built with Bootstrap 5. Dropdown can be created with the use of a button or link elements.
2+
3+
Check out [React Bootstrap Dropdown Button Documentation](https://mdbootstrap.com/docs/react/extended/dropdown-button/) for detailed instructions & even more examples.
4+
5+
## Basic examples
6+
7+
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.
8+
9+
### Dropdown button
10+
11+
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:
12+
13+
```jsx
14+
import React from 'react';
15+
import { MDBDropdown, MDBDropdownMenu, MDBDropdownToggle, MDBDropdownItem } from 'mdb-react-ui-kit';
16+
17+
export default function App() {
18+
return (
19+
<MDBDropdown>
20+
<MDBDropdownToggle>Dropdown button</MDBDropdownToggle>
21+
<MDBDropdownMenu>
22+
<MDBDropdownItem link>Action</MDBDropdownItem>
23+
<MDBDropdownItem link>Another action</MDBDropdownItem>
24+
<MDBDropdownItem link>Something else here</MDBDropdownItem>
25+
</MDBDropdownMenu>
26+
</MDBDropdown>
27+
);
28+
}
29+
```
30+
31+
### Dropdown Link
32+
33+
And with `<a>` elements:
34+
35+
```jsx
36+
import React from 'react';
37+
import { MDBDropdown, MDBDropdownMenu, MDBDropdownToggle, MDBDropdownItem } from 'mdb-react-ui-kit';
38+
39+
export default function Link() {
40+
return (
41+
<MDBDropdown>
42+
<MDBDropdownToggle tag='a' className='btn btn-primary'>
43+
Dropdown link
44+
</MDBDropdownToggle>
45+
<MDBDropdownMenu>
46+
<MDBDropdownItem link>Action</MDBDropdownItem>
47+
<MDBDropdownItem link>Another action</MDBDropdownItem>
48+
<MDBDropdownItem link>Something else here</MDBDropdownItem>
49+
</MDBDropdownMenu>
50+
</MDBDropdown>
51+
);
52+
}
53+
```
54+
55+
56+
## How to use?
57+
58+
1. Download MDB React - free UI KIT
59+
60+
2. Choose your favourite customized component and click on the image
61+
62+
3. Copy & paste the code into your MDB project
63+
64+
[▶️ Subscribe to YouTube channel for web development tutorials & resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)
65+
66+
___
67+
68+
## More extended Bootstrap documentation
69+
<ul>
70+
<li><a href="https://mdbootstrap.com/docs/react/extended/code/">React Bootstrap Code</a></li>
71+
<li><a href="https://mdbootstrap.com/docs/react/extended/gallery/">React Bootstrap Gallery</a></li>
72+
<li><a href="https://mdbootstrap.com/docs/react/extended/hamburger-menu/">React Bootstrap Hamburger Menu</a></li>
73+
<li><a href="https://mdbootstrap.com/docs/react/extended/jumbotron/">React Bootstrap Jumbotron</a></li>
74+
<li><a href="https://mdbootstrap.com/docs/react/extended/maps/">React Bootstrap Maps</a></li>
75+
<li><a href="https://mdbootstrap.com/docs/react/extended/mega-menu//">React Bootstrap Mega Menu</a></li>
76+
<li><a href="https://mdbootstrap.com/docs/react/extended/media-object/">React Bootstrap Media object</a></li>
77+
<li><a href="https://mdbootstrap.com/docs/react/extended/multiselect/">React Bootstrap Multiselect</a></li>
78+
<li><a href="https://mdbootstrap.com/docs/react/extended/masonry/">React Bootstrap Masonry</a></li>
79+
<li><a href="https://mdbootstrap.com/docs/react/extended/contact/">React Bootstrap Contact form</a></li>
80+
<li><a href="https://mdbootstrap.com/docs/react/extended/gradients/">React Bootstrap Gradients</a></li>
81+
<li><a href="https://mdbootstrap.com/docs/react/extended/pagination/">React Bootstrap Pagination</a></li>
82+
<li><a href="https://mdbootstrap.com/docs/react/extended/panels/">React Bootstrap Panels</a></li>
83+
<li><a href="https://mdbootstrap.com/docs/react/extended/social-media/">React Bootstrap Social Media icons & buttons</a></li>
84+
<li><a href="https://mdbootstrap.com/docs/react/extended/search/">React Bootstrap Search</a></li>
85+
<li><a href="https://mdbootstrap.com/docs/react/extended/table-sort/">React Bootstrap Table sort</a></li>
86+
<li><a href="https://mdbootstrap.com/docs/react/extended/table-responsive/">React Bootstrap Table responsive</a></li>
87+
<li><a href="https://mdbootstrap.com/docs/react/extended/table-scroll/">React Bootstrap Table scroll</a></li>
88+
<li><a href="https://mdbootstrap.com/docs/react/extended/table-search/">React Bootstrap Table search</a></li>
89+
<li><a href="https://mdbootstrap.com/docs/react/extended/textarea/">React Bootstrap Textarea</a></li>
90+
<li><a href="https://mdbootstrap.com/docs/react/extended/sidebar/">React Bootstrap Sidebar</a></li>
91+
<li><a href="https://mdbootstrap.com/docs/react/extended/profiles/">React Bootstrap Profiles</a></li>
92+
<li><a href="https://mdbootstrap.com/docs/react/extended/dropdown-multilevel/">React Bootstrap Nested Dropdown</a></li>
93+
<li><a href="https://mdbootstrap.com/docs/react/extended/bootstrap-address-form/">React Bootstrap Address Form</a></li>
94+
<li><a href="https://mdbootstrap.com/docs/react/extended/back-to-top">React Scroll Back to Top button</a></li>
95+
<li><a href="https://mdbootstrap.com/docs/react/extended/product-cards">React Product Cards</a></li>
96+
<li><a href="https://mdbootstrap.com/docs/react/extended/avatar">React Avatar</a></li>
97+
<li><a href="https://mdbootstrap.com/docs/react/extended/carousel-with-thumbnails">React Carousel Slider with Thumbnails</a></li>
98+
<li><a href="https://mdbootstrap.com/docs/react/extended/chat">React Chat</a></li>
99+
<li><a href="https://mdbootstrap.com/docs/react/extended/comparison-table">React Comparison table</a></li>
100+
<li><a href="https://mdbootstrap.com/docs/react/extended/comments">React Comments</a></li>
101+
<li><a href="https://mdbootstrap.com/docs/react/extended/drawer">React Drawer</a></li>
102+
<li><a href="https://mdbootstrap.com/docs/react/extended/faq">React FAQ component / section</a></li>
103+
<li><a href="https://mdbootstrap.com/docs/react/extended/invoice">React Invoice</a></li>
104+
<li><a href="https://mdbootstrap.com/docs/react/extended/news-feed">React News feed</a></li>
105+
<li><a href="https://mdbootstrap.com/docs/react/extended/offcanvas">React Offcanvas</a></li>
106+
<li><a href="https://mdbootstrap.com/docs/react/extended/order-details">React Order details</a></li>
107+
<li><a href="https://mdbootstrap.com/docs/react/extended/page-transitions">React Page transitions</a></li>
108+
<li><a href="https://mdbootstrap.com/docs/react/extended/quotes">React Quotes</a></li>
109+
<li><a href="https://mdbootstrap.com/docs/react/extended/payment-forms">React Payment forms</a></li>
110+
<li><a href="https://mdbootstrap.com/docs/react/extended/select-with-custom-input">React Select with custom Input</a></li>
111+
<li><a href="https://mdbootstrap.com/docs/react/extended/square-buttons">React Square Buttons</a></li>
112+
<li><a href="https://mdbootstrap.com/docs/react/extended/testimonial-slider">React Testimonial Slider</a></li>
113+
<li><a href="https://mdbootstrap.com/docs/react/extended/testimonials">React Testimonials / Reviews</a></li>
114+
<li><a href="https://mdbootstrap.com/docs/react/extended/bootstrap-survey-form">React Survey form</a></li>
115+
<li><a href="https://mdbootstrap.com/docs/react/extended/timeline">React Timeline</a></li>
116+
<li><a href="https://mdbootstrap.com/docs/react/extended/to-do-list">React To Do List</a></li>
117+
<li><a href="https://mdbootstrap.com/docs/react/extended/padding">React Padding</a></li>
118+
<li><a href="https://mdbootstrap.com/docs/react/extended/modal-size">React Modal Size</a></li>
119+
<li><a href="https://mdbootstrap.com/docs/react/extended/modal-backdrop">React Modal Backdrop</a></li>
120+
<li><a href="https://mdbootstrap.com/docs/react/extended/css-text-animations">React CSS Text Animations</a></li>
121+
<li><a href="https://mdbootstrap.com/docs/react/extended/video">React Video</a></li>
122+
<li><a href="https://mdbootstrap.com/docs/react/extended/modal-methods">React Modal Show, Close, Hide & Toggle</a></li>
123+
<li><a href="https://mdbootstrap.com/docs/react/extended/card-deck">React Card deck</a></li>
124+
<li><a href="https://mdbootstrap.com/docs/react/extended/table-filter">React Table filter</a></li>
125+
<li><a href="https://mdbootstrap.com/docs/react/extended/slider">React Slider</a></li>
126+
<li><a href="https://mdbootstrap.com/docs/react/extended/logo">React Logo</a></li>
127+
<li><a href="https://mdbootstrap.com/docs/react/extended/popup">React Popup</a></li>
128+
<li><a href="https://mdbootstrap.com/docs/react/extended/weather">React Weather</a></li>
129+
<li><a href="https://mdbootstrap.com/docs/react/extended/hero">React Hero</a></li>
130+
<li><a href="https://mdbootstrap.com/docs/react/extended/max-width">React Max Width</a></li>
131+
<li><a href="https://mdbootstrap.com/docs/react/extended/select-dropdown">React Select dropdown</a></li>
132+
<li><a href="https://mdbootstrap.com/docs/react/extended/labels">React Labels</a></li>
133+
<li><a href="https://mdbootstrap.com/docs/react/extended/dialog">React Dialog</a></li>
134+
<li><a href="https://mdbootstrap.com/docs/react/extended/screen-sizes">React Screen Sizes</a></li>
135+
<li><a href="https://mdbootstrap.com/docs/react/extended/dropdown-button">React Dropdown Button</a></li>
136+
</ul>

Diff for: ‎package.json

+18-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
11
{
2-
"name": "mdb-react-template",
3-
"version": "4.0.0",
4-
"description": "template for mdb-react-ui-kit",
5-
"private": true,
2+
"name": "@mdbootstrap/react-dropdown-button",
3+
"version": "1.0.0",
4+
"description": "Responsive React Dropdown Button built with Bootstrap 5. Dropdown can be created with the use of a button or link elements.",
5+
"private": false,
6+
"homepage": "https://mdbootstrap.com/docs/react/extended/dropdown-button",
7+
"repository": {
8+
"type": "git",
9+
"url": "git+https://github.com/mdbootstrap/react-dropdown-button.git"
10+
},
611
"dependencies": {
712
"mdb-react-ui-kit": "^4.0.0",
813
"react": "^18.1.0",
@@ -19,7 +24,15 @@
1924
},
2025
"keywords": [
2126
"template",
22-
"react"
27+
"react",
28+
"bootstrap",
29+
"bootstrap5",
30+
"bootstrap-template",
31+
"bootstrap-theme",
32+
"css",
33+
"html",
34+
"jsx",
35+
"js"
2336
],
2437
"author": "MDBootstrap",
2538
"license": "MIT",

0 commit comments

Comments
 (0)