{% endcapture %}
{% capture navbar_js_code %}
document.addEventListener('DOMContentLoaded', () => {
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach( el => {
el.addEventListener('click', () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
});
{% endcapture %}
{% capture navbar_jquery_code %}
$(document).ready(function() {
// Check for click events on the navbar burger icon
$(".navbar-burger").click(function() {
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
$(".navbar-burger").toggleClass("is-active");
$(".navbar-menu").toggleClass("is-active");
});
});
{% endcapture %}
{% capture navbar_color_markup %}
{% endcapture %}
The navbar component is a responsive and versatile horizontal navigation bar with the following structure:
navbar the main container
navbar-brand the left side, always visible, which usually contains the logo and optionally some links or icons
navbar-burger the hamburger icon, which toggles the navbar menu on touch devices
navbar-menu the right side, hidden on touch devices, visible on desktop
navbar-start the left part of the menu, which appears next to the navbar brand on desktop
navbar-end the right part of the menu, which appears at the end of the navbar
navbar-item each single item of the navbar, which can either be an a or a div
navbar-link a link as the sibling of a dropdown, with an arrow
navbar-dropdown the dropdown menu, which can include navbar items and dividers
navbar-divider a horizontal line to separate navbar items
{% include elements/anchor.html name="Basic Navbar" %}
To get started quickly, here is what a complete basic navbar looks like:
{{ navbar_basic_example }}
{% highlight html %}{{ navbar_basic_example }}{% endhighlight %}
{% include elements/anchor.html name="Navbar brand" %}
The navbar-brand is the left side of the navbar. It can contain:
a number of navbar-item
the navbar-burger as last child
{% highlight html %}{{navbar_brand_example}}{% endhighlight %}
The navbar brand is always visible: on both touch devices {% include bp/touch.html %} and desktop {% include bp/desktop.html %}. As a result, it is recommended to only use a few navbar items to avoid overflowing horizontally on small devices.
{{navbar_brand_items_example}}
{% highlight html %}{{navbar_brand_items_example}}{% endhighlight %}
On desktop {% include bp/desktop.html %}, the navbar brand will only take up the space it needs.
{% include elements/anchor.html name="Navbar burger" %}
The navbar-burger is a hamburger menu that only appears on touch devices. It has to appear as the last child of navbar-brand. It has to contain three empty span tags in order to visualize the hamburger lines or the cross (when active).
{% highlight html %}{{ navbar_burger_example }}{% endhighlight %}
You can add the modifier class is-active to turn it into a cross.
{% include elements/anchor.html name="Navbar menu" %}
The navbar-menu is the counterpart of the navbar brand. As such, it must appear as a direct child of navbar, as a sibling of navbar-brand.
{% highlight html %}{{navbar_menu_example}}{% endhighlight %}
The navbar-menu is hidden on touch devices {% include bp/touch.html %}. You need to add the modifier class is-active to display it.
{% highlight html %}{{navbar_menu_active_example}}{% endhighlight %}
On desktop {% include bp/desktop.html %}, the navbar-menu will fill up the space available in the navbar, leaving the navbar brand just the space it needs. It needs, however, two elements as direct children:
navbar-start
navbar-end
Javascript toggle
The Bulma package does not come with any JavaScript.
Here is however an implementation example, which toggles the class is-active on both the navbar-burger and the targeted navbar-menu, in Vanilla Javascript.
And here is another implementation example, which again toggles the class is-active on both the navbar-burger and the targeted navbar-menu, but this time in jQuery.
Remember, these are just implementation examples. The Bulma package does not come with any JavaScript.
{% include elements/anchor.html name="Navbar start and navbar end" %}
The navbar-start and navbar-end are the two direct and only children of the navbar-menu.
On desktop {% include bp/desktop.html %}:
navbar-start will appear on the left
navbar-end will appear on the right
Each of them can contain any number of navbar-item.
{% highlight html %}{{navbar_start_end_example}}{% endhighlight %}
{% include elements/anchor.html name="Navbar item" %}
A navbar-item is a repeatable element that can be:
a navigation link
{% highlight html %}{{ navbar_item_link_example }}{% endhighlight %}
a container for the brand logo
{% highlight html %}{{ navbar_item_brand_example }}{% endhighlight %}
the parent of a dropdown menu
{% highlight html %}{{ navbar_item_dropdown_example }}{% endhighlight %}
a child of a navbar dropdown
{% highlight html %}{{ navbar_item_dropdown_bis_example }}{% endhighlight %}
a container for almost anything you want, like a field
{% highlight html %}{{ navbar_item_other_example }}{% endhighlight %}
It can either be an anchor tag <a> or a <div>, as a direct child of either:
navbar
navbar-brand
navbar-start
navbar-end
navbar-dropdown
You can add the following modifier classes:
is-expanded to turn it into a full-width element
is-tab to add a bottom border on hover and show the bottom border using is-active
{% include elements/anchor.html name="Transparent navbar" %}
To seamlessly integrate the navbar in any visual context, you can add the is-transparent modifier on the navbar component. This will remove any hover or active background from the navbar items.
{% include elements/snippet.html content=navbar_transparent_example paddingless=true horizontal=true more=true %}
{% include elements/anchor.html name="Fixed navbar" %}
You can now fix the navbar to either the top or bottom of the page. This is a 2-step process:
Add either is-fixed-top or is-fixed-bottom to the navbar component
{% highlight html %}
Add the corresponding has-navbar-fixed-top or has-navbar-fixed-bottom modifier to either <html> or <body> element to provide the appropriate padding to the page
{% highlight html %}{% endhighlight %}
{% include elements/anchor.html name="Dropdown menu" %}
To create a dropdown menu, you will need 4 elements:
navbar-item with the has-dropdown modifier
navbar-link which contains the dropdown arrow
navbar-dropdown which can contain instances of navbar-item and navbar-divider
{{ navbar_dropdown_example }}
{% highlight html %}{{ navbar_dropdown_example }}{% endhighlight %}
Show/hide the dropdown with either CSS or JavaScript
The navbar-dropdown is visible on touch devices {% include bp/touch.html %} but hidden on desktop {% include bp/desktop.html %}. How the dropdown is displayed on desktop depends on the parent's class.
The navbar-item with the has-dropdown modifier, has 2 additional modifiers
is-hoverable: the dropdown will show up when hovering the parent navbar-item
is-active: the dropdown will show up all the time
While the CSS :hover implementation works perfectly, the is-active class is available for users who want to control the display of the dropdown with JavaScript.
{% highlight html %}{{ navbar_dropdown_hover_snippet }}{% endhighlight %}
{{ navbar_dropdown_hover_example }}
{% highlight html %}{{ navbar_dropdown_hover_example }}{% endhighlight %}
{% highlight html %}{{ navbar_dropdown_active_snippet }}{% endhighlight %}
{{ navbar_dropdown_active_example }}
{% highlight html %}{{ navbar_dropdown_active_example }}{% endhighlight %}
Right dropdown
If your parent navbar-item is on the right side, you can position the dropdown to start from the right with the is-right modifier.
{% highlight html %}{{ navbar_dropdown_right_snippet }}{% endhighlight %}
{{ navbar_dropdown_right_example }}
{% highlight html %}{{ navbar_dropdown_right_example }}{% endhighlight %}
Dropup
If you're using a navbar at the bottom, like the fixed bottom navbar, you might want to use a dropup menu. Simply add the has-dropdown and has-dropdown-up modifiers to the parent navbar-item.
{% highlight html %}{{ navbar_dropup_snippet }}{% endhighlight %}
{{ navbar_dropup_example }}
{% highlight html %}{{ navbar_dropup_example }}{% endhighlight %}
