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. The two types of navbar helper classes are spacing and shading and both are discussed are below with their examples.
Bulma Navbar helper classes:
- is-spaced: This class is used to add padding in the navbar component. It sets the padding of the navbar from top and bottom with 1rem and in left and right with 2rem sizes.
- has-shadow: This class is used to add a shadow around the navbar component.
Syntax:
<nav class="navbar is-spaced">
...
</nav>Example 1: Below example illustrates the Navbar is-spaced helper class. Notice the space around the navbar component in the output.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<link
rel="stylesheet" href=
/>
</head>
<body>
<div class="container">
<!-- Navbar Starts here -->
<nav
class="navbar is-light is-spaced"
role="navigation"
aria-label="main navigation"
>
<!-- Navbar Brand containing the Heading -->
<div class="navbar-brand">
<a class="navbar-item has-background-success" href="#">
<h1 class="has-text-white">GeeksforGeeks</h1>
</a>
<!-- Burger Icons for responsive navbar -->
<a
role="button"
class="navbar-burger"
aria-label="menu"
aria-expanded="false"
data-target="navbarBasicExample"
>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<!-- Navbar Menu containing a list of items -->
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item"> Home </a>
<a class="navbar-item"> Blogs </a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link"> More </a>
<div class="navbar-dropdown">
<a class="navbar-item"> About us </a>
<a class="navbar-item"> Tutorials </a>
<a class="navbar-item"> Practice </a>
</div>
</div>
</div>
<!-- Navbar End containing Sign Up
and Sign In Buttons -->
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-success">
<strong>Sign up</strong>
</a>
<a class="button is-light"> Log in </a>
</div>
</div>
</div>
</div>
</nav>
</div>
</body>
</html>
|
Output:
Example 2: Below example illustrates the Navbar has-shadow helper class.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href=
/>
</head>
<body>
<div class="container">
<!-- Navbar Starts here -->
<nav
class="navbar is-light has-shadow"
role="navigation"
aria-label="main navigation">
<!-- Navbar Brand containing the Heading -->
<div class="navbar-brand">
<a class="navbar-item has-background-success" href="#">
<h1 class="has-text-white">GeeksforGeeks</h1>
</a>
<!-- Burger Icons for responsive navbar -->
<a
role="button"
class="navbar-burger"
aria-label="menu"
aria-expanded="false"
data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<!-- Navbar Menu containing a list of items -->
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item"> Home </a>
<a class="navbar-item"> Blogs </a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link"> More </a>
<div class="navbar-dropdown">
<a class="navbar-item"> About us </a>
<a class="navbar-item"> Tutorials </a>
<a class="navbar-item"> Practice </a>
</div>
</div>
</div>
<!-- Navbar End containing Sign Up
and Sign In Buttons -->
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-success">
<strong>Sign up</strong>
</a>
<a class="button is-light"> Log in </a>
</div>
</div>
</div>
</div>
</nav>
</div>
</body>
</html>
|
Output:
Reference: https://bulma.io/documentation/components/navbar/#navbar-helper-classes