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

Upgrade you
Account to Pro

Upgrade

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>

Dropdown Divider

The .dropdown-divider class is used to separate links inside the dropdown menu with a thin horizontal border 

 <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 class="dropdown-divider"></div>
	<a class="dropdown-item"  href="javascript:void(0);">Another link</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>

Examples For Dropdown

Copyright © Designed & Developed by DexignZone 2023