brand

Layout

Choose your preferred layout


Navigation

Menu comes in two modes: dark & light


Top Nav

Choose your liked color mode


Scrollable Header
brand brand

Dropdowns

Dropdown & Dropup Buttons

Dropdowns can be triggered from anchor or button elements. Wrap the dropdown’s toggle (your button or link) and the dropdown menu within .dropdown.

Dropdown directions

Trigger dropdown menus above elements by adding .dropup, .dropleft or .dropright 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.

Sizing

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

Fancy Dropdowns

Use animation classes from animate.css to quickly change the appearance of a dropdown. e.g.data-dropdown-in="rollIn" data-dropdown-out="rollOut"

Menu content

Create menu items with button or anchor tags. You can also add non-interactive dropdown items or add a header to label sections or separate groups with a divider.

Adding Text

Place any freeform text within a dropdown menu with text and use spacing utilities or simply use.dropdown-item-text class.

Only text
Dropdown with icon

Add an icon using i tag within .dropdown-item

Menu 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.

Dropdown inverse

Add .dropdown-menu-dark modifier class to change the dropdown look to a dark one.