Skip to content
Related Articles
Open in App
Not now

Related Articles

Bulma Menu

Improve Article
Save Article
  • Last Updated : 12 Feb, 2022
Improve Article
Save Article

Bulma is a free and open-source CSS framework based on Flexbox. It is component-rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design. 

The Bulma framework provides the menu component that can be used as a type of vertical navigation. This component is useful for those websites that want to add vertical navigation. The Bulma menu consists of three things i.e., menu container, menu labels, and menu list. The classes of the Bulma menu are discussed below.

Bulma Menu Classes:

  • menu: This class is used as a container for the menu component.
  • menu-label: This class is used for adding a label for the lists in the menu component.
  • menu-list: This class is used for adding a list of items inside the menu component.

Syntax:

<aside class="menu">
  <p class="menu-label">Home</p>
  <ul class="menu-list">
    <li><a>Practice</a></li>
    <li><a>Tutorial</a></li>
    ...
  </ul>
  ...
</aside>

Example: Below example illustrates the Bulma menu component.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" 
          href=
</head>
  
<body>
    <div class="container content">
        <h1 class="title has-text-success">
            GeeksforGeeks
        </h1>
        <h2 class="subtitle">Bulma Menu</h2>
        <aside class="menu">
            <p class="menu-label">Home</p>
  
            <ul class="menu-list">
                <li><a>About us</a></li>
                <li><a>Careers</a></li>
            </ul>
            <p class="menu-label">Tutorial</p>
  
            <ul class="menu-list">
                <li><a>Interview Prep</a></li>
                <li>
                    <a class="is-active 
                              has-background-primary">
                      Programming Languages
                    </a>
                    <ul>
                        <li><a>Go Lang</a></li>
                        <li><a>C#</a></li>
                        <li><a>Python</a></li>
                    </ul>
                </li>
                <li><a>Data Structures</a></li>
                <li><a>Web Tech</a></li>
                <li><a>Machine Learning</a></li>
            </ul>
            <p class="menu-label">Courses</p>
  
            <ul class="menu-list">
                <li><a>Java</a></li>
                <li><a>Python</a></li>
                <li><a>C++</a></li>
            </ul>
        </aside>
    </div>
</body>
  
</html>


Output:

Bulma Menu

Bulma Menu

Reference: https://bulma.io/documentation/components/menu


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!