Chat List

Show All

  • A
  • B
  • D
  • J
  • O
Chat with Khelesh

Online

  • View profile
  • Add to btn-close friends
  • Add to group
  • Block
Hi, how are you samim? 8:40 AM, Today
Hi Khalid i am good tnx how about you? 8:55 AM, Today
I am good too, thank you for your chat template 9:00 AM, Today
You are welcome 9:05 AM, Today
I am looking for your next templates 9:07 AM, Today
Ok, thank you have a good day 9:10 AM, Today
Bye, see you 9:12 AM, Today
Hi, how are you samim? 8:40 AM, Today
Hi Khalid i am good tnx how about you? 8:55 AM, Today
I am good too, thank you for your chat template 9:00 AM, Today
You are welcome 9:05 AM, Today
I am looking for your next templates 9:07 AM, Today
Ok, thank you have a good day 9:10 AM, Today
Bye, see you 9:12 AM, Today
Notications

Show All

  • SEVER STATUS
  • KK
  • SOCIAL
  • RU
  • SEVER STATUS
  • AU
  • MO
Notes

Add New Nots

© 2024 Maaran Solutions, All Rights Reserved || Designed by Ultrakey Digital Market

Basic Dropdown

A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list

Link 1 Link 2 Link 3 
<div class="basic-dropdown">
	<div class="dropdown">
		<button type="button" class="btn btn-default dropdown-toggle" data-bs-toggle="dropdown">
			Dropdown button
		</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="javascript:void(0);">Link 1</a>
			<a class="dropdown-item" href="javascript:void(0);">Link 2</a>
			<a class="dropdown-item" href="javascript:void(0);">Link 3</a>
		</div>
	</div>
</div>

Disable and Active items

The .dropdown-header class is used to add headers inside the dropdown menu

Normal Active Disabled 
<div class="basic-dropdown">
	<div class="dropdown">
		<button type="button" class="btn btn-default dropdown-toggle" data-bs-toggle="dropdown">
			Dropdown button
		</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="javascript:void(0);">Normal</a>
			<a class="dropdown-item active" href="javascript:void(0);">Active</a>
			<a class="dropdown-item disabled" href="javascript:void(0);">Disabled</a>
		</div>
	</div>
</div>

Align Right

To right-align the dropdown, add the .dropdown-menu-end class to the element with .dropdown-menu

Link 1 Link 2 Link 3 
 <div class="basic-dropdown">
	<div class="dropdown">
		<button type="button" class="btn btn-default dropdown-toggle" data-bs-toggle="dropdown">
			Dropdown button
		</button>
		<div class="dropdown-menu dropdown-menu-end">
			<a class="dropdown-item" href="javascript:void(0);">Link 1</a>
			<a class="dropdown-item" href="javascript:void(0);">Link 2</a>
			<a class="dropdown-item" href="javascript:void(0);">Link 3</a>
		</div>
	</div>
</div>

Dropup

The .dropup class makes the dropdown menu expand upwards instead of downwards

Link 1 Link 2 Link 3
Link 1 Link 2 Link 3 
<div class="basic-dropdown">
	<!-- Default dropup button -->
	<div class="btn-group dropup mb-1">
		<button type="button" class="btn btn-default dropdown-toggle" data-bs-toggle="dropdown">
			Dropup
		</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="javascript:void(0);">Link 1</a>
			<a class="dropdown-item" href="javascript:void(0);">Link 2</a>
			<a class="dropdown-item" href="javascript:void(0);">Link 3</a>
		</div>
	</div>javascript:void(0);
	<!-- Split dropup button -->
	<div class="btn-group dropup mb-1">
		<button type="button" class="btn btn-primary">
			Split dropup
		</button>
		<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
			<span class="sr-only">Toggle Dropdown</span>
		</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="javascript:void(0);">Link 1</a>
			<a class="dropdown-item" href="javascript:void(0);">Link 2</a>
			<a class="dropdown-item" href="javascript:void(0);">Link 3</a>
		</div>
	</div>
</div>

Dropright

Trigger dropdown menus at the right of the elements by adding .dropend to the parent element

Link 1 Link 2 Link 3
Link 1 Link 2 Link 3 
 <div class="basic-dropdown">
	<!-- Default dropright button -->
	<div class="btn-group dropend mb-1">
		<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
			Dropright
		</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="javascript:void(0);">Link 1</a>
			<a class="dropdown-item" href="javascript:void(0);">Link 2</a>
			<a class="dropdown-item" href="javascript:void(0);">Link 3</a>
		</div>
	</div>

	<!-- Split dropright button -->
	<div class="btn-group dropend mb-1">
		<button type="button" class="btn btn-primary">
			Split dropright
		</button>
		<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
			<span class="sr-only">Toggle Dropright</span>
		</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="javascript:void(0);">Link 1</a>
			<a class="dropdown-item" href="javascript:void(0);">Link 2</a>
			<a class="dropdown-item" href="javascript:void(0);">Link 3</a>
		</div>
	</div>
</div>

dropstart

Trigger dropdown menus at the right of the elements by adding .dropstart to the parent element

Link 1 Link 2 Link 3
Link 1 Link 2 Link 3 
 <div class="basic-dropdown">
	<!-- Default dropstart button -->
	<div class="btn-group dropstart mb-1">
		<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
			dropstart
		</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="javascript:void(0);">Link 1</a>
			<a class="dropdown-item" href="javascript:void(0);">Link 2</a>
			<a class="dropdown-item" href="javascript:void(0);">Link 3</a>
		</div>
	</div>

	<!-- Split dropstart button -->
	<div class="btn-group mb-1">
		<div class="btn-group dropstart " role="group">
			<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
				<span class="sr-only">Toggle dropstart</span>
			</button>
			<div class="dropdown-menu">
				<a class="dropdown-item" href="javascript:void(0);">Link 1</a>
				<a class="dropdown-item" href="javascript:void(0);">Link 2</a>
				<a class="dropdown-item" href="javascript:void(0);">Link 3</a>
			</div>
		</div>
		<button type="button" class="btn btn-primary">
			Split dropstart
		</button>
	</div>
</div>

Button Dropdowns

 <div class="button-dropdown">
<div class="btn-group mb-1">
	<button type="button" class="btn btn-primary">Primary</button>
	<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
	</button>
	<div class="dropdown-menu">
		<a class="dropdown-item" href="javascript:void(0);">Action</a>
		<a class="dropdown-item" href="javascript:void(0);">Another action</a>
		<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
	</div>
</div>javascript:void(0);
<div class="btn-group mb-1">
	<button type="button" class="btn btn-secondary">Secondary</button>
	<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
	</button>
	<div class="dropdown-menu">
		<a class="dropdown-item" href="javascript:void(0);">Action</a>
		<a class="dropdown-item" href="javascript:void(0);">Another action</a>
		<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
	</div>
</div>

<div class="btn-group mb-1">
	<button type="button" class="btn btn-success">Success</button>
	<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
	</button>
	<div class="dropdown-menu">
		<a class="dropdown-item" href="javascript:void(0);">Action</a>
		<a class="dropdown-item" href="javascript:void(0);">Another action</a>
		<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
	</div>
</div>

<div class="btn-group mb-1">
	<button type="button" class="btn btn-info">Info</button>
	<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
	</button>
	<div class="dropdown-menu">
		<a class="dropdown-item" href="javascript:void(0);">Action</a>
		<a class="dropdown-item" href="javascript:void(0);">Another action</a>
		<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
	</div>
</div>

<div class="btn-group mb-1">
	<button type="button" class="btn btn-warning">Warning</button>
	<button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
	</button>
	<div class="dropdown-menu">
		<a class="dropdown-item" href="javascript:void(0);">Action</a>
		<a class="dropdown-item" href="javascript:void(0);">Another action</a>
		<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
	</div>
</div>

<div class="btn-group mb-1">
	<button type="button" class="btn btn-danger">Danger</button>
	<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
	</button>
	<div class="dropdown-menu">
		<a class="dropdown-item" href="javascript:void(0);">Action</a>
		<a class="dropdown-item" href="javascript:void(0);">Another action</a>
		<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
	</div>
</div>
</div>

Sizing

Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.

 <div class="dropdown-size">
	<!-- Large button groups (default and split) -->
	<div class="btn-group mb-1">
		<button class="btn btn-primary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown">
			Large button
		</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="javascript:void(0);">Action</a>
			<a class="dropdown-item" href="javascript:void(0);">Another action</a>
			<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
			<div class="dropdown-divider"></div>
			<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
		</div>
	</div>
	<div class="btn-group mb-1">
		<button class="btn btn-primary btn-lg" type="button">
			Large split button
		</button>
		<button type="button" class="btn btn-lg btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			<span class="sr-only">Toggle Dropdown</span>
		</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="javascript:void(0);">Action</a>
			<a class="dropdown-item" href="javascript:void(0);">Another action</a>
			<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
			<div class="dropdown-divider"></div>
			<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
		</div>
	</div>

	<!-- Small button groups (default and split) -->
	<div class="btn-group mb-1">
		<button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">
			Small button
		</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="javascript:void(0);">Action</a>
			<a class="dropdown-item" href="javascript:void(0);">Another action</a>
			<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
			<div class="dropdown-divider"></div>
			<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
		</div>
	</div>
	<div class="btn-group mb-1">
		<button class="btn btn-primary btn-sm" type="button">
			Small split button
		</button>
		<button type="button" class="btn btn-sm btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			<span class="sr-only">Toggle Dropdown</span>
		</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="javascript:void(0);">Action</a>
			<a class="dropdown-item" href="javascript:void(0);">Another action</a>
			<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
			<div class="dropdown-divider"></div>
			<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
		</div>
	</div>
</div>

Custom style

Use .custom-dropdown this class for this style

 <div class="row">
<div class="col-xl-3">
	<div class="dropdown custom-dropdown">
		<div data-bs-toggle="dropdown">Last 7 days
			<i class="fa fa-angle-down ms-3"></i>
		</div>
		<div class="dropdown-menu dropdown-menu-end">
			<a class="dropdown-item" href="javascript:void(0);">Last 1 Month</a>
			<a class="dropdown-item" href="javascript:void(0);">Last 6 Month</a>
			<a class="dropdown-item" href="javascript:void(0);">Last 10 Month</a>
		</div>
	</div>
</div>

<div class="col-xl-3">
	<div class="dropdown custom-dropdown">
		<button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="dropdown">Last 7 days
			<i class="fa fa-angle-down ms-3"></i>
		</button>
		<div class="dropdown-menu dropdown-menu-end">
			<a class="dropdown-item" href="javascript:void(0);">Last 1 Month</a>
			<a class="dropdown-item" href="javascript:void(0);">Last 6 Month</a>
			<a class="dropdown-item" href="javascript:void(0);">Last 10 Month</a>
		</div>
	</div>
</div>

<div class="col-xl-3">
	<div class="dropdown custom-dropdown">
		<button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="dropdown">Last 1 Hour
			<i class="fa fa-angle-down ms-3"></i>
		</button>
		<div class="dropdown-menu dropdown-menu-end">
			<a class="dropdown-item" href="javascript:void(0);">Last 1 hour</a>
			<a class="dropdown-item" href="javascript:void(0);">Last 2 hour</a>
			<a class="dropdown-item" href="javascript:void(0);">Last 3 hour</a>
		</div>
	</div>
</div>

<div class="col-xl-3">
	<div class="dropdown custom-dropdown">
		<button type="button" class="btn btn-sm btn-primary" data-bs-toggle="dropdown">Last 7 days
			<i class="fa fa-angle-down ms-3"></i>
		</button>
		<div class="dropdown-menu dropdown-menu-end">
			<a class="dropdown-item"  href="javascript:void(0);">Last 1 Month</a>
			<a class="dropdown-item"  href="javascript:void(0);">Last 6 Month</a>
			<a class="dropdown-item"  href="javascript:void(0);">Last 10 Month</a>
		</div>
	</div>
</div>

<div class="col-xl-3">
	<div class="dropdown custom-dropdown">
		<button type="button" class="btn btn-sm btn-primary" data-bs-toggle="dropdown">
			<i class="ti-search mr-3"></i> 3 AM
			<i class="fa fa-angle-down ms-3"></i>
		</button>
		<div class="dropdown-menu dropdown-menu-end">
			<a class="dropdown-item"  href="javascript:void(0);">6 AM</a>
			<a class="dropdown-item"  href="javascript:void(0);">9 AM</a>
			<a class="dropdown-item"  href="javascript:void(0);">12 AM</a>
		</div>
	</div>
</div>

<div class="col-xl-3">
	<div class="dropdown custom-dropdown">
		<button type="button" class="btn btn-sm btn-primary" data-bs-toggle="dropdown">
			<i class="ti-calendar m-r-5"></i> March 20, 2018   To  April
			20, 2018
			<i class="fa fa-angle-down ms-3"></i>
		</button>
		<div class="dropdown-menu dropdown-menu-end">
			<a class="dropdown-item"  href="javascript:void(0);">May 20, 2018   To   June 20,
				2018</a>
			<a class="dropdown-item"  href="javascript:void(0);">July 20, 2018   To   August
				20, 2018</a>
		</div>
	</div>
</div>
<div class="col-xl-3">
	<div class="dropdown custom-dropdown">
		<div class="btn sharp btn-primary tp-btn" data-bs-toggle="dropdown">
			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="18px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"/><circle fill="#000000" cx="12" cy="5" r="2"/><circle fill="#000000" cx="12" cy="12" r="2"/><circle fill="#000000" cx="12" cy="19" r="2"/></g></svg>
		</div>
		<div class="dropdown-menu dropdown-menu-end">
			<a class="dropdown-item"  href="javascript:void(0);">Option 1</a>
			<a class="dropdown-item"  href="javascript:void(0);">Option 2</a>
			<a class="dropdown-item"  href="javascript:void(0);">Option 3</a>
		</div>
	</div>
</div>

<div class="col-xl-3">
	<div class="dropdown custom-dropdown">
		<div class="btn sharp btn-primary tp-btn" data-bs-toggle="dropdown">
			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="18px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"/><circle fill="#000000" cx="12" cy="5" r="2"/><circle fill="#000000" cx="12" cy="12" r="2"/><circle fill="#000000" cx="12" cy="19" r="2"/></g></svg>
		</div>
		<div class="dropdown-menu dropdown-menu-end">
			<a class="dropdown-item"  href="javascript:void(0);">Option 1</a>
			<a class="dropdown-item"  href="javascript:void(0);">Option 2</a>
			<a class="dropdown-item"  href="javascript:void(0);">Option 3</a>
		</div>
	</div>
</div>
</div>

Dropdown

© 2024 Maaran Solutions, All Rights Reserved || Designed by Ultrakey Digital Market