Besides navigation, navbar component supports custom content such as: dropdown menus with custom content, full width dropdowns, language selects, 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
-
Tabs
-
James Alexander تبریز - ایران. -
Jeremy Victorino Dowagiac, MI.
-
Margo Baker Kasaan, AK.
-
Beatrix Diaz Neenah, WI.
-
Richard Vango Grapevine, TX.
-
- Classic
Date range picker
Language selector
España
انگلیسی
Українська
Deutsch
РусскийBasic navigation
Navigation list is a basic and main navbar component available in left and right positions. Navbar navigation is adapted to use in all navbar sizes and colors. To align navigation or any other navbar component, use .navbar-left or .navbar-right utility classes. These classes are mixin-ed versions of .pull-left and .pull-right, but they're scoped to media queries for easier handling of navbar components across device sizes.
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.
Labels and badges
Flexibility of the navbar navigation also allows you to use 2 kinds of labels and badges - inline and absolute positioned. Both types can have left and right positions. To use inline label/badge, add .label-inline (.badge-*) class to the element, default placement is absolute top. To use left positioned elements, place it before text in inline version and add .*-left to the absolute positioned element.
Status mark
Instead of labels and badges, that should contain text by default navbar component supports status 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 .bg-* color classes. Both variations require .status-mark class by default. Also these indicators support left/right alignment and static/absolute positioning.
Navbar buttons
Add the .navbar-btn class to <button> elements not residing in a <form> to vertically center them in the navbar. Button groups and button dropdowns in different colors and styles are supported as well. All button sizes are allowed, except .btn-lg, xlg, xxlg classes, large buttons look too big in mini navbar size.
Navbar text
Wrap strings of text in an element with .navbar-text, usually on a <p> tag for proper leading and color. For folks using standard links that are not within the regular navbar navigation component, use the .navbar-link class to add the proper colors for the default and inverse navbar options.
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 sizes, except .large and all possible stylings: colors, animations, labels, appearance etc. Also you can add text and icon labels to display current action, available in both left and right positions.
Place form content within .navbar-form for proper vertical alignment and collapsed behavior in narrow viewports. Use the alignment options to decide where it resides within the navbar content. As a heads up, .navbar-form shares much of its code with .form-inline via mixin. Some form controls, like input groups, may require fixed widths to be show up properly within a navbar.
Basic form controls
Input group, file select
Input with icons
Select2 select
Multiselect select
Checkboxes and radios
Switchery toggles