Bulma Navbar Helper Classes

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.

Output:

Example 2: Below example illustrates the Navbar has-shadow helper class.

Output:

Reference: https://bulma.io/documentation/components/navbar/#navbar-helper-classes