Keen | Dropdown
Description: Bootstrap dropdown examples

# Customer Relationship Management

New Order

### Dropdown

Reports
Keen extends `Bootstrap Dropdown` component with a variety of options to provide uniquely looking Dropdown component that matches the Keen's design standards.
For more info please visit the plugin's Documentation.

### Basic Examples

### Single Button

Wrap the dropdown’s toggle (your button or link) and the dropdown menu within `.dropdown`, or another element that declares `position: relative;`. Dropdowns can be triggered from `<a>` or `<button>` elements to better fit your potential needs.
Any single `.btn` can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either `<button>` elements:
And with `<a>` elements:
Dropdown link
The best part is you can do this with any button variant, too:

### Split button

Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` for proper spacing around the dropdown caret.
We use this extra class to reduce the horizontal `padding` on either side of the caret by 25% and remove the `margin-left` that’s added for regular button dropdowns. Those extra changes keep the caret centered in the split button and provide a more appropriately sized hit area next to the main button.

### Sizing Example

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

### Directions

### Dropup

Trigger dropdown menus above elements by adding `.dropup` to the parent element.

### Dropright

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

### Dropleft

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

### Menu alignment

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu.

### Menu content

### Headers

Add a header to label sections of actions in any dropdown menu.

### Dropdown options

Use `data-offset` or `data-reference` to change the location of the dropdown.

### Menu items

Historically dropdown menu contents had to be links, but that’s no longer the case with v4. Now you can optionally use `<button>` elements in your dropdowns instead of just `<a>`s.
You can also create non-interactive dropdown items with `.dropdown-item-text`. Feel free to style further with custom CSS or text utilities.

### Active

Add `.active` to items in the dropdown to style them as active.

### Disabled

Add `.disabled` to items in the dropdown to style them as disabled.

### Menu content

### Headers

Add a header to label sections of actions in any dropdown menu.

### Dividers

Separate groups of related menu items with a divider.

### Text

Place any freeform text within a dropdown menu with text and use spacing utilities. Note that you’ll likely need additional sizing styles to constrain the menu width.

### Forms Example 1

Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require.
Email address
Password
Remember me

### Quick Actions

Orders
Uploades
Products
Customers
Blog Posts
Settings
02:30 PM
KeenThemes created new layout whith tens of new options for Keen Admin panel
HTML,CSS,VueJS
01:20 AM
New secyrity alert by Firewall & order to take aktion on User Preferences
Security, Fieewall
Yestardey
FlyMore design mock-ups been uploadet by designers Bob, Naomi, Richard
PSD, Sketch, AJ
Aug 13,2018
Meeting with Ken Digital Corp ot Unit14, 3 Edigor Buildings, George Street, Loondon
England, BA12FJ
Meeting, Customer
May 09, 2018
KeenThemes created new layout whith tens of new options for Keen Admin panel
HTML,CSS,VueJS
01:20 AM
New secyrity alert by Firewall & order to take aktion on User Preferences
Security, Fieewall

### Recent Bills

Lorem Ipsum is simply dummy text of the printing and typesetting simply dummy text of the printing industry.
Dismiss View

### Latest Orders

Lorem Ipsum is simply dummy text of the printing and typesetting simply dummy text of the printing industry.
Dismiss View

### Latest Invoices

Lorem Ipsum is simply dummy text of the printing and typesetting simply dummy text of the printing industry.
Dismiss View

### New Comments

Lorem Ipsum is simply dummy text of the printing and typesetting simply dummy text of the printing industry.
Dismiss View

### Recent Posts

Lorem Ipsum is simply dummy text of the printing and typesetting simply dummy text of the printing industry.
Dismiss View
Notifications
Enable notifications:
Enable audit log:
Notify on new orders:
Orders
Enable order tracking:
Enable orders reports:
Allow order status auto update:
Customers
Enable customer singup:
Enable customers reporting:
Notifiy on new customer registration:

- Demos

### Select A Demo

Demo 1
Default RTL Version
Demo 2
Default RTL Version
Demo 3
Default RTL Version
Demo 4
Default RTL Version
Demo 5
Default RTL Version
Demo 6
Default RTL Version
Demo 7
Coming soon
Demo 8
Coming soon
Demo 9
Coming soon
Buy Keen Now!