<p>The new <code>navbar</code> replaces the deprecated <code>nav</code> component, whose documentation you can still access temporarily <ahref="{{ site.url }}/documentation/components/nav/">here</a>.</p>
<code>navbar-brand</code> the <strong>left side</strong>, <strongclass="has-text-success">always visible</strong>, which usually contains the <strong>logo</strong> and optionally some links or icons
The navbar brand is <strong>always visible</strong>: on both touch devices {% include bp/touch.html %} and desktop {% include bp/desktop.html %}. As a result, it is recommended to only use a few navbar items to avoid <strong>overflowing</strong> horizontally on small devices.
On desktop {% include bp/desktop.html %}, the navbar brand will only take up the space it needs.
</p>
</div>
<hr>
<h3class="title">Navbar burger</h3>
<divclass="content">
<p>
The <code>navbar-burger</code> is a hamburger menu that only appears on <strong>mobile</strong>. It has to appear as the last child of <code>navbar-brand</code>.
</p>
</div>
<divclass="example is-paddingless">
<divclass="navbar-burger"style="display: flex;">
<span></span>
<span></span>
<span></span>
</div>
</div>
{% highlight html %}{{ navbar_burger_example }}{% endhighlight %}
<divclass="content">
<p>
You can add the modifier class <code>is-active</code> to turn it into a cross.
The <code>navbar-menu</code> is the <strong>counterpart</strong> of the navbar brand. As such, it must appear as a direct child of <code>navbar-brand</code>, as a sibling of <code>navbar-brand</code>.
</p>
</div>
{% highlight html %}{{navbar_menu_example}}{% endhighlight %}
<divclass="content">
<p>
The <code>navbar-menu</code> is <strong>hidden on touch devices</strong> {% include bp/touch.html %}. You need to add the modifier class <code>is-active</code> to display it.
</p>
</div>
{% highlight html %}{{navbar_menu_active_example}}{% endhighlight %}
<divclass="content">
<p>
On desktop {% include bp/desktop.html %}, the <code>navbar-menu</code> will <strong>fill up the space</strong> available in the navbar, leaving the navbar brand just the space it needs. It needs, however, two elements as direct children:
</p>
<ul>
<li>
<code>navbar-start</code>
</li>
<li>
<code>navbar-end</code>
</li>
</ul>
</div>
<hr>
<h3class="title">Navbar start and navbar end</h3>
<divclass="content">
<p>
The <code>navbar-start</code> and <code>navbar-end</code> are the two direct and only children of the <code>navbar-menu</code>.
</p>
<p>
On desktop {% include bp/desktop.html %}:
</p>
<ul>
<li>
<code>navbar-start</code> will appear on the <strong>left</strong>
</li>
<li>
<code>navbar-end</code> will appear on the <strong>right</strong>
</li>
</ul>
<p>
Each of them can contain any number of <code>navbar-item</code>.
</p>
</div>
{% highlight html %}{{navbar_start_end_example}}{% endhighlight %}
<hr>
<h3class="title">Navbar item</h3>
<divclass="content">
<p>
A <code>navbar-item</code> is a repeatable element that can be:
</p>
<ul>
<li>
a navigation <strong>link</strong>
{% highlight html %}{{ navbar_item_link_example }}{% endhighlight %}
</li>
<li>
a container for the <strong>brand logo</strong>
{% highlight html %}{{ navbar_item_brand_example }}{% endhighlight %}
</li>
<li>
the <strong>parent</strong> of a dropdown menu
{% highlight html %}{{ navbar_item_dropdown_example }}{% endhighlight %}
</li>
<li>
a child of a <strong>navbar dropdown</strong>
{% highlight html %}{{ navbar_item_dropdown_bis_example }}{% endhighlight %}
</li>
<li>
a container for almost <strong>anything</strong> you want, like a <code>field</code>
{% highlight html %}{{ navbar_item_other_example }}{% endhighlight %}
</li>
</ul>
<p>
It can either be an anchor tag <code><a></code> or a <code><div></code>, as a <strong>direct child</strong> of either:
To seamlessly integrate the navbar in any visual context, you can add the <code>is-transparent</code> modifer on the <code>navbar</code> component. This will remove any hover or active background from the navbar items.
</p>
</div>
<divclass="example is-paddingless">
{{navbar_transparent_example}}
</div>
{% highlight html %}{{navbar_transparent_example}}{% endhighlight %}
To create a <strong>dropdown menu</strong>, you will need <strong>4</strong> elements:
</p>
<ul>
<li>
<code>navbar-item</code> with the <code>has-dropdown</code> modifier
</li>
<li>
<code>navbar-link</code> which contains the dropdown arrow
</li>
<li>
<code>navbar-dropdown</code> which can contain instances of <code>navbar-item</code> and <code>navbar-divider</code>
</li>
</ul>
</div>
<divclass="columns">
<divclass="column">
<divclass="example is-paddingless">
{{ navbar_dropdown_example }}
</div>
</div>
<divclass="column">
{% highlight html %}{{ navbar_dropdown_example }}{% endhighlight %}
</div>
</div>
<h4class="title is-4">
Show/hide the dropdown with either <strong>CSS</strong> or <strong>JavaScript</strong>
</h4>
<divclass="content">
<p>
The <code>navbar-dropdown</code> is visible on touch devices {% include bp/touch.html %} but hidden on desktop {% include bp/desktop.html %}. <em>How</em> the dropdown is displayed on desktop depends on the parent's class.
</p>
<p>
The <code>navbar-item</code> with the <code>has-dropdown</code> modifier, has <strong>2 additional modifiers</strong>
</p>
<ul>
<li>
<code>is-hoverable</code>: the dropdown will show up when <strong>hovering</strong> the parent <code>navbar-item</code>
</li>
<li>
<code>is-active</code>: the dropdown will show up <strong>all the time</strong>
</li>
</ul>
</div>
<divclass="message is-success">
<pclass="message-body">
While the CSS <code>:hover</code> implementation works perfectly, the <code>is-active</code> class is available for users who want to control the display of the dropdown with <strong>JavaScript</strong>.
</p>
</div>
<divclass="columns">
<divclass="column">
<divclass="example is-paddingless">
{{ navbar_dropdown_hover_example }}
</div>
</div>
<divclass="column">
{% highlight html %}{{ navbar_dropdown_hover_example }}{% endhighlight %}
</div>
</div>
<divclass="columns">
<divclass="column">
<divclass="example is-paddingless">
{{ navbar_dropdown_active_example }}
</div>
</div>
<divclass="column">
{% highlight html %}{{ navbar_dropdown_active_example }}{% endhighlight %}
</div>
</div>
<h4class="title is-4">
Styles for the dropdown menu
</h4>
<divclass="content">
<p>
By default, the <code>navbar-dropdown</code> has:
</p>
<ul>
<li>
a grey <code>border-top</code>
</li>
<li>
a <code>border-radius</code> at both bottom corners
</li>
</ul>
</div>
<divclass="columns">
<divclass="column">
<divclass="example is-paddingless">
{{ navbar_dropdown_default_example }}
</div>
</div>
<divclass="column">
{% highlight html %}{{ navbar_dropdown_default_example }}{% endhighlight %}
</div>
</div>
<divclass="content">
<p>
When having a <ahref="#transparent-navbar">transparent navbar</a>, it is preferable to use the boxed version of the dropdown, by using the <code>is-boxed</code> modifier.
</p>
<ul>
<li>
the grey border is <strong>removed</strong>
</li>
<li>
a slight <strong>inner shadow</strong> is added
</li>
<li>
all corners are <strong>rounded</strong>
</li>
<li>
the hover/active state is <strong>animated</strong>
</li>
</ul>
</div>
<divclass="columns">
<divclass="column">
<divclass="example is-paddingless">
{{ navbar_dropdown_boxed_example }}
</div>
</div>
<divclass="column">
{% highlight html %}{{ navbar_dropdown_boxed_example }}{% endhighlight %}
</div>
</div>
<h4class="title is-4">
Active dropdown navbar item
</h4>
<divclass="columns">
<divclass="column">
<divclass="example is-paddingless">
{{ navbar_dropdown_item_active_example }}
</div>
</div>
<divclass="column">
{% highlight html %}{{ navbar_dropdown_item_active_example }}{% endhighlight %}
</div>
</div>
<h4class="title is-4">
Dropdown divider
</h4>
<divclass="content">
<p>
You can add a <code>navbar-divider</code> to display a <strong>horizontal rule</strong> in a <code>navbar-dropdown</code>.
</p>
</div>
{% highlight html %}{{ navbar_divider_example }}{% endhighlight %}
