Bulma Vertical Menu

To create a Bulma vertical menu, follow the following steps.

It consists of a menu container.
It also contains informative menu-label labels.
The interactive menu-list lists that can be nested up to 2 levels.

General Syntax

      
        <aside class="menu">
  <p class="menu-label">
   Menu Label
  </p>
  <ul class="menu-list">
    <li><a>Menu List 1</a></li>
    <li><a>Menu List 2</a></li>
  </ul>
</aside>

Try it now

Source Code

          
            <aside class="menu">
  <p class="menu-label">Front-end Development</p>
  <ul class="menu-list">
    <li><a>HTML5</a></li>
    <li><a>CSS3</a></li>
  </ul>
  <p class="menu-label">Back-end Development</p>
  <ul class="menu-list">
    <li><a>Back-end Technology</a></li>
    <li>
      <a class="is-active">Server Technology</a>
      <ul>
        <li><a>PHP</a></li>
        <li><a>JSP</a></li>
        <li><a>Ruby</a></li>
        <li><a>Python</a></li>
      </ul>
    </li>
  </ul>
</aside>

Try it now

Source Code : Output

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4