The navbar
component is a responsive and versatile horizontal navigation bar with the following structure:
navbar
the main container
navbar-brand
the left side , always visible , which usually contains the logo and optionally some links or icons
navbar-burger
the hamburger icon, which toggles the navbar menu on touch devices
navbar-menu
the right side , hidden on touch devices, visible on desktop
navbar-start
the left part of the menu, which appears next to the navbar brand on desktop
navbar-end
the right part of the menu, which appears at the end of the navbar
navbar-item
each single item of the navbar, which can either be an a
or a div
navbar-link
a link as the sibling of a dropdown, with an arrow
navbar-dropdown
the dropdown menu , which can include navbar items and dividers
navbar-divider
a horizontal line to separate navbar items
Navbar brand
#
The navbar-brand
is the left side of the navbar. It can contain:
a number of navbar-item
the navbar-burger
as last child
<nav class= "navbar" role= "navigation" aria-label= "main navigation" >
<div class= "navbar-brand" >
<!-- navbar items, navbar burger... -->
</div>
</nav>
The navbar brand is always visible : on both touch devices < 1024px
and desktop >= 1024px
. As a result, it is recommended to only use a few navbar items to avoid overflowing horizontally on small devices.
<nav class= "navbar" role= "navigation" aria-label= "main navigation" >
<div class= "navbar-brand" >
<a class= "navbar-item" href= "https://versions.bulma.io/0.7.1" >
<img src= "https://versions.bulma.io/0.7.1/images/bulma-logo.png" alt= "Bulma: a modern CSS framework based on Flexbox" width= "112" height= "28" >
</a>
<a role= "button" class= "navbar-burger" aria-label= "menu" aria-expanded= "false" >
<span aria-hidden= "true" ></span>
<span aria-hidden= "true" ></span>
<span aria-hidden= "true" ></span>
</a>
</div>
</nav>
On desktop >= 1024px
, the navbar brand will only take up the space it needs.
Navbar burger
#
The navbar-burger
is a hamburger menu that only appears on mobile . It has to appear as the last child of navbar-brand
.
<a role= "button" class= "navbar-burger" aria-label= "menu" aria-expanded= "false" >
<span aria-hidden= "true" ></span>
<span aria-hidden= "true" ></span>
<span aria-hidden= "true" ></span>
</a>
You can add the modifier class is-active
to turn it into a cross.
The navbar-menu
is the counterpart of the navbar brand. As such, it must appear as a direct child of navbar
, as a sibling of navbar-brand
.
<nav class= "navbar" role= "navigation" aria-label= "main navigation" >
<div class= "navbar-brand" >
<!-- navbar items, navbar burger... -->
</div>
<div class= "navbar-menu" >
<!-- navbar start, navbar end -->
</div>
</nav>
The navbar-menu
is hidden on touch devices < 1024px
. You need to add the modifier class is-active
to display it.
<div class= "navbar-menu" >
<!-- hidden on mobile -->
</div>
<div class= "navbar-menu is-active" >
<!-- shown on mobile -->
</div>
On desktop >= 1024px
, the navbar-menu
will fill up the space available in the navbar, leaving the navbar brand just the space it needs. It needs, however, two elements as direct children:
The Bulma package does not come with any JavaScript .
Here is however an implementation example, which toggles the class is-active
on both the navbar-burger
and the targeted navbar-menu
.
<a role= "button" class= "navbar-burger" data-target= "navMenu" aria-label= "menu" aria-expanded= "false" >
<span aria-hidden= "true" ></span>
<span aria-hidden= "true" ></span>
<span aria-hidden= "true" ></span>
</a>
<div class= "navbar-menu" id= "navMenu" >
<!-- navbar-start, navbar-end... -->
</div>
document . addEventListener ( 'DOMContentLoaded' , function () {
// Get all "navbar-burger" elements
var $navbarBurgers = Array . prototype . slice . call ( document . querySelectorAll ( '.navbar-burger' ), 0 );
// Check if there are any navbar burgers
if ( $navbarBurgers . length > 0 ) {
// Add a click event on each of them
$navbarBurgers . forEach ( function ( $el ) {
$el . addEventListener ( 'click' , function () {
// Get the target from the "data-target" attribute
var target = $el . dataset . target ;
var $target = document . getElementById ( target );
// Toggle the class on both the "navbar-burger" and the "navbar-menu"
$el . classList . toggle ( 'is-active' );
$target . classList . toggle ( 'is-active' );
});
});
}
});
Navbar start and navbar end
#
The navbar-start
and navbar-end
are the two direct and only children of the navbar-menu
.
On desktop >= 1024px
:
navbar-start
will appear on the left
navbar-end
will appear on the right
Each of them can contain any number of navbar-item
.
<div class= "navbar-menu" >
<div class= "navbar-start" >
<!-- navbar items -->
</div>
<div class= "navbar-end" >
<!-- navbar items -->
</div>
</div>
Navbar item
#
A navbar-item
is a repeatable element that can be:
a navigation link
<a class= "navbar-item" >
Home
</a>
a container for the brand logo
<a class= "navbar-item" >
<img src= "https://versions.bulma.io/0.7.1/images/bulma-logo.png" width= "112" height= "28" alt= "Bulma" >
</a>
the parent of a dropdown menu
<div class= "navbar-item has-dropdown" >
<a class= "navbar-link" >
Docs
</a>
<div class= "navbar-dropdown" >
<!-- Other navbar items -->
</div>
</div>
a child of a navbar dropdown
<div class= "navbar-dropdown" >
<a class= "navbar-item" >
Overview
</a>
</div>
a container for almost anything you want, like a field
<div class= "navbar-item" >
<div class= "field is-grouped" >
<p class= "control" >
<a class= "button" >
<span class= "icon" >
<i class= "fas fa-twitter" aria-hidden= "true" ></i>
</span>
<span> Tweet</span>
</a>
</p>
<p class= "control" >
<a class= "button is-primary" >
<span class= "icon" >
<i class= "fas fa-download" aria-hidden= "true" ></i>
</span>
<span> Download</span>
</a>
</p>
</div>
</div>
It can either be an anchor tag <a>
or a <div>
, as a direct child of either:
navbar
navbar-brand
navbar-start
navbar-end
navbar-dropdown
You can add the modifier class is-expanded
to turn it into a full-width element.
Transparent navbar
#
To seamlessly integrate the navbar in any visual context, you can add the is-transparent
modifier on the navbar
component. This will remove any hover or active background from the navbar items.
<nav class= "navbar is-transparent" >
<div class= "navbar-brand" >
<a class= "navbar-item" href= "https://versions.bulma.io/0.7.1" >
<img src= "https://versions.bulma.io/0.7.1/images/bulma-logo.png" alt= "Bulma: a modern CSS framework based on Flexbox" width= "112" height= "28" >
</a>
<div class= "navbar-burger burger" data-target= "navbarExampleTransparentExample" >
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id= "navbarExampleTransparentExample" class= "navbar-menu" >
<div class= "navbar-start" >
<a class= "navbar-item" href= "https://versions.bulma.io/0.7.1/" >
Home
</a>
<div class= "navbar-item has-dropdown is-hoverable" >
<a class= "navbar-link" href= "/documentation/overview/start/" >
Docs
</a>
<div class= "navbar-dropdown is-boxed" >
<a class= "navbar-item" href= "/documentation/overview/start/" >
Overview
</a>
<a class= "navbar-item" href= "https://versions.bulma.io/0.7.1/documentation/modifiers/syntax/" >
Modifiers
</a>
<a class= "navbar-item" href= "https://versions.bulma.io/0.7.1/documentation/columns/basics/" >
Columns
</a>
<a class= "navbar-item" href= "https://versions.bulma.io/0.7.1/documentation/layout/container/" >
Layout
</a>
<a class= "navbar-item" href= "https://versions.bulma.io/0.7.1/documentation/form/general/" >
Form
</a>
<hr class= "navbar-divider" >
<a class= "navbar-item" href= "https://versions.bulma.io/0.7.1/documentation/elements/box/" >
Elements
</a>
<a class= "navbar-item is-active" href= "https://versions.bulma.io/0.7.1/documentation/components/breadcrumb/" >
Components
</a>
</div>
</div>
</div>
<div class= "navbar-end" >
<div class= "navbar-item" >
<div class= "field is-grouped" >
<p class= "control" >
<a class= "bd-tw-button button" data-social-network= "Twitter" data-social-action= "tweet" data-social-target= "https://bulma.io" target= "_blank" href= "https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&hashtags=bulmaio&url=https://bulma.io&via=jgthms" >
<span class= "icon" >
<i class= "fab fa-twitter" ></i>
</span>
<span>
Tweet
</span>
</a>
</p>
<p class= "control" >
<a class= "button is-primary" href= "https://github.com/jgthms/bulma/releases/download/0.7.0/bulma-0.7.0.zip" >
<span class= "icon" >
<i class= "fas fa-download" ></i>
</span>
<span> Download</span>
</a>
</p>
</div>
</div>
</div>
</div>
</nav>
Fixed navbar
#
New!
0.6.1
You can now fix the navbar to either the top or bottom of the page. This is a 2-step process:
Add either is-fixed-top
or is-fixed-bottom
to the navbar
component
<nav class= "navbar is-fixed-top" >
Add the corresponding has-navbar-fixed-top
or has-navbar-fixed-bottom
modifier to either <html>
or <body>
element to provide the appropriate padding to the page
<html class= "has-navbar-fixed-top" >
Try it out!
To create a dropdown menu , you will need 4 elements:
navbar-item
with the has-dropdown
modifier
navbar-link
which contains the dropdown arrow
navbar-dropdown
which can contain instances of navbar-item
and navbar-divider
<nav class= "navbar" role= "navigation" aria-label= "dropdown navigation" >
<div class= "navbar-item has-dropdown" >
<a class= "navbar-link" >
Docs
</a>
<div class= "navbar-dropdown" >
<a class= "navbar-item" >
Overview
</a>
<a class= "navbar-item" >
Elements
</a>
<a class= "navbar-item" >
Components
</a>
<hr class= "navbar-divider" >
<div class= "navbar-item" >
Version 0.7.0
</div>
</div>
</div>
</nav>
Show/hide the dropdown with either CSS or JavaScript
The navbar-dropdown
is visible on touch devices < 1024px
but hidden on desktop >= 1024px
. How the dropdown is displayed on desktop depends on the parent's class.
The navbar-item
with the has-dropdown
modifier, has 2 additional modifiers
is-hoverable
: the dropdown will show up when hovering the parent navbar-item
is-active
: the dropdown will show up all the time
While the CSS :hover
implementation works perfectly, the is-active
class is available for users who want to control the display of the dropdown with JavaScript .
<div class= "navbar-item has-dropdown is-hoverable" >
<!-- navbar-link, navbar-dropdown etc. -->
</div>
<nav class= "navbar" role= "navigation" aria-label= "dropdown navigation" >
<div class= "navbar-item has-dropdown is-hoverable" >
<a class= "navbar-link" >
Docs
</a>
<div class= "navbar-dropdown" >
<a class= "navbar-item" >
Overview
</a>
<a class= "navbar-item" >
Elements
</a>
<a class= "navbar-item" >
Components
</a>
<hr class= "navbar-divider" >
<div class= "navbar-item" >
Version 0.7.0
</div>
</div>
</div>
</nav>
<div class= "navbar-item has-dropdown is-active" >
<!-- navbar-link, navbar-dropdown etc. -->
</div>
<nav class= "navbar" role= "navigation" aria-label= "dropdown navigation" >
<div class= "navbar-item has-dropdown is-active" >
<a class= "navbar-link" >
Docs
</a>
<div class= "navbar-dropdown" >
<a class= "navbar-item" >
Overview
</a>
<a class= "navbar-item" >
Elements
</a>
<a class= "navbar-item" >
Components
</a>
<hr class= "navbar-divider" >
<div class= "navbar-item" >
Version 0.7.0
</div>
</div>
</div>
</nav>
Right dropdown
If your parent navbar-item
is on the right side, you can position the dropdown to start from the right with the is-right
modifier.
<div class= "navbar-dropdown is-right" >
<!-- navbar-item, navbar-divider etc. -->
</div>
Documentation
Everything you need to create a website with Bulma
<nav class= "navbar" role= "navigation" aria-label= "dropdown navigation" >
<div class= "navbar-menu" >
<div class= "navbar-start" >
<div class= "navbar-item has-dropdown is-active" >
<a class= "navbar-link" >
Left
</a>
<div class= "navbar-dropdown" >
<a class= "navbar-item" >
Overview
</a>
<a class= "navbar-item" >
Elements
</a>
<a class= "navbar-item" >
Components
</a>
<hr class= "navbar-divider" >
<div class= "navbar-item" >
Version 0.7.0
</div>
</div>
</div>
</div>
<div class= "navbar-end" >
<div class= "navbar-item has-dropdown is-active" >
<a class= "navbar-link" >
Right
</a>
<div class= "navbar-dropdown is-right" >
<a class= "navbar-item" >
Overview
</a>
<a class= "navbar-item" >
Elements
</a>
<a class= "navbar-item" >
Components
</a>
<hr class= "navbar-divider" >
<div class= "navbar-item" >
Version 0.7.0
</div>
</div>
</div>
</div>
</div>
</nav>
<section class= "hero is-primary" >
<div class= "hero-body" >
<p class= "title" >
Documentation
</p>
<p class= "subtitle" >
Everything you need to <strong> create a website</strong> with Bulma
</p>
</div>
</section>
Dropup
New!
0.6.1
If you're using a navbar at the bottom, like the fixed bottom navbar , you might want to use a dropup menu . Simply add the has-dropdown
and has-dropdown-up
modifiers to the parent navbar-item
.
<div class= "navbar-item has-dropdown has-dropdown-up is-hoverable" >
<a class= "navbar-link" href= "/documentation/overview/start/" >
Docs
</a>
<div class= "navbar-dropdown" >
<a class= "navbar-item" href= "/documentation/overview/start/" >
Overview
</a>
</div>
</div>
Documentation
Everything you need to create a website with Bulma
<section class= "hero is-primary" >
<div class= "hero-body" >
<p class= "title" >
Documentation
</p>
<p class= "subtitle" >
Everything you need to <strong> create a website</strong> with Bulma
</p>
</div>
</section>
<nav class= "navbar" role= "navigation" aria-label= "dropdown navigation" >
<div class= "navbar-menu" >
<div class= "navbar-start" >
<div class= "navbar-item has-dropdown has-dropdown-up is-active" >
<a class= "navbar-link" >
Dropup
</a>
<div class= "navbar-dropdown" >
<a class= "navbar-item" >
Overview
</a>
<a class= "navbar-item" >
Elements
</a>
<a class= "navbar-item" >
Components
</a>
<hr class= "navbar-divider" >
<div class= "navbar-item" >
Version 0.7.0
</div>
</div>
</div>
</div>
</div>
</nav>
Styles for the dropdown menu
By default, the navbar-dropdown
has:
a grey border-top
a border-radius
at both bottom corners
Documentation
Everything you need to create a website with Bulma
<nav class= "navbar" role= "navigation" aria-label= "dropdown navigation" >
<a class= "navbar-item" >
<img src= "https://versions.bulma.io/0.7.1/images/bulma-logo.png" alt= "Bulma: a modern CSS framework based on Flexbox" width= "112" height= "28" >
</a>
<div class= "navbar-item has-dropdown is-active" >
<a class= "navbar-link" >
Docs
</a>
<div class= "navbar-dropdown" >
<a class= "navbar-item" >
Overview
</a>
<a class= "navbar-item" >
Elements
</a>
<a class= "navbar-item" >
Components
</a>
<hr class= "navbar-divider" >
<div class= "navbar-item" >
Version 0.7.0
</div>
</div>
</div>
</nav>
<section class= "hero is-primary" >
<div class= "hero-body" >
<p class= "title" >
Documentation
</p>
<p class= "subtitle" >
Everything you need to <strong> create a website</strong> with Bulma
</p>
</div>
</section>
When having a transparent navbar , it is preferable to use the boxed version of the dropdown, by using the is-boxed
modifier.
the grey border is removed
a slight inner shadow is added
all corners are rounded
the hover/active state is animated
Documentation
Everything you need to create a website with Bulma
<nav class= "navbar is-transparent" role= "navigation" aria-label= "dropdown navigation" >
<a class= "navbar-item" >
<img src= "https://versions.bulma.io/0.7.1/images/bulma-logo.png" alt= "Bulma: a modern CSS framework based on Flexbox" width= "112" height= "28" >
</a>
<div class= "navbar-item has-dropdown is-active" >
<a class= "navbar-link" >
Docs
</a>
<div class= "navbar-dropdown is-boxed" >
<a class= "navbar-item" >
Overview
</a>
<a class= "navbar-item" >
Elements
</a>
<a class= "navbar-item" >
Components
</a>
<hr class= "navbar-divider" >
<div class= "navbar-item" >
Version 0.7.0
</div>
</div>
</div>
</nav>
<section class= "hero" >
<div class= "hero-body" >
<p class= "title" >
Documentation
</p>
<p class= "subtitle" >
Everything you need to <strong> create a website</strong> with Bulma
</p>
</div>
</section>
Active dropdown navbar item
Documentation
Everything you need to create a website with Bulma
<nav class= "navbar" role= "navigation" aria-label= "dropdown navigation" >
<a class= "navbar-item" >
<img src= "https://versions.bulma.io/0.7.1/images/bulma-logo.png" alt= "Bulma: a modern CSS framework based on Flexbox" width= "112" height= "28" >
</a>
<div class= "navbar-item has-dropdown is-active" >
<a class= "navbar-link" >
Docs
</a>
<div class= "navbar-dropdown" >
<a class= "navbar-item" >
Overview
</a>
<a class= "navbar-item is-active" >
Elements
</a>
<a class= "navbar-item" >
Components
</a>
<hr class= "navbar-divider" >
<div class= "navbar-item" >
Version 0.7.0
</div>
</div>
</div>
</nav>
<section class= "hero is-primary" >
<div class= "hero-body" >
<p class= "title" >
Documentation
</p>
<p class= "subtitle" >
Everything you need to <strong> create a website</strong> with Bulma
</p>
</div>
</section>
Dropdown divider
You can add a navbar-divider
to display a horizontal rule in a navbar-dropdown
.
<hr class= "navbar-divider" >
Colors
#
New!
0.5.2
You can change the background color of the navbar
by using one of the 9 color modifiers:
is-primary
is-link
is-info
is-success
is-warning
is-danger
is-black
is-dark
is-light
is-white
<nav class= "navbar is-primary" >
<!-- navbar brand, navbar menu... -->
</nav>
Variables
#
You can use these variables to customize this component. Simply set one or multiple of these variables before importing Bulma. Learn how .
Name
Default value
Name
Default value
$navbar-background-color
$white
$navbar-height
3.25rem
$navbar-item-color
$grey-dark
$navbar-item-hover-color
$link
$navbar-item-hover-background-color
$background
$navbar-item-active-color
$black
$navbar-item-active-background-color
transparent
$navbar-item-img-max-height
1.75rem
$navbar-tab-hover-background-color
transparent
$navbar-tab-hover-border-bottom-color
$link
$navbar-tab-active-color
$link
$navbar-tab-active-background-color
transparent
$navbar-tab-active-border-bottom-color
$link
$navbar-tab-active-border-bottom-style
solid
$navbar-tab-active-border-bottom-width
3px
$navbar-dropdown-background-color
$white
$navbar-dropdown-border-top
1px solid $border
$navbar-dropdown-offset
-4px
$navbar-dropdown-arrow
$link
$navbar-dropdown-radius
$radius-large
$navbar-dropdown-z
20
$navbar-dropdown-boxed-radius
$radius-large
$navbar-dropdown-boxed-shadow
0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
$navbar-dropdown-item-hover-color
$black
$navbar-dropdown-item-hover-background-color
$background
$navbar-dropdown-item-active-color
$link
$navbar-dropdown-item-active-background-color
$background
$navbar-divider-background-color
$border