2016-09-11 11:00:49 +00:00
---
layout: documentation
doc-tab: components
doc-subtab: nav
---
{% include subnav-components.html %}
< section class = "section" >
< div class = "container" >
< h1 class = "title" > Nav< / h1 >
< h2 class = "subtitle" >
A responsive horizontal < strong > nav bar< / strong > that can contain links, tabs, buttons, icons, and a logo
< / h2 >
< hr >
< div class = "content" >
< p >
The < code > nav< / code > container can have < strong > 3 parts< / strong > :
< / p >
< ul >
< li > < code > nav-left< / code > < / li >
< li > < code > nav-center< / code > < / li >
< li > < code > nav-right< / code > < / li >
< / ul >
2016-12-23 13:20:13 +00:00
< p >
Each nav item needs to be wrapped in a < code > nav-item< / code > element.
< / p >
2016-09-11 11:00:49 +00:00
< p >
For responsiveness, < strong > 2 additional< / strong > classes are available:
< / p >
< ul >
< li > < code > nav-toggle< / code > for the hamburger menu on mobile< / li >
< li > < code > nav-menu< / code > for menu that is collapsable on mobile (you can combine it with < code > nav-right< / code > )< / li >
< / ul >
< / div >
2016-12-23 13:20:13 +00:00
{% capture nav_example %}
2016-09-11 11:00:49 +00:00
< nav class = "nav" >
< div class = "nav-left" >
2016-12-23 13:20:13 +00:00
< a class = "nav-item" >
2016-12-23 13:43:18 +00:00
< img src = "{{ site.url }}/images/bulma-logo.png" alt = "Bulma logo" >
2016-09-11 11:00:49 +00:00
< / a >
< / div >
< div class = "nav-center" >
2016-12-23 13:20:13 +00:00
< a class = "nav-item" >
2016-09-11 11:00:49 +00:00
< span class = "icon" >
< i class = "fa fa-github" > < / i >
< / span >
< / a >
2016-12-23 13:20:13 +00:00
< a class = "nav-item" >
2016-09-11 11:00:49 +00:00
< span class = "icon" >
< i class = "fa fa-twitter" > < / i >
< / span >
< / a >
< / div >
2016-12-23 13:20:13 +00:00
<!-- This "nav - toggle" hamburger menu is only visible on mobile -->
<!-- You need JavaScript to toggle the "is - active" class on "nav - menu" -->
2016-09-11 11:00:49 +00:00
< span class = "nav-toggle" >
< span > < / span >
< span > < / span >
< span > < / span >
< / span >
2016-12-23 13:20:13 +00:00
<!-- This "nav - menu" is hidden on mobile -->
<!-- Add the modifier "is - active" to display it on mobile -->
2016-09-11 11:00:49 +00:00
< div class = "nav-right nav-menu" >
2016-12-23 13:20:13 +00:00
< a class = "nav-item" >
2016-09-11 11:00:49 +00:00
Home
< / a >
2016-12-23 13:20:13 +00:00
< a class = "nav-item" >
2016-09-11 11:00:49 +00:00
Documentation
< / a >
2016-12-23 13:20:13 +00:00
< a class = "nav-item" >
2016-09-11 11:00:49 +00:00
Blog
< / a >
< span class = "nav-item" >
< a class = "button" >
< span class = "icon" >
< i class = "fa fa-twitter" > < / i >
< / span >
< span > Tweet< / span >
< / a >
2016-12-23 13:20:13 +00:00
< a class = "button is-primary" >
2016-09-11 11:00:49 +00:00
< span class = "icon" >
< i class = "fa fa-download" > < / i >
< / span >
< span > Download< / span >
< / a >
< / span >
< / div >
< / nav >
2016-12-23 13:20:13 +00:00
{% endcapture %}
2016-12-23 13:43:18 +00:00
< div class = "example is-paddingless" >
2016-12-23 13:20:13 +00:00
{{nav_example}}
2016-09-11 11:00:49 +00:00
< / div >
{% highlight html %}
2016-12-23 13:20:13 +00:00
{{nav_example}}
2016-09-11 11:00:49 +00:00
{% endhighlight %}
< hr >
< h3 class = "title" > Modifiers< / h3 >
< div class = "content" >
< ul >
< li > the < code > nav< / code > container can have a < strong > shadow< / strong > by adding the < code > has-shadow< / code > modifier< / li >
< li > the < code > nav-item< / code > can become < strong > active< / strong > by adding the < code > is-active< / code > modifier< / li >
< li > the < code > nav-item< / code > can become a < strong > tab< / strong > by adding the < code > is-tab< / code > modifier< / li >
< / ul >
2016-12-23 13:43:18 +00:00
< p >
To optimise the space on desktop, but also allow the mobile view to be usable, you can < strong > duplicate< / strong > nav items in both < code > nav-left< / code > and < code > nav-right< / code > , and show/hide them with < a href = "{{site.url}}/documentation/modifiers/responsive-helpers/" > responsive helpers< / a > .
< / p >
2016-09-11 11:00:49 +00:00
< / div >
< / div >
2016-12-23 13:43:18 +00:00
{% capture nav_tabs_example %}
2016-09-11 11:00:49 +00:00
< nav class = "nav has-shadow" >
< div class = "container" >
< div class = "nav-left" >
2016-12-23 13:43:18 +00:00
< a class = "nav-item" >
< img src = "{{ site.url }}/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 >
< 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 = "{{site.url}}/images/jgthms.png" >
< / figure >
Profile
< / a >
< a class = "nav-item is-tab" > Log out< / a >
2016-09-11 11:00:49 +00:00
< / div >
< / div >
< / nav >
2016-12-23 13:43:18 +00:00
{% endcapture %}
< div class = "example is-paddingless" >
{{nav_tabs_example}}
2016-09-11 11:00:49 +00:00
< / div >
{% highlight html %}
2016-12-23 13:43:18 +00:00
{{nav_tabs_example}}
2016-09-11 11:00:49 +00:00
{% endhighlight %}
< / section >