--- layout: documentation doc-tab: components doc-subtab: level --- {% include subnav-components.html %}

Level

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


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.
{% capture nav_centered_example %} {% endcapture %} {% capture nav_centered_bis_example %} {% endcapture %}
{{nav_centered_example}}
{% 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 %}