1. Design System
  2. Layout
  3. Level

Level

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

<!-- Main container -->
<nav class="level">
    <!-- Left side -->
    <div class="level-left">
        <div class="level-item">
            <p class="subtitle is-5"><strong>123</strong> posts</p>
        </div>
        <div class="level-item">
            <div class="field has-addons">
                <div class="control cf-colunm cf-input-colunm"><input class="cf-input" type="text" placeholder="Find a post"></div>
                <div class="control cf-colunm cf-search-column"><button class="cf-search">Search <i class="cf-search-icon fa fa-search"></i></button></div>
            </div>
        </div>
    </div>
    <!-- Right side -->
    <div class="level-right">
        <p class="level-item"><strong>All</strong></p>
        <p class="level-item"><a>Published</a></p>
        <p class="level-item"><a>Drafts</a></p>
        <p class="level-item"><a>Deleted</a></p>
        <p class="level-item"><a class="button is-dark">New</a></p>
    </div>
</nav>

The structure of a level is the following:

  • level: main container
    • level-left for the left side
    • 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.

Centred level

If you want a centred level, you can use as many level-item as you want, as long as they are direct children of the level container.

<nav class="level">
    <p class="level-item has-text-centered">
        <a class="link is-info">Home</a>
    </p>
    <p class="level-item has-text-centered">
        <a class="link is-info">Menu</a>
    </p>
    <p class="level-item has-text-centered">
        <img src="https://bulma.io/images/bulma-type.png" alt="" style="height: 30px;">
    </p>
    <p class="level-item has-text-centered">
        <a class="link is-info">Reservations</a>
    </p>
    <p class="level-item has-text-centered">
        <a class="link is-info">Contact</a>
    </p>
</nav>

Accessibility

N/A