You are viewing the deprecated 0.9.1 version of the website. Click here to view the latest version

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

Made with Bulma
This page is open source. Noticed a typo? Or something unclear?
Improve this page on GitHub

#native_company# #native_desc#
#native_cta#
New!

The official Bulma book! 😲

by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,
Mikko Lauhakari, Aslam Shah and David Berning

A step-by-step guide that teaches you how to build a web interface from scratch using Bulma.

Formats available:
PDF Epub Mobi
or
Kindle

Newsletter

Features, releases, showcase… stay in the loop!