Get 20% off with code BULMA
Valid until the end of November 2024
Download

Sponsor

Route Planner and Route Optimizer

Menu


A simple menu, for any type of vertical navigation

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

HTML

<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>

Sass and CSS variables #

Sass Variable
CSS Variable
Value
$menu-item-radius
var(--bulma-menu-item-radius)
var(--bulma-radius-small)
$menu-list-border-left
var(--bulma-menu-list-border-left)
1px solid var(--bulma-border)
$menu-list-line-height
var(--bulma-menu-list-line-height)
1.25
$menu-list-link-padding
var(--bulma-menu-list-link-padding)
0.5em 0.75em
$menu-nested-list-margin
var(--bulma-menu-nested-list-margin)
0.75em
$menu-nested-list-padding-left
var(--bulma-menu-nested-list-padding-left)
0.75em
$menu-label-color
var(--bulma-menu-label-color)
var(--bulma-text-weak)
$menu-label-font-size
var(--bulma-menu-label-font-size)
0.75em
$menu-label-letter-spacing
var(--bulma-menu-label-letter-spacing)
0.1em
$menu-label-spacing
var(--bulma-menu-label-spacing)
1em

How to support Bulma

#native_company# #native_desc#
#native_cta#
Get started for Free
Get started for Free