#### Navbars - Components

Statistics Invoices Schedule

##### Custom components

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

Date range picker

Language selector

##### Navbar navigation

###### 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.

##### Basic components

###### 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.

##### Form components

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

Checkboxes and radios

Switchery toggles