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 a horizontal navigation bar that has navbar items, buttons, dropdown menu, etc.

Bulma Navbar structure classes:

• navbar: It is the main component.
• navbar-brand: We can place the logo using this class.
• navbar-burger: It is also called the hamburger icon in the left corner of the navbar.
• navbar-menu: The right part of the screen is visible only in desktop mode.
• navbar-item: Items in the navigation bar are shown using this class.
• navbar-link: This class is used to set the links to other routes.
• navbar-dropdown: This class is used to set the dropdown menu.
• navbar-divider: This class is used to set the horizontal line that can separate the navbar items from each other.

Syntax:

<nav class="navbar">
    <div class="...">
        ...
    </div>
</nav>

Example 1: Suppose we want to create a navbar that has a logo in the left part and has some items, a dropdown menu then we can create using the above classes. The following code demonstrates a basic navigation bar using the navbar components classes.

Output:

Bulma Basic Navbar

Example 2: The following code demonstrates the navigation bar as shown in the above code along with the navbar-end class.

Output:

Bulma Basic Navbar

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