The nav container can have 3 parts:
nav-leftnav-centernav-rightEach nav item needs to be wrapped in a nav-item element.
For responsiveness, 2 additional classes are available:
nav-toggle for the hamburger menu on mobilenav-menu for menu that is collapsable on mobile (you can combine it with nav-right)
is-active on nav-toggle and nav-menu when
nav-toggle was clicked
<nav class="nav">
<div class="nav-left">
<a class="nav-item">
<img src="https://bulma.io/assets/images/bulma-logo.png" alt="Bulma logo" />
</a>
</div>
<div class="nav-center">
<a class="nav-item">
<span class="icon">
<i class="fab fa-github"></i>
</span>
</a>
<a class="nav-item">
<span class="icon">
<i class="fab fa-twitter"></i>
</span>
</a>
</div>
<!-- This "nav-toggle" hamburger menu is only visible on mobile -->
<!-- You need JavaScript to toggle the "is-active" class on "nav-menu" -->
<span class="nav-toggle">
<span></span>
<span></span>
<span></span>
<span></span>
</span>
<!-- This "nav-menu" is hidden on mobile -->
<!-- Add the modifier "is-active" to display it on mobile -->
<div class="nav-right nav-menu">
<a class="nav-item"> Home </a>
<a class="nav-item"> Documentation </a>
<a class="nav-item"> Blog </a>
<div class="nav-item">
<div class="field is-grouped">
<p class="control">
<a class="button">
<span class="icon">
<i class="fab fa-twitter"></i>
</span>
<span>Tweet</span>
</a>
</p>
<p class="control">
<a class="button is-primary">
<span class="icon">
<i class="fas fa-download"></i>
</span>
<span>Download</span>
</a>
</p>
</div>
</div>
</div>
</nav>
nav container can have a shadow by adding the
has-shadow modifier
nav-item can become active by adding the is-active modifier
nav-item can become a tab by adding the is-tab modifier
To optimise the space on desktop, but also allow the mobile view to be usable, you can
duplicate nav items in both nav-left and nav-right, and show/hide
them with responsive helpers.
<nav class="nav has-shadow">
<div class="container">
<div class="nav-left">
<a class="nav-item">
<img src="https://bulma.io/assets/images/bulma-logo.png" alt="Bulma logo" />
</a>
<a class="nav-item is-tab is-hidden-mobile is-active">Home</a>
<a class="nav-item is-tab is-hidden-mobile">Features</a>
<a class="nav-item is-tab is-hidden-mobile">Pricing</a>
<a class="nav-item is-tab is-hidden-mobile">About</a>
</div>
<span class="nav-toggle">
<span></span>
<span></span>
<span></span>
<span></span>
</span>
<div class="nav-right nav-menu">
<a class="nav-item is-tab is-hidden-tablet is-active">Home</a>
<a class="nav-item is-tab is-hidden-tablet">Features</a>
<a class="nav-item is-tab is-hidden-tablet">Pricing</a>
<a class="nav-item is-tab is-hidden-tablet">About</a>
<a class="nav-item is-tab">
<figure class="image is-16x16" style="margin-right: 8px">
<img src="https://bulma.io/assets/images/jgthms.png" />
</figure>
Profile
</a>
<a class="nav-item is-tab">Log out</a>
</div>
</div>
</nav>