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" } %}