Horizontal Nav - Mega Menu

Nav lists

Dropdown menu markup can be used in 12 columns grid, aligned to the left and right, and have single or multiple levels. Nested levels in multi column nav list use custom extension that saves currently opened level in cookies and shows a link to parent level. Inner dropdowns support all available elements: badges, checkboxes, radios, headers, dividers etc. Please note - mega dropdown menu uses custom class names along with default ones and all these classes are required for a correct functioning.

Examples:

Content lists

Besides simple navigation lists, dropdown menu can contain more complex lists of content: horizontal and vertical buttons list, all types of media lists, progresses, language selection etc etc. Just use standard content lists markup, custom mega menu markup and adjust menu width accordingly. For long lists, add .dropdown-scrollableclass to .dropdown-bodycontainer to limit height to 340pxand 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:

Content components

Besides navigation, mega dropdown menu can also contain allavailable components: forms, buttons, cards, 3rd party extensions, tables, images, videos etc. The only one exception is nested dropdowns with data-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 sizingutility 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:

  • Table
    Table example
    Description Category Assigned to Progress
    Frontpage fixes Bugs 87%
    CSS compilation Bugs 18%
    Responsive layout changes Layout 52%
    Add categories filter Content 100%
    Media grid padding issue Bugs 100%
  • Images
    Grid with images
  • Videos
    Grid with videos
  • Cards
    Cards and card groupsView all tasks
    Nov 12, 11:25amDue in 12 days
    [#462] - Inaccurate small pagination height

    Ouch found swore much dear conductively hid submissively hatchet vexed far inanimately alongside candidly much and jeez

    Dec 25, 09:05amDue in 2 days
    [#548] - Avoid some unnecessary HTML string

    Dear spryly growled much far jeepers vigilantly less and far hideous and some mannishly less jeepers less and and crud

    Jan 02, 11:25pmOverdue
    [#764] - Update json configuration

    Diabolically somberly astride crass one endearingly blatant depending peculiar antelope piquantly popularly adept much

  • Collapsible
    Collapsible cards
    Accordion Item #1
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
    Тon cupidatat skateboard dolor brunch. Тesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda.
    3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it.
    Collapsible Item #1
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
    Тon cupidatat skateboard dolor brunch. Тesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda.
    3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it.
Content nav

This option is completely custom - Bootstrap doesn't support content nav components in dropdown menu by default, because of the class name conflicts and dropdown.jscomponent limitation. This has been improved and both tabs and pills components can be used in dropdowns. There is a requirement - dropdown menu container should have .dropdown-contentclass 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:

Menu header styles

All dropdown menus support custom headerwith 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. Vertical and horizontal spacing of dropdown header is equal to menu body spacing for better content alignment, but you can easily change it in $dropdown-content-header-padding-yvariable or using spacing utility classes. Horizontal spacing of menu header depends on menu body spacing.

Examples:

Menu footer styles

All dropdown menus support custom footerswith 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 has top border and light grey background color by default, but also support custom colors by adding color utility classes (some elements require minor color adjustments as well). You can also control vertical spacing and other options with our set of utility classes.

Examples:

Form layouts

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:

Menu sizing

Dropdown menu has several width options: default dropdown width defined in $dropdown-min-widthvariable, responsive widthand min-widthutility classes (in pixels and percents), auto width that depends on child content width and full width. Autowidth option requires .mega-menu-leftor .mega-menu-rightclasses added to .nav-item; fullwidth option requires .mega-menu-fullclass added to .nav-item. These 2 options should nothave .dropdownor .dropupclasses since position of parent container should be default (static).

Examples:

Content grid

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 .rowinside mega menu dropdown to make them stackable on mobile or .col-[count]classes to avoid stacking.

Examples:

Navigation classes
This table contains all classes related to the horizontal navbar navigation. Navbar navigation links build on default .navoptions 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-itemand .nav-link.
Class Description
Navigation elements
.nav Global wrapper for navigation list. It uses default Bootstrap's styles of .navcomponent and similar markup options.
.navbar-nav for a full-height and lightweight navigation (including support for dropdowns).
.nav-item This class is required in an immediate nav link parent element in any .navcontainer: sidebar, navbar, nav groups, tabs, pills etc.
.nav-item.dropdown Combination of these classes is required for items with dropdown menu - nav item with .dropdownclass is a dropdown toggle and menu wrapper that declares position: relative;.
.nav-item.dropup Same as .dropdown, but this class is required in bottom navbars, because it triggers dropdown menus above elements in navbar. Dropdown caret direction in bottom navbar also depends on this class.
.navbar-nav-link A custom class, unlike Bootstrap's default .nav-linkclass it doesn't affect navs in dropdowns. This class is responsible for navigation link styling and is also required as a part of nav list element structure. It's also a target for .activeand .disabledclasses.
Dropdowns
.dropdown-user This class is used in menu with user pic - image size is calculated dynamically in SASS and .dropdown-useris needed to target the container where these calculations need to run.
.dropdown-content If you need to prevent dropdown from closing when you interact with it, add .dropdown-contentto default .dropdown-menucontainer. This doesn't disable click event outside the dropdown though.
.dropdown-content-header Class for the headerwithin .dropdown-content- custom element with padding that mathches custom dropdown body and footer padding. Can contain multiple components on both sides.
.dropdown-content-body Class for the bodywithin .dropdown-content- element with custom padding, by default is similar to .card-body, but can be changed in SASS variables if you want to increase or decrease custom dropdown spacing.
.dropdown-content-footer Class for the footerwithin .dropdown-content- custom element with padding that mathches custom dropdown body and header padding. Can contain multiple components on both sides.
.dropdown-scrollable This class sets max-heightto the dropdown body and adds vertical scrollbar. Can be added to .dropdown-content-bodycontainer to make only body scrollable or to the entire .dropdown-menu. Default max-height value is 340px.
.mega-menu-[alignment] These classes control the percent-based width of the menu. Options for [alignment]: full- sets 100% width, left- aligns menu to the left, right- aligns menu to the right. Note - make sure you don't use .dropdownand .dropupclasses in .nav-itemcontainer.
.w-[breakpoint]-[value] Set of responsive utility classes that set min-widthproperty to the .dropdown-menucontainer. Very useful in dropdowns with long content. Available options for [value](in pixels): 200, 250, 300, 350, 400, 450, 500, 550, 600.
Misc
.caret-0 Add this class to any .navbar-nav-link.dropdown-toggleif you want to hide caret (directional arrow). Useful in nav links with single icon, without text and badge.
[data-hover="dropdown"] Data attribute that triggers dropdown toggling on hoverandclick. It also affects all submenus within this menu, so needs to be added to [data-toggle="dropdown"]only on top level.