Besides navigation, navbar component supports custom content such as: dropdowns with submenu, dropdown menus with custom content, full width dropdowns, language selection, forms, tabs, multi level menus, date pickers etc. Everything is adapted to use in different navbar color schemes and sizes. Examples below demonstrate some of these components, other examples related to
mega menu can be found on this page.
Date range picker
Navbar navigation links build on our
.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
Navbar navigation supports icons: text with left and right positioned icons, multiple icons within 1 item, icons only and carets for items with dropdown menu. By default, sidebar control buttons are placed in the left navigation. To add icons, place
<i> element with icon class to the navigation link element. To use with text, depending on the position place icon before or after item text. Use
.mr-2 to add left/right spacer between the icon and nav link text.
Flexibility of the navbar navigation also allows you to use 2 kinds of badges -
floating. Both types can have left and right positions. To use inline badge, add
.position-static class to the element, default placement is absolute with top-right position. To use left positioned elements, place it before text in inline version and add
.right-auto.left-0 to the absolute positioned element.
Instead badges, which should contain text by default, navbar component supports badge marks - small rounded indicators. These indicators support all available colors and can have 2 different styles - circle and ring. To use ring, add
.border-[color] classes. To use circle, add
.border-[color] classes. Both variations require
.badge-mark class by default. Also these indicators support left/right alignment and static/absolute positioning.
Various buttons are supported as part of navbar components. This is also a great reminder that vertical alignment utilities can be used to align different sized elements. Button groups and button dropdowns in different colors, sizes and styles are also supported. For multiple buttons, use reponsive
spacing utility classes for proper vertical and horizontal alignment.
Wrap strings of text in an element with
.navbar-text, usually on a
<span> tag for proper leading and color. This class adjusts vertical alignment and horizontal spacing for strings of text. In some cases links within
.navbar-text may need color adjustments, use
color utility classes to style links properly.
Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars. Progress bars inside navbar support all possible styling options: colors, animations, labels, appearance, sizes etc. Also you can add text and icon labels to display current action, it's also available in both left and right positions.
Place form content within container with
spacing utility classes for proper vertical alignment and collapsed behavior in narrow viewports. Use the
alignment options to decide where it resides within the navbar content. Navbar supports all form components: checkboxes, radios, default and custom selects, file inputs etc. Some form controls, like input groups, may require
width utility classes to be show up properly within a navbar.
Basic form controls
Default and custom selects
Input group, file select
Input with icons
Checkboxes - both alignment
Radios - both alignment