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
Reference: https://bulma.io/documentation/components/menu