A multi-purpose horizontal level, which can contain almost any other element
{%
include meta.html
colors=false
sizes=false
variables=false
%}
The structure of a level is the following:
level: main container
level-left for the left side. This element is required, even if it is empty
level-right for the right side
level-item for each individual element
In a level-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 level, they will always be vertically centered.
{% capture nav_example %}
{% endcapture %}
{{nav_example}}
{% highlight html %}
{{nav_example}}
{% endhighlight %}
Centered level
If you want a centered level, you can use as many level-item as you want, as long as they are direct children of the level container.
{% highlight html %}
{{nav_centered_example}}
{% endhighlight %}
{{nav_centered_bis_example}}
{% highlight html %}
{{nav_centered_bis_example}}
{% endhighlight %}
Mobile level
By default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as well, add the is-mobile modifier on the level container.
{% capture nav_mobile_example %}
{% endcapture %}
{{nav_mobile_example}}
{% highlight html %}
{{nav_mobile_example}}
{% endhighlight %}