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.
<navclass="navbar"role="navigation"aria-label="main navigation"><divclass="navbar-brand"><aclass="navbar-item"href="https://versions.bulma.io/0.7.0"><imgsrc="https://versions.bulma.io/0.7.0/images/bulma-logo.png"alt="Bulma: a modern CSS framework based on Flexbox"width="112"height="28"></a><arole="button"class="navbar-burger"aria-label="menu"aria-expanded="false"><spanaria-hidden="true"></span><spanaria-hidden="true"></span><spanaria-hidden="true"></span></a></div></nav>
On desktop >= 1024px
, the navbar brand will only take up the space it needs.
The navbar-menu is hidden on touch devices< 1024px
. You need to add the modifier class is-active to display it.
<divclass="navbar-menu"><!-- hidden on mobile --></div><divclass="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:
navbar-start
navbar-end
Javascript toggle
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.
document.addEventListener('DOMContentLoaded',function(){// Get all "navbar-burger" elementsvar$navbarBurgers=Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'),0);// Check if there are any navbar burgersif($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" attributevartarget=$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');});});}});
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.
<navclass="navbar is-transparent"><divclass="navbar-brand"><aclass="navbar-item"href="https://versions.bulma.io/0.7.0"><imgsrc="https://versions.bulma.io/0.7.0/images/bulma-logo.png"alt="Bulma: a modern CSS framework based on Flexbox"width="112"height="28"></a><divclass="navbar-burger burger"data-target="navbarExampleTransparentExample"><span></span><span></span><span></span></div></div><divid="navbarExampleTransparentExample"class="navbar-menu"><divclass="navbar-start"><aclass="navbar-item"href="https://versions.bulma.io/0.7.0/">
Home
</a><divclass="navbar-item has-dropdown is-hoverable"><aclass="navbar-link"href="/documentation/overview/start/">
Docs
</a><divclass="navbar-dropdown is-boxed"><aclass="navbar-item"href="/documentation/overview/start/">
Overview
</a><aclass="navbar-item"href="https://versions.bulma.io/0.7.0/documentation/modifiers/syntax/">
Modifiers
</a><aclass="navbar-item"href="https://versions.bulma.io/0.7.0/documentation/columns/basics/">
Columns
</a><aclass="navbar-item"href="https://versions.bulma.io/0.7.0/documentation/layout/container/">
Layout
</a><aclass="navbar-item"href="https://versions.bulma.io/0.7.0/documentation/form/general/">
Form
</a><hrclass="navbar-divider"><aclass="navbar-item"href="https://versions.bulma.io/0.7.0/documentation/elements/box/">
Elements
</a><aclass="navbar-item is-active"href="https://versions.bulma.io/0.7.0/documentation/components/breadcrumb/">
Components
</a></div></div></div><divclass="navbar-end"><divclass="navbar-item"><divclass="field is-grouped"><pclass="control"><aclass="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"><spanclass="icon"><iclass="fab fa-twitter"></i></span><span>
Tweet
</span></a></p><pclass="control"><aclass="button is-primary"href="https://github.com/jgthms/bulma/releases/download/0.6.2/bulma-0.6.2.zip"><spanclass="icon"><iclass="fas fa-download"></i></span><span>Download</span></a></p></div></div></div></div></nav>
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
<navclass="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
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
<navclass="navbar"role="navigation"aria-label="dropdown navigation"><divclass="navbar-item has-dropdown"><aclass="navbar-link">
Docs
</a><divclass="navbar-dropdown"><aclass="navbar-item">
Overview
</a><aclass="navbar-item">
Elements
</a><aclass="navbar-item">
Components
</a><hrclass="navbar-divider"><divclass="navbar-item">
Version 0.6.2
</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.
<divclass="navbar-item has-dropdown is-hoverable"><!-- navbar-link, navbar-dropdown etc. --></div>
<navclass="navbar"role="navigation"aria-label="dropdown navigation"><divclass="navbar-item has-dropdown is-hoverable"><aclass="navbar-link">
Docs
</a><divclass="navbar-dropdown"><aclass="navbar-item">
Overview
</a><aclass="navbar-item">
Elements
</a><aclass="navbar-item">
Components
</a><hrclass="navbar-divider"><divclass="navbar-item">
Version 0.6.2
</div></div></div></nav>
<divclass="navbar-item has-dropdown is-active"><!-- navbar-link, navbar-dropdown etc. --></div>
<navclass="navbar"role="navigation"aria-label="dropdown navigation"><divclass="navbar-item has-dropdown is-active"><aclass="navbar-link">
Docs
</a><divclass="navbar-dropdown"><aclass="navbar-item">
Overview
</a><aclass="navbar-item">
Elements
</a><aclass="navbar-item">
Components
</a><hrclass="navbar-divider"><divclass="navbar-item">
Version 0.6.2
</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.
<divclass="navbar-dropdown is-right"><!-- navbar-item, navbar-divider etc. --></div>
Documentation
Everything you need to create a website with Bulma
<navclass="navbar"role="navigation"aria-label="dropdown navigation"><divclass="navbar-menu"><divclass="navbar-start"><divclass="navbar-item has-dropdown is-active"><aclass="navbar-link">
Left
</a><divclass="navbar-dropdown"><aclass="navbar-item">
Overview
</a><aclass="navbar-item">
Elements
</a><aclass="navbar-item">
Components
</a><hrclass="navbar-divider"><divclass="navbar-item">
Version 0.6.2
</div></div></div></div><divclass="navbar-end"><divclass="navbar-item has-dropdown is-active"><aclass="navbar-link">
Right
</a><divclass="navbar-dropdown is-right"><aclass="navbar-item">
Overview
</a><aclass="navbar-item">
Elements
</a><aclass="navbar-item">
Components
</a><hrclass="navbar-divider"><divclass="navbar-item">
Version 0.6.2
</div></div></div></div></div></nav><sectionclass="hero is-primary"><divclass="hero-body"><pclass="title">
Documentation
</p><pclass="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.
Everything you need to create a website with Bulma
<sectionclass="hero is-primary"><divclass="hero-body"><pclass="title">
Documentation
</p><pclass="subtitle">
Everything you need to <strong>create a website</strong> with Bulma
</p></div></section><navclass="navbar"role="navigation"aria-label="dropdown navigation"><divclass="navbar-menu"><divclass="navbar-start"><divclass="navbar-item has-dropdown has-dropdown-up is-active"><aclass="navbar-link">
Dropup
</a><divclass="navbar-dropdown"><aclass="navbar-item">
Overview
</a><aclass="navbar-item">
Elements
</a><aclass="navbar-item">
Components
</a><hrclass="navbar-divider"><divclass="navbar-item">
Version 0.6.2
</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
<navclass="navbar"role="navigation"aria-label="dropdown navigation"><aclass="navbar-item"><imgsrc="https://versions.bulma.io/0.7.0/images/bulma-logo.png"alt="Bulma: a modern CSS framework based on Flexbox"width="112"height="28"></a><divclass="navbar-item has-dropdown is-active"><aclass="navbar-link">
Docs
</a><divclass="navbar-dropdown"><aclass="navbar-item">
Overview
</a><aclass="navbar-item">
Elements
</a><aclass="navbar-item">
Components
</a><hrclass="navbar-divider"><divclass="navbar-item">
Version 0.6.2
</div></div></div></nav><sectionclass="hero is-primary"><divclass="hero-body"><pclass="title">
Documentation
</p><pclass="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
<navclass="navbar is-transparent"role="navigation"aria-label="dropdown navigation"><aclass="navbar-item"><imgsrc="https://versions.bulma.io/0.7.0/images/bulma-logo.png"alt="Bulma: a modern CSS framework based on Flexbox"width="112"height="28"></a><divclass="navbar-item has-dropdown is-active"><aclass="navbar-link">
Docs
</a><divclass="navbar-dropdown is-boxed"><aclass="navbar-item">
Overview
</a><aclass="navbar-item">
Elements
</a><aclass="navbar-item">
Components
</a><hrclass="navbar-divider"><divclass="navbar-item">
Version 0.6.2
</div></div></div></nav><sectionclass="hero"><divclass="hero-body"><pclass="title">
Documentation
</p><pclass="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
<navclass="navbar"role="navigation"aria-label="dropdown navigation"><aclass="navbar-item"><imgsrc="https://versions.bulma.io/0.7.0/images/bulma-logo.png"alt="Bulma: a modern CSS framework based on Flexbox"width="112"height="28"></a><divclass="navbar-item has-dropdown is-active"><aclass="navbar-link">
Docs
</a><divclass="navbar-dropdown"><aclass="navbar-item">
Overview
</a><aclass="navbar-item is-active">
Elements
</a><aclass="navbar-item">
Components
</a><hrclass="navbar-divider"><divclass="navbar-item">
Version 0.6.2
</div></div></div></nav><sectionclass="hero is-primary"><divclass="hero-body"><pclass="title">
Documentation
</p><pclass="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.