Dropdown menu markup can be used in 12 columns grid, aligned to the left and right, have single or multiple levels, have 100% width and contain all available inline elements (badges, checkboxes, radios, headers, dividers etc). Nested levels are implemented with our regular pills component, which is fully adapted for mobile screens. None of the dropdown options require any additional class names, all is done with utility class names.

Examples:

Besides simple navigation lists, dropdown menu can contain more complex lists of content: horizontal and vertical buttons list, all types of media lists, progress bars and lists, language selection etc etc. Just use standard content lists markup, custom mega menu markup and adjust menu width accordingly. For long lists, add .dropdown-menu-scrollable class to dropdown menu container to limit height to 340px and make the content scrollable. You can also use color utility classes to change menu color, but bear in mind that some elements require color adjustments in this case.

Examples:

Besides navigation, mega dropdown menu can also contain all available components: forms, buttons, cards, 3rd party extensions, tables, images, videos etc. The only one exception is nested dropdowns with data-bs-toggle="dropdown" attibute due to default BS limitation. If menu doesn't have 100% width, in some cases you would need to set minimum width by using sizing utility classes, because most of the components are fluid by default and their width depends on parent container width. All components are adapted for mobile browsers.

Examples:

This option is completely custom - Bootstrap doesn't support content nav components in dropdown menu by default as class name conflicts and dropdown.js component limitation. This has been improved and both tabs and pills components can be used in dropdowns. There is a requirement - dropdown toggler should have data-bs-auto-close="outside" attribute to keep menu opened when links inside are clicked. Tabs and pills can be placed anywhere in the dropdown - top, center, bottom, left, right, can be nested and can have any type of content.

Examples:

All dropdown menus support custom header with a number of elements - plain text, text links, buttons, single icons and icon groups, small images, collapsible panels, badges and badge pills. Thanks to the power of flex model, all elements can be easily aligned vertically and horizontally. Vertical and horizontal spacing of dropdown header is equal to menu body spacing for better content alignment, but you can easily change it using spacing utility classes. Horizontal spacing of menu header depends on menu body spacing.

Examples:

All dropdown menus support custom footers with a number of elements - plain text, text links, buttons, single icons and icon groups, small images, badges and badge pills. Thanks to the power of flex model, all elements can be easily aligned vertically and horizontally. Menu footer appearance is fully controlled by util classes, e.g. top border and light grey background color (some elements require minor color adjustments as well). You can also control other properties such as vertical spacing and other options.

Examples:

Dropdown menu supports all available form layouts - inline, vertical and horizontal. You can use the forms just like anywhere else, they don't require any additional classes or styling. But you need to control dropdown width in order to fit the form rows correctly, because all forms are fluid by default. You can also control form layouts on small screens with grid classes, in case if you need to display complex forms with multiple columns. Examples below demonstrate form layouts, complex multi column form and separate group of form controls.

Examples:

Dropdown menu has several width options: default dropdown width defined in $dropdown-min-width or var(--dropdown-min-width) variable, responsive width and min-width utility classes (in pixels and percents), auto width that depends on child content width and full width. Auto width option requires additional utlility classes added to .dropdown-menu; full width option requires .start-0.end-0.mx-[value] classes added to .dropdown-nenu. These 2 options should not have .dropdown or .dropup classes since position of parent container should be default (static).

Examples:

Mega menu component supports a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. Using a single set of .col-[breakpoint]-[count] grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row inside mega menu dropdown to make them stackable on mobile or .col-[count] classes to avoid stacking.

Examples:

This table contains all classes related to the horizontal navbar navigation. Navbar navigation links build on default .nav options with their own modifier class and require the use of toggler classes for proper responsive styling. Navigation in navbars will also grow to occupy as much horizontal space as possible to keep your navbar contents securely aligned. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for .nav-item and .nav-link.