import React, { useState } from 'react'; import { Button, ButtonGroup, Card, Col, Container, Dropdown, Form, Nav, Row, Tab, } from 'react-bootstrap'; import SimpleBar from 'simplebar-react'; // Import Content import UiContent from '../../../Components/Common/UiContent'; //import Components import BreadCrumb from '../../../Components/Common/BreadCrumb'; import PreviewCardHeader from '../../../Components/Common/PreviewCardHeader'; // Import Images import avatar2 from "../../../../images/users/avatar-2.jpg"; import avatar3 from "../../../../images/users/avatar-3.jpg"; import avatar6 from "../../../../images/users/avatar-6.jpg"; import avatar8 from "../../../../images/users/avatar-8.jpg"; import bell from "../../../../images/svg/bell.svg"; import { SingleButtonDropdownExample, ColorDropdownExample, SplitButtonDropdownExample, SizingDropdownExample, DarkDropdownExample, AlignDropdownExample, OptionDropdownExample, AutoCloseDropdownExample, MenuItemDropdownExample, MenuContentDropdownExample, NotificationDropdownExample } from './UiDropdownsCode'; import { Head, Link } from '@inertiajs/react'; import Layout from '../../../Layouts'; const UiDropdowns = () => { return (
Dropdown button Action Another action Something else here Dropdown link Action Another action Something else here

Use btn- class with below mentioned variation to color dropdown toggle.

Primary Action Another action Something else here Separated link Success Action Another action Something else here Separated link Light Action Another action Something else here Separated link Info Action Another action Something else here Separated link Secondary Action Another action Something else here Separated link Warning Action Another action Something else here Separated link Danger Action Another action Something else here Separated link Dark Action Another action Something else here Separated link

Use divider attribute to Dropdown.Item to create split button dropdowns as a single button dropdown.

Action Another action Something else Separated link Action Another action Something else Separated link Action Another action Something else Separated link Action Another action Something else Separated link Action Another action Something else Separated link Action Another action Something else Separated link Action Another action Something else Separated link Action Another action Something else Separated link

Use btn-lg class to create a large size dropdown button and btn-sm to create a small size dropdown button.

Large button Action Another action Something else here Separated link Action Another action Something else Separated link Small button Action Another action Something else here Separated link Action Another action Something else Separated link

Use dropdown-menu-dark class onto an existing dropdown-menu to create dropdown items dark.

Dropdown button Action Another action Something else here Separated link

Dropdown demo with various dropdown alignment options.

Dropdown Menu item Menu item Menu item Right-aligned menu Menu item Menu item Menu item Left-aligned, right-aligned lg Menu item Menu item Menu item Right-aligned, left-aligned lg Menu item Menu item Menu item Dropstart Menu item Menu item Menu item Dropend Menu item Menu item Menu item Dropup Menu item Menu item Menu item

Use data-bs-offset or data-bs-reference to change the position of the dropdown.

Dropup Action Another action Something else here Toggle Dropdown Action Another action Something else Separated link

By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the autoClose option to change this behavior of the dropdown.

Default dropdown Menu item Menu item Menu item Clickable outside Menu item Menu item Menu item Clickable inside Menu item Menu item Menu item Manual close Menu item Menu item Menu item

Example of dropdown menu and dropdown item color.

Dropdown Menu Success link example
Action Another action Something else here
Separated link
Dropdown Menu link Color example

Dropdown menu Primary link

Primary Action Another action Something else here Separated link

Dropdown menu Secondary link

Sacondary Action Another action Something else here Separated link

Dropdown menu Success link

Success Action Another action Something else here Separated link

Dropdown menu Warning link

Warning Action Another action Something else here Separated link

Dropdown menu Info link

Info Action Another action Something else here Separated link

Dropdown menu Danger link

Danger Action Another action Something else here Separated link

Example of dropdown menu containing Headers, Text and Forms content.

Header
Welcome Jessie!
Action Another action Something else here Separated link Text

Some example text that's free-flowing within the dropdown menu.

And this is more example text.

Forms
Email address
Password
Remember me

Dropdown with notification containing multiple tabs.

Notifications
4 New
Your Elite author Graphic Optimization reward is ready!

Just 30 sec ago

user-pic
Angela Bernier

Answered to your comment on the cash flow forecast's graph 🔔.

48 min ago

You have received 20 new messages in the conversation

2 hrs ago

user-pic
Maureen Gibson

We talked about a project on linkedin.

4 hrs ago

user-pic
James Lemire

We talked about a project on linkedin.

30 min ago

user-pic
Angela Bernier

Answered to your comment on the cash flow forecast's graph 🔔.

2 hrs ago

user-pic
Kenneth Brown

Mentionned you in his comment on 📃 invoice #12501.

10 hrs ago

user-pic
Maureen Gibson

We talked about a project on linkedin.

3 days ago

user-pic
Hey! You have no any notifications
Notifications
4 New
Your Elite author Graphic Optimization reward is ready!

Just 30 sec ago

user-pic
Angela Bernier

Answered to your comment on the cash flow forecast's graph 🔔.

48 min ago

You have received 20 new messages in the conversation

2 hrs ago

user-pic
Maureen Gibson

We talked about a project on linkedin.

4 hrs ago

user-pic
James Lemire

We talked about a project on linkedin.

30 min ago

user-pic
Angela Bernier

Answered to your comment on the cash flow forecast's graph 🔔.

2 hrs ago

user-pic
Kenneth Brown

Mentionned you in his comment on 📃 invoice #12501.

10 hrs ago

user-pic
Maureen Gibson

We talked about a project on linkedin.

3 days ago

user-pic
Hey! You have no any notifications
Notifications
4 New
Your Elite author Graphic Optimization reward is ready!

Just 30 sec ago

user-pic
Angela Bernier

Answered to your comment on the cash flow forecast's graph 🔔.

48 min ago

You have received 20 new messages in the conversation

2 hrs ago

user-pic
Maureen Gibson

We talked about a project on linkedin.

4 hrs ago

user-pic
James Lemire

We talked about a project on linkedin.

30 min ago

user-pic
Angela Bernier

Answered to your comment on the cash flow forecast's graph 🔔.

2 hrs ago

user-pic
Kenneth Brown

Mentionned you in his comment on 📃 invoice #12501.

10 hrs ago

user-pic
Maureen Gibson

We talked about a project on linkedin.

3 days ago

user-pic
Hey! You have no any notifications
); }; UiDropdowns.layout = (page: any) => export default UiDropdowns;