Navbar Kit

The Navbar KIT provides a large range of elements compatible with any navbar component, starting with simple menus and dropdowns, to form elements, toggle buttons and other custom widget areas such as notifications, messages, files and more.

{% include "lib/navbar/html/navbar/_simple_dropdown.html" { skin: "default" } %} {% include "lib/navbar/html/navbar/_hover.html" { skin: "default" } %} {% include "lib/navbar/html/navbar/_login.html" { skin: "default" } %} {% include "lib/navbar/html/navbar/_signup.html" { skin: "default" } %} {% include "lib/navbar/html/navbar/_datepicker.html" { skin: "default" } %} {% include "lib/navbar/html/navbar/_notifications.html" { skin: "default" } %} {% include "lib/navbar/html/navbar/_messages.html" { skin: "default" } %} {% include "lib/navbar/html/navbar/_files.html" { skin: "default" } %} {% include "lib/navbar/html/navbar/_user.html" { skin: "default" } %} {% include "lib/navbar/html/navbar/_country_flags.html" { skin: "default" } %} {% include "lib/navbar/html/navbar/_toggle.html" { skin: "default" } %} {% include "lib/navbar/html/navbar/_simple_menu.html" { skin: "default" } %} {% include "lib/navbar/html/navbar/_buttons.html" { skin: "default" } %} {% include "lib/navbar/html/navbar/_brand_text.html" { skin: "default" } %} {% include "lib/navbar/html/navbar/_brand_image.html" { skin: "default" } %} {% include "lib/navbar/html/navbar/_search_1.html" { skin: "default" } %} {% include "lib/navbar/html/navbar/_search_2.html" { skin: "default" } %} {% include "lib/navbar/html/navbar/_radio.html" { skin: "default" } %} {% include "lib/navbar/html/navbar/_checkbox.html" { skin: "default" } %} {% include "lib/navbar/html/navbar/_checkbox_switch.html" { skin: "default" } %} {% include "lib/navbar/html/navbar/_slider.html" { skin: "default" } %}

Primary Skin

To use the primary skin, simply apply the .navbar-primary class on the main navbar container.

{% include "lib/navbar/html/navbar/_simple_dropdown.html" { skin: "primary", id: 1 } %} {% include "lib/navbar/html/navbar/_hover.html" { skin: "primary", id: 1 } %} {% include "lib/navbar/html/navbar/_login.html" { skin: "primary", id: 1 } %} {% include "lib/navbar/html/navbar/_signup.html" { skin: "primary", id: 1 } %} {% include "lib/navbar/html/navbar/_datepicker.html" { skin: "primary", id: 1 } %} {% include "lib/navbar/html/navbar/_notifications.html" { skin: "primary", id: 1 } %} {% include "lib/navbar/html/navbar/_messages.html" { skin: "primary", id: 1 } %} {% include "lib/navbar/html/navbar/_files.html" { skin: "primary", id: 1 } %} {% include "lib/navbar/html/navbar/_user.html" { skin: "primary", id: 1 } %} {% include "lib/navbar/html/navbar/_country_flags.html" { skin: "primary", id: 1 } %} {% include "lib/navbar/html/navbar/_toggle.html" { skin: "primary" } %} {% include "lib/navbar/html/navbar/_simple_menu.html" { skin: "primary", id: 1 } %} {% include "lib/navbar/html/navbar/_buttons.html" { skin: "primary", id: 1 } %} {% include "lib/navbar/html/navbar/_brand_text.html" { skin: "primary" } %} {% include "lib/navbar/html/navbar/_brand_image.html" { skin: "primary" } %} {% include "lib/navbar/html/navbar/_search_1.html" { skin: "primary", id: 1 } %} {% include "lib/navbar/html/navbar/_search_2.html" { skin: "primary", id: 1 } %} {% include "lib/navbar/html/navbar/_radio.html" { skin: "primary", id: 1 } %} {% include "lib/navbar/html/navbar/_checkbox.html" { skin: "primary", id: 1 } %} {% include "lib/navbar/html/navbar/_checkbox_switch.html" { skin: "primary", id: 1 } %} {% include "lib/navbar/html/navbar/_slider.html" { skin: "primary", id: 1 } %}

Small Navbar

To use the small navbar, simply apply the .navbar-size-small class on the main navbar container.

{% include "lib/navbar/html/navbar/_simple_dropdown.html" { skin: "default navbar-size-small", id: "small" } %} {% include "lib/navbar/html/navbar/_hover.html" { skin: "default navbar-size-small", id: "small" } %} {% include "lib/navbar/html/navbar/_login.html" { skin: "default navbar-size-small", id: "small" } %} {% include "lib/navbar/html/navbar/_signup.html" { skin: "default navbar-size-small", id: "small" } %} {% include "lib/navbar/html/navbar/_datepicker.html" { skin: "default navbar-size-small", id: "small" } %} {% include "lib/navbar/html/navbar/_notifications.html" { skin: "default navbar-size-small", id: "small" } %} {% include "lib/navbar/html/navbar/_messages.html" { skin: "default navbar-size-small", id: "small" } %} {% include "lib/navbar/html/navbar/_files.html" { skin: "default navbar-size-small", id: "small" } %} {% include "lib/navbar/html/navbar/_user.html" { skin: "default navbar-size-small", id: "small" } %} {% include "lib/navbar/html/navbar/_country_flags.html" { skin: "default navbar-size-small", id: "small" } %} {% include "lib/navbar/html/navbar/_toggle.html" { skin: "default navbar-size-small" } %} {% include "lib/navbar/html/navbar/_simple_menu.html" { skin: "default navbar-size-small", id: "small" } %} {% include "lib/navbar/html/navbar/_buttons.html" { skin: "default navbar-size-small", id: "small" } %} {% include "lib/navbar/html/navbar/_brand_text.html" { skin: "default navbar-size-small" } %} {% include "lib/navbar/html/navbar/_brand_image.html" { skin: "default navbar-size-small" } %} {% include "lib/navbar/html/navbar/_search_1.html" { skin: "default navbar-size-small", id: "small" } %} {% include "lib/navbar/html/navbar/_search_2.html" { skin: "default navbar-size-small", id: "small" } %} {% include "lib/navbar/html/navbar/_radio.html" { skin: "default navbar-size-small", id: "small" } %} {% include "lib/navbar/html/navbar/_checkbox.html" { skin: "default navbar-size-small", id: "small" } %} {% include "lib/navbar/html/navbar/_checkbox_switch.html" { skin: "default navbar-size-small", id: "small" } %} {% include "lib/navbar/html/navbar/_slider.html" { skin: "default navbar-size-small", id: "small" } %}

Large Navbar

To use the large navbar, simply apply the .navbar-size-large class on the main navbar container. Note that the large navbar applies only for medium to large screens and takes the default size for small and mobile screens.

{% include "lib/navbar/html/navbar/_simple_dropdown.html" { skin: "default navbar-size-large", id: "large" } %} {% include "lib/navbar/html/navbar/_hover.html" { skin: "default navbar-size-large", id: "large" } %} {% include "lib/navbar/html/navbar/_login.html" { skin: "default navbar-size-large", id: "large" } %} {% include "lib/navbar/html/navbar/_signup.html" { skin: "default navbar-size-large", id: "large" } %} {% include "lib/navbar/html/navbar/_datepicker.html" { skin: "default navbar-size-large", id: "large" } %} {% include "lib/navbar/html/navbar/_notifications.html" { skin: "default navbar-size-large", id: "large" } %} {% include "lib/navbar/html/navbar/_messages.html" { skin: "default navbar-size-large", id: "large" } %} {% include "lib/navbar/html/navbar/_files.html" { skin: "default navbar-size-large", id: "large" } %} {% include "lib/navbar/html/navbar/_user.html" { skin: "default navbar-size-large", id: "large" } %} {% include "lib/navbar/html/navbar/_country_flags.html" { skin: "default navbar-size-large", id: "large" } %} {% include "lib/navbar/html/navbar/_toggle.html" { skin: "default navbar-size-large" } %} {% include "lib/navbar/html/navbar/_simple_menu.html" { skin: "default navbar-size-large", id: "large" } %} {% include "lib/navbar/html/navbar/_buttons.html" { skin: "default navbar-size-large", id: "large" } %} {% include "lib/navbar/html/navbar/_brand_text.html" { skin: "default navbar-size-large" } %} {% include "lib/navbar/html/navbar/_brand_image.html" { skin: "default navbar-size-large" } %} {% include "lib/navbar/html/navbar/_search_1.html" { skin: "default navbar-size-large", id: "large" } %} {% include "lib/navbar/html/navbar/_search_2.html" { skin: "default navbar-size-large", id: "large" } %} {% include "lib/navbar/html/navbar/_radio.html" { skin: "default navbar-size-large", id: "large" } %} {% include "lib/navbar/html/navbar/_checkbox.html" { skin: "default navbar-size-large", id: "large" } %} {% include "lib/navbar/html/navbar/_checkbox_switch.html" { skin: "default navbar-size-large", id: "large" } %} {% include "lib/navbar/html/navbar/_slider.html" { skin: "default navbar-size-large", id: "large" } %}