Loading...

Dropdowns

Default dropdowns

Create dropdowns with Bootstrap using the <div class="dropdown"> class and <button class="btn btn-secondary dropdown-toggle"> for the toggle. Include <ul class="dropdown-menu"> for the menu items.

Split Button Dropdown

Create a split button dropdown with Bootstrap by using .btn-group and .dropdown-toggle-split classes. Apply these to separate the button and dropdown toggle.

Dropdown Sizing

Use btn-lg class to create a large size dropdown button and btn-sm to create a small size dropdown button.

Dark Dropdowns

Style dark dropdowns with Bootstrap by using the .dropdown-menu-dark class on the <ul> element for a dark theme.

Hover dropdowns

Enable hover dropdowns with Bootstrap by using the .dropdown-hover class. Apply this class to the <div class="dropdown"> container for dropdowns that appear on hover.

Alignment options

Align dropdown menus with Bootstrap using .dropdown-menu-end to right-align and .dropdown-menu-start to left-align the dropdown menu relative to the toggle button.

Dropdown Menu Item Color
Dropdown Options

Customize dropdown options in Bootstrap with data-bs-offset to adjust the dropdown position and data-bs-reference to specify the reference element for positioning.

Auto Close Behavior

Control auto-close behavior of dropdowns in Bootstrap using the data-bs-auto-close attribute. Set it to "true", "outside", or "inside" to define when the dropdown should close automatically.

Dropdown Menu Item Color
Dropdown Menu Success link example

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

Dropdown Menu Disabled example

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

Menu Content

Example of dropdown menu containing Headers, Text and Forms content.

Preview Settings

Theme Layouts

Defines the admin panel's layout style, allowing you to choose from different design options.

Color Mode

Choose if app's appearance should be light or dark, or follow your computer's settings.

RTL Mode

Toggle between LTR and RTL layouts to support different language directions.

Preset Themes

Choose a preset theme from out theme library.

Sidebar Colors

Sets the sidebar color scheme. Options include light, dark, or gradient styles.

Navbar Positions Options

Sets the navbar position: sticky, static, or hidden.

Navbar Type Options

Sets the navbar style: default, dark, transparent, or glass.

Font Options

Sets the fonts for headings and body text.

Font Size Options

Sets the font size: sm, md, or lg.

Rounded Options

Sets the border radius size: xs, sm, md, lg, or xl.

Container Options

Defines the container style: fluid (full-width) or boxed (fixed width).

Loader Options

Sets the page loader visibility: hidden or visible.