Creating the navigation bar

Bulma comes with a flexible responsive navbar. You will use it to display a few elements:

• Company’s logo, which will act as a home link
• Navigation’s mobile burger icon
• Company’s tagline
• User’s name
• Dropdown menu with a few items: link to the user profile, a button to report a bug, and a link to sign out

<nav class="navbar has-shadow">
  <div class="navbar-brand">
    <!-- Logo, tagline, and navbar-burger -->
  </div>

  <div class="navbar-menu">
    <!-- User name, dropdown menu -->
  </div>
</nav>

The navigation’s branding

In the navigation bar, you’ll want to display the logo of the company. You want this visible at all times across all devices. There’s no need to write any custom CSS. As you’ve probably guessed by now, you can use Bulma with component classes.

The navbar-brand lives on the left side of the navbar. It...