Navbar
A responsive horizontal navbar that can supports images, links, buttons, and dropdowns
{%
include meta.html
new=true
since="0.4.3"
colors=false
sizes=false
variables=true
%}
The new navbar replaces the deprecated nav component, whose documentation you can still access temporarily here.
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 a 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
{{navbar_example}}
{% highlight html %}{{navbar_example}}{% endhighlight %}
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.
Navbar burger
The navbar-burger is a hamburger menu that only appears on mobile. It has to appear as the last child of navbar-brand.
{% highlight html %}{{ navbar_burger_example }}{% endhighlight %}
You can add the modifier class is-active to turn it into a cross.
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:
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.
{% highlight html %}{{ navbar_js_html }}{% endhighlight %}
{% highlight javascript %}{{ navbar_js_code }}{% endhighlight %}
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 %}
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
Transparent navbar
To seamlessly integrate the navbar in any visual context, you can add the is-transparent modifer on the navbar component. This will remove any hover or active background from the navbar items.
{{navbar_transparent_example}}
{% highlight html %}{{navbar_transparent_example}}{% endhighlight %}
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.
{{ navbar_dropdown_hover_example }}
{% highlight html %}{{ navbar_dropdown_hover_example }}{% endhighlight %}
{{ navbar_dropdown_active_example }}
{% highlight html %}{{ navbar_dropdown_active_example }}{% endhighlight %}
Styles for the dropdown menu
By default, the navbar-dropdown has:
-
a grey
border-top
-
a
border-radius at both bottom corners
{{ navbar_dropdown_default_example }}
{% highlight html %}{{ navbar_dropdown_default_example }}{% endhighlight %}
When having a transparent navbar, it is preferable to use the boxed version of the dropdown, by using the is-boxed modifier.
-
the grey border is removed
-
a slight inner shadow is added
-
all corners are rounded
-
the hover/active state is animated
{{ navbar_dropdown_boxed_example }}
{% highlight html %}{{ navbar_dropdown_boxed_example }}{% endhighlight %}
Active dropdown navbar item
{{ navbar_dropdown_item_active_example }}
{% highlight html %}{{ navbar_dropdown_item_active_example }}{% endhighlight %}
Dropdown divider
You can add a navbar-divider to display a horizontal rule in a navbar-dropdown.
{% highlight html %}{{ navbar_divider_example }}{% endhighlight %}
{% include variables.html %}