Menu

A simple menu, for any type of vertical navigation

Colors No
Sizes No
Variables Yes

The Bulma menu is a vertical navigation component that comprises:

  • the menu container
  • informative menu-label labels
  • interactive menu-list lists that can be nested up to 2 levels
<aside class="menu">
  <p class="menu-label">
    General
  </p>
  <ul class="menu-list">
    <li><a>Dashboard</a></li>
    <li><a>Customers</a></li>
  </ul>
  <p class="menu-label">
    Administration
  </p>
  <ul class="menu-list">
    <li><a>Team Settings</a></li>
    <li>
      <a class="is-active">Manage Your Team</a>
      <ul>
        <li><a>Members</a></li>
        <li><a>Plugins</a></li>
        <li><a>Add a member</a></li>
      </ul>
    </li>
    <li><a>Invitations</a></li>
    <li><a>Cloud Storage Environment Settings</a></li>
    <li><a>Authentication</a></li>
  </ul>
  <p class="menu-label">
    Transactions
  </p>
  <ul class="menu-list">
    <li><a>Payments</a></li>
    <li><a>Transfers</a></li>
    <li><a>Balance</a></li>
  </ul>
</aside>

Variables #

You can use these variables to customize this component. Simply set one or multiple of these variables before importing Bulma. Learn how.

Name Type Default value Computed value
Name Type Default value Computed value
$menu-item-color color $text hsl(0, 0%, 29%)
$menu-item-radius size $radius-small 2px
$menu-item-hover-color color $text-strong hsl(0, 0%, 21%)
$menu-item-hover-background-color color $background hsl(0, 0%, 96%)
$menu-item-active-color color $link-invert #fff
$menu-item-active-background-color color $link hsl(217, 71%, 53%)
$menu-list-border-left size 1px solid $border
$menu-list-line-height unitless 1.25
$menu-list-link-padding size 0.5em 0.75em
$menu-nested-list-margin size 0.75em
$menu-nested-list-padding-left size 0.75em
$menu-label-color color $text-light hsl(0, 0%, 48%)
$menu-label-font-size size 0.75em
$menu-label-letter-spacing size 0.1em
$menu-label-spacing size 1em