Bulma Navbar Menu
Last Updated :
20 Feb, 2022
Bulma is an open-source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive, minimizing the use of media queries for responsive behavior.
Navbar is the horizontal bar that has items, links, buttons, etc. It has a navbar menu that consists of menu items. It is the sibling of the navbar brand. The navbar menu is invisible in touch devices lesser than 1024 px. If we want to show this menu on touch devices too then we need to add an is-active class.
Bulma Navbar Menu Classes:
- navbar-menu: This is the class used to set the navigation bar menu.
- navbar-brand: This is the class used to set the navigation bar logo.
- navbar-start: This is the class used to set the start or left part of the navigation bar.
- navbar-end: This is the class used to set the end or right part of the navigation bar.
Syntax:
<nav class="navbar">
<div class="navbar-menu-class">
<!-- menu items -->
</div>
</nav>
For touch devices or mobile devices:
<div class="navbar-menu is-active">
<!-- visible in mobile devices too -->
</div>
Example 1: Suppose we want to create a navbar menu with some items and a logo, then we can easily use the navbar-brand class (for logo) and navbar-menu. The navbar-menu is divided into two parts i.e navbar-start and navbar-end. The navbar-start is the left part of the navbar-menu and the navbar-end is the right part of the menu.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Navbar Basic</title>
<link rel='stylesheet' href=
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<b class="is-size-4">Bulma Navbar Menu </b>
<nav class="navbar" role="navigation"
aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item"
<img src=
width="112" height="28" alt="GFG">
</a>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" >Item1</a>
<a class="navbar-item" >Item2</a>
<a class="navbar-item" >Item3</a>
<a class="navbar-item" >Item4</a>
<a class="navbar-item" >Item5</a>
</div>
<div class="navbar-end">
<a class="navbar-item" >Item5</a>
<a class="navbar-item" >Item6</a>
<a class="navbar-item" >Item7</a>
</div>
</div>
</nav>
</body>
</html>
|
Output:
Example 2: When we want to show this navbar menu on touch devices or mobile devices whose screen size is small then use the is-active modifier class in the navbar-menu div.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Navbar Basic</title>
<link rel='stylesheet' href=
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<b class="is-size-4">Bulma Navbar Menu </b>
<nav class="navbar" role="navigation"
aria-label="main navigation">
<div class="navbar-brand">
<img src=
width="112" height="28" alt="GFG">
</a>
</div>
<div class="navbar-menu is-active">
<div class="navbar-start">
<a class="navbar-item" >GFG1</a>
<a class="navbar-item" >GFG2</a>
<a class="navbar-item" >GFG3</a>
<a class="navbar-item" >GFG4</a>
<a class="navbar-item" >GFG5</a>
<a class="navbar-item" >GFG6</a>
</div>
</div>
</nav>
</body>
</html>
|
Output:
using is-active modifier class
Reference link: https://bulma.io/documentation/components/navbar/#navbar-menu
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...