Logo
Keen extends Bootstrap Dropdowncomponent with a variety of options to provide unique looking Dropdown components that matches Keen's design standards.
For more info please visit the plugin's Bootstrap Documentation.

Single Button

Turn any .btninto a dropdown toggle with some markup changes. Here’s how you can put them to work with <button>.


                        <div class="dropdown">
                            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Dropdown button
                            </button>
                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                        </div>

Turn single icon buttons into a dropdown toggle with some markup changes.


                        <div class="dropdown dropdown-inline mr-4">
                            <button type="button" class="btn btn-light-primary btn-icon btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="ki ki-bold-more-hor"></i>
                            </button>
                            <div class="dropdown-menu">
                                ...
                            </div>
                        </div>

                        <div class="dropdown dropdown-inline">
                            <button type="button" class="btn btn-light-primary btn-icon btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="ki ki-bold-more-ver"></i>
                            </button>
                            <div class="dropdown-menu">
                                ...
                            </div>
                        </div>

You can do this with any button variant as well:


                        <!-- Example single danger button-->
                        <div class="btn-group">
                            <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action</button>
                          <div class="dropdown-menu">
                              ...
                          </div>
                        </div>

Split Button

Create split button dropdowns with virtually the same markup as single button dropdowns by adding .dropdown-toggle-splitfor proper spacing around the dropdown caret.


                        <div class="btn-group">
                            <button type="button" class="btn btn-primary">Primary</button>
                            <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <div class="dropdown-menu">
                                ...
                            </div>
                        </div>

Sizing

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


                        <div class="btn-group">
                            <button class="btn btn-primary font-weight-bold btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Large button
                            </button>
                            <div class="dropdown-menu">
                                ...
                            </div>
                        </div>

                        <div class="btn-group">
                            <button class="btn btn-primary font-weight-bold btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Small button
                            </button>
                            <div class="dropdown-menu">
                                ...
                            </div>
                        </div>

Direction

Dropup

Trigger dropdown menus above element by adding .dropupto the parent element.


                        <div class="btn-group dropup">
                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Dropup
                            </button>
                            <div class="dropdown-menu">
                                ...
                            </div>
                        </div>
Dropright

Trigger dropdown menus at the right of the element by adding .droprightto the parent element.


                        <div class="btn-group dropright">
                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Dropup
                            </button>
                            <div class="dropdown-menu">
                                ...
                            </div>
                        </div>
Dropleft

Trigger dropdown menus at the left of the element by adding .dropleftto the parent element.


                        <div class="btn-group dropleft">
                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Dropup
                            </button>
                            <div class="dropdown-menu">
                                ...
                            </div>
                        </div>

Forms

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.


                        <div class="btn-group">
                            <button class="btn btn-primary font-weight-bold btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Form example
                            </button>
                            <div class="dropdown-menu dropdown-menu-lg">
                                <form class="px-8 py-8">
                                    <div class="form-group">
                                        <label for="exampleDropdownFormEmail1">Email address</label>
                                        <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleDropdownFormPassword1">Password</label>
                                        <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
                                    </div>
                                    <div class="form-group">
                                        <label class="checkbox">
                                            <input type="checkbox"/> Remember me
                                            <span></span>
                                        </label>
                                    </div>
                                    <button type="submit" class="btn btn-primary">Sign in</button>
                                </form>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item px-8" href="#">New around here? Sign up</a>
                                <a class="dropdown-item px-8" href="#">Forgot password?</a>
                            </div>
                        </div>

Dropdown options

Use data-offsetor data-referenceto change the location of the dropdown.


                        <div class="dropdown mr-1">
                            <button type="button" class="btn btn-outline-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
                                Offset
                            </button>
                            <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
                                ...
                            </div>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-outline-secondary">Reference</button>
                            <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
                                ...
                            </div>
                        </div>

User Profile 15 messages

Recent Notifications

Important Notice

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

System Update

There are many variations of passages of Lorem Ipsum available.

Server Maintenance

Contrary to popular belief, Lorem Ipsum is not simply random text.

DB Migration

If you are going to use a passage of Lorem Ipsum, you need.

System Messages
09:30 AM

To start a blog, think of a topic about and first brainstorm ways to write details

2:45 PM

To start a blog, think of a topic about and first brainstorm ways to write details

3:12 PM

To start a blog, think of a topic about and first brainstorm ways to write details

7:05 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Notifications
Pic
Marcus Smart UI/UX, Art Director
+65%
AH
Andreas Hawks Python Developer
+23%
SC
Sarah Connor HTML, CSS. jQuery
-34%
Pic
Amanda Harden UI/UX, Art Director
+72%
SR
Sean Robbins UI/UX, Art Director
+65%
JT
Jason Tatum ASP.NET Developer
+139%

Privacy Settings:

After you log in, you will be asked for additional information to confirm your identity.

Security Settings:

After you log in, you will be asked for additional information to confirm your identity. For extra security, this requires you to confirm your email. Learn more.

Select A Demo

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9