--- title: Level layout: documentation doc-tab: layout doc-subtab: level --- {% capture nav_example %} {% endcapture %} {% capture nav_centered_example %} {% endcapture %} {% capture nav_centered_bis_example %} {% endcapture %} {% capture nav_mobile_example %} {% endcapture %} {% include subnav-layout.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.

{% include snippet.html content=nav_example horizontal=true more=true %} {% include anchor.html name="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.
{% include snippet.html content=nav_centered_example horizontal=true more=true %} {% include snippet.html content=nav_centered_bis_example horizontal=true more=true %} {% include anchor.html name="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.
{% include snippet.html content=nav_mobile_example horizontal=true more=true %}