--- layout: documentation doc-tab: navbar ---

# Navbar

## A multi-purpose horizontal navbar, which can contain almost any other element

The structure of a navbar is the following:

- `navbar`: main container
  - `navbar-left` for the left side
  - `navbar-right` for the right side
    - `navbar-item` for each individual element

In a `navbar-item`, you can then insert almost anything you want: a title, a button, a text input, or just simple text. No matter what elements you put inside a Bulma `navbar`, they will always be vertically aligned.

{% highlight html %}
{% endhighlight %}

### Centered navbar

If you want a centered navbar, you can use as many `navbar-item` as you want, as long as they are direct children of the `navbar` container.
{% highlight html %}
{% endhighlight %}
{% highlight html %}
{% endhighlight %}

### Mobile navbar

By default, for space concerns, the navbar is vertical on mobile. If you want the navbar to be horizontal on mobile as well, add the `is-mobile` modifier on the `navbar` container.