Custom components
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.
Mixed components
España
English
Українська
Deutsch
IT
Navbar navigation
Basic navigation
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 .nav-item and
.nav-link.
Navigation icons
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
.ms-2 or .me-2 to add left/right
spacer between the icon and nav link text.
Badges
Flexibility of the navbar navigation also allows you to use
2 kinds of badges - inline and
floating. Both types can have left and right
positions. To use inline badge, just add badge markup next
to the text label, default placement is absolute with
top-right position. To use left positioned elements, place
it before text in inline version and use our utility classes
to adjust position.
Badge marks
Instead of 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, use a combination of our border, background and
padding utility classes. Colors are controlled by color
classes without any additional CSS. Both variations do not
require .badge class by default. Also these
indicators support left/right alignment and static/absolute
positioning.
Basic components
Navbar buttons
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.
Navbar text
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.
Progress bars
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.
Form components
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.
