|
|
@@ -1,12 +1,20 @@
|
|
|
---
|
|
|
title: Navbar
|
|
|
+subtitle: "A responsive horizontal <strong>navbar</strong> that can support images, links, buttons, and dropdowns"
|
|
|
layout: documentation
|
|
|
doc-tab: components
|
|
|
doc-subtab: navbar
|
|
|
+breadcrumb:
|
|
|
+- home
|
|
|
+- documentation
|
|
|
+- components
|
|
|
+- components-navbar
|
|
|
+meta:
|
|
|
+- colors: true
|
|
|
+- sizes: false
|
|
|
+- variables: true
|
|
|
---
|
|
|
|
|
|
-{% include subnav/subnav-components.html %}
|
|
|
-
|
|
|
{% capture navbar_example %}
|
|
|
{% include examples/navbar.html id="Default" %}
|
|
|
{% endcapture %}
|
|
|
@@ -523,68 +531,48 @@ document.addEventListener('DOMContentLoaded', function () {
|
|
|
</nav>
|
|
|
{% endcapture %}
|
|
|
|
|
|
-<section class="section">
|
|
|
- <div class="container">
|
|
|
-
|
|
|
- <h1 class="title">Navbar</h1>
|
|
|
- <h2 class="subtitle">
|
|
|
- A responsive horizontal <strong>navbar</strong> that can support images, links, buttons, and dropdowns
|
|
|
- </h2>
|
|
|
- {%
|
|
|
- include meta.html
|
|
|
- new=true
|
|
|
- since="0.4.3"
|
|
|
- colors=true
|
|
|
- sizes=false
|
|
|
- variables=true
|
|
|
- %}
|
|
|
-
|
|
|
- <hr>
|
|
|
-
|
|
|
- <div class="message is-success">
|
|
|
- <div class="message-body">
|
|
|
- <p>The new <code>navbar</code> replaces the deprecated <code>nav</code> component, whose documentation you can still access temporarily <a href="{{ site.url }}/documentation/components/nav/">here</a>.</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+<div class="message is-success">
|
|
|
+ <div class="message-body">
|
|
|
+ <p>The new <code>navbar</code> replaces the deprecated <code>nav</code> component, whose documentation you can still access temporarily <a href="{{ site.url }}/documentation/components/nav/">here</a>.</p>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
|
|
|
- <div class="content">
|
|
|
- <p>
|
|
|
- The <code>navbar</code> component is a responsive and versatile horizontal navigation bar with the following structure:
|
|
|
- </p>
|
|
|
+<div class="content">
|
|
|
+ <p>
|
|
|
+ The <code>navbar</code> component is a responsive and versatile horizontal navigation bar with the following structure:
|
|
|
+ </p>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <code>navbar</code> the <strong>main</strong> container
|
|
|
<ul>
|
|
|
<li>
|
|
|
- <code>navbar</code> the <strong>main</strong> container
|
|
|
+ <code>navbar-brand</code> the <strong>left side</strong>, <strong class="has-text-success">always visible</strong>, which usually contains the <strong>logo</strong> and optionally some links or icons
|
|
|
<ul>
|
|
|
<li>
|
|
|
- <code>navbar-brand</code> the <strong>left side</strong>, <strong class="has-text-success">always visible</strong>, which usually contains the <strong>logo</strong> and optionally some links or icons
|
|
|
- <ul>
|
|
|
- <li>
|
|
|
- <code>navbar-burger</code> the <strong>hamburger</strong> icon, which toggles the navbar menu on touch devices
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
+ <code>navbar-burger</code> the <strong>hamburger</strong> icon, which toggles the navbar menu on touch devices
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <code>navbar-menu</code> the <strong>right side</strong>, hidden on touch devices, visible on desktop
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <code>navbar-start</code> the <strong>left part</strong> of the menu, which appears next to the navbar brand on desktop
|
|
|
</li>
|
|
|
<li>
|
|
|
- <code>navbar-menu</code> the <strong>right side</strong>, hidden on touch devices, visible on desktop
|
|
|
+ <code>navbar-end</code> the <strong>right part</strong> of the menu, which appears at the end of the navbar
|
|
|
<ul>
|
|
|
<li>
|
|
|
- <code>navbar-start</code> the <strong>left part</strong> of the menu, which appears next to the navbar brand on desktop
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <code>navbar-end</code> the <strong>right part</strong> of the menu, which appears at the end of the navbar
|
|
|
+ <code>navbar-item</code> each <strong>single item</strong> of the navbar, which can either be an <code>a</code> or a <code>div</code>
|
|
|
<ul>
|
|
|
<li>
|
|
|
- <code>navbar-item</code> each <strong>single item</strong> of the navbar, which can either be an <code>a</code> or a <code>div</code>
|
|
|
+ <code>navbar-link</code> a <strong>link</strong> as the sibling of a dropdown, with an arrow
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <code>navbar-dropdown</code> the <strong>dropdown menu</strong>, which can include navbar items and dividers
|
|
|
<ul>
|
|
|
<li>
|
|
|
- <code>navbar-link</code> a <strong>link</strong> as the sibling of a dropdown, with an arrow
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <code>navbar-dropdown</code> the <strong>dropdown menu</strong>, which can include navbar items and dividers
|
|
|
- <ul>
|
|
|
- <li>
|
|
|
- <code>navbar-divider</code> a <strong>horizontal line</strong> to separate navbar items
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
+ <code>navbar-divider</code> a <strong>horizontal line</strong> to separate navbar items
|
|
|
</li>
|
|
|
</ul>
|
|
|
</li>
|
|
|
@@ -595,538 +583,538 @@ document.addEventListener('DOMContentLoaded', function () {
|
|
|
</ul>
|
|
|
</li>
|
|
|
</ul>
|
|
|
- </div>
|
|
|
-
|
|
|
- {% include anchor.html name="Navbar brand" %}
|
|
|
-
|
|
|
- <div class="content">
|
|
|
- <p>
|
|
|
- The <code>navbar-brand</code> is the left side of the navbar. It can contain:
|
|
|
- </p>
|
|
|
- <ul>
|
|
|
- <li>
|
|
|
- a number of <code>navbar-item</code>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- the <code>navbar-burger</code> as last child
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
-
|
|
|
- {% highlight html %}{{navbar_brand_example}}{% endhighlight %}
|
|
|
-
|
|
|
- <div class="content">
|
|
|
- <p>
|
|
|
- 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.
|
|
|
- </p>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="bd-example is-paddingless">
|
|
|
- {{navbar_brand_items_example}}
|
|
|
- </div>
|
|
|
-
|
|
|
- {% highlight html %}{{navbar_brand_items_example}}{% endhighlight %}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+</div>
|
|
|
|
|
|
- <div class="content">
|
|
|
- <p>
|
|
|
- On desktop {% include bp/desktop.html %}, the navbar brand will only take up the space it needs.
|
|
|
- </p>
|
|
|
- </div>
|
|
|
+{% include anchor.html name="Navbar brand" %}
|
|
|
+
|
|
|
+<div class="content">
|
|
|
+ <p>
|
|
|
+ The <code>navbar-brand</code> is the left side of the navbar. It can contain:
|
|
|
+ </p>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ a number of <code>navbar-item</code>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ the <code>navbar-burger</code> as last child
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+</div>
|
|
|
|
|
|
- {% include anchor.html name="Navbar burger" %}
|
|
|
+{% highlight html %}{{navbar_brand_example}}{% endhighlight %}
|
|
|
|
|
|
- <div class="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>
|
|
|
+<div class="content">
|
|
|
+ <p>
|
|
|
+ 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.
|
|
|
+ </p>
|
|
|
+</div>
|
|
|
|
|
|
- <div class="example is-paddingless">
|
|
|
- <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" style="display: flex;">
|
|
|
- <span aria-hidden="true"></span>
|
|
|
- <span aria-hidden="true"></span>
|
|
|
- <span aria-hidden="true"></span>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
+<div class="bd-example is-paddingless">
|
|
|
+ {{navbar_brand_items_example}}
|
|
|
+</div>
|
|
|
|
|
|
- {% highlight html %}{{ navbar_burger_example }}{% endhighlight %}
|
|
|
+{% highlight html %}{{navbar_brand_items_example}}{% endhighlight %}
|
|
|
|
|
|
- <div class="content">
|
|
|
- <p>
|
|
|
- You can add the modifier class <code>is-active</code> to turn it into a cross.
|
|
|
- </p>
|
|
|
- </div>
|
|
|
+<div class="content">
|
|
|
+ <p>
|
|
|
+ On desktop {% include bp/desktop.html %}, the navbar brand will only take up the space it needs.
|
|
|
+ </p>
|
|
|
+</div>
|
|
|
|
|
|
- <div class="example is-paddingless">
|
|
|
- <a role="button" class="navbar-burger is-active" aria-label="menu" aria-expanded="false" style="display: flex;">
|
|
|
- <span aria-hidden="true"></span>
|
|
|
- <span aria-hidden="true"></span>
|
|
|
- <span aria-hidden="true"></span>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
+{% include anchor.html name="Navbar burger" %}
|
|
|
|
|
|
- {% include anchor.html name="Navbar menu" %}
|
|
|
+<div class="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>
|
|
|
|
|
|
- <div class="content">
|
|
|
- <p>
|
|
|
- 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</code>, as a sibling of <code>navbar-brand</code>.
|
|
|
- </p>
|
|
|
- </div>
|
|
|
+<div class="example is-paddingless">
|
|
|
+ <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" style="display: flex;">
|
|
|
+ <span aria-hidden="true"></span>
|
|
|
+ <span aria-hidden="true"></span>
|
|
|
+ <span aria-hidden="true"></span>
|
|
|
+ </a>
|
|
|
+</div>
|
|
|
|
|
|
- {% highlight html %}{{navbar_menu_example}}{% endhighlight %}
|
|
|
+{% highlight html %}{{ navbar_burger_example }}{% endhighlight %}
|
|
|
|
|
|
- <div class="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>
|
|
|
+<div class="content">
|
|
|
+ <p>
|
|
|
+ You can add the modifier class <code>is-active</code> to turn it into a cross.
|
|
|
+ </p>
|
|
|
+</div>
|
|
|
|
|
|
- {% highlight html %}{{navbar_menu_active_example}}{% endhighlight %}
|
|
|
+<div class="example is-paddingless">
|
|
|
+ <a role="button" class="navbar-burger is-active" aria-label="menu" aria-expanded="false" style="display: flex;">
|
|
|
+ <span aria-hidden="true"></span>
|
|
|
+ <span aria-hidden="true"></span>
|
|
|
+ <span aria-hidden="true"></span>
|
|
|
+ </a>
|
|
|
+</div>
|
|
|
|
|
|
- <div class="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>
|
|
|
+{% include anchor.html name="Navbar menu" %}
|
|
|
|
|
|
- <hr>
|
|
|
+<div class="content">
|
|
|
+ <p>
|
|
|
+ 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</code>, as a sibling of <code>navbar-brand</code>.
|
|
|
+ </p>
|
|
|
+</div>
|
|
|
|
|
|
- <div id="navbarJsExample" class="message is-info">
|
|
|
- <h4 class="message-header">Javascript toggle</h4>
|
|
|
- <div class="message-body">
|
|
|
- <div class="content">
|
|
|
- <p>
|
|
|
- The Bulma package <strong>does not come with any JavaScript</strong>.
|
|
|
- <br>
|
|
|
- Here is however an implementation example, which toggles the class <code>is-active</code> on both the <code>navbar-burger</code> and the targeted <code>navbar-menu</code>.
|
|
|
- </p>
|
|
|
+{% highlight html %}{{navbar_menu_example}}{% endhighlight %}
|
|
|
|
|
|
- {% highlight html %}{{ navbar_js_html }}{% endhighlight %}
|
|
|
+<div class="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 javascript %}{{ navbar_js_code }}{% endhighlight %}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+{% highlight html %}{{navbar_menu_active_example}}{% endhighlight %}
|
|
|
+
|
|
|
+<div class="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>
|
|
|
|
|
|
- {% include anchor.html name="Navbar start and navbar end" %}
|
|
|
+<hr>
|
|
|
|
|
|
+<div id="navbarJsExample" class="message is-info">
|
|
|
+ <h4 class="message-header">Javascript toggle</h4>
|
|
|
+ <div class="message-body">
|
|
|
<div class="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>.
|
|
|
+ The Bulma package <strong>does not come with any JavaScript</strong>.
|
|
|
+ <br>
|
|
|
+ Here is however an implementation example, which toggles the class <code>is-active</code> on both the <code>navbar-burger</code> and the targeted <code>navbar-menu</code>.
|
|
|
</p>
|
|
|
- </div>
|
|
|
-
|
|
|
- {% highlight html %}{{navbar_start_end_example}}{% endhighlight %}
|
|
|
|
|
|
- {% include anchor.html name="Navbar item" %}
|
|
|
+ {% highlight html %}{{ navbar_js_html }}{% endhighlight %}
|
|
|
|
|
|
- <div class="content">
|
|
|
- <p>
|
|
|
- A <code>navbar-item</code> is a repeatable element that can be:
|
|
|
- </p>
|
|
|
- <ul class="bd-spaced">
|
|
|
- <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>
|
|
|
- <div class="highlight-full">
|
|
|
- {% highlight html %}{{ navbar_item_other_example }}{% endhighlight %}
|
|
|
- </div>
|
|
|
- </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:
|
|
|
- </p>
|
|
|
- <ul>
|
|
|
- <li>
|
|
|
- <code>navbar</code>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <code>navbar-brand</code>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <code>navbar-start</code>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <code>navbar-end</code>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <code>navbar-dropdown</code>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <p>
|
|
|
- You can add the modifier class <code>is-expanded</code> to turn it into a full-width element.
|
|
|
- </p>
|
|
|
+ {% highlight javascript %}{{ navbar_js_code }}{% endhighlight %}
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
|
|
|
- {% include anchor.html name="Transparent navbar" %}
|
|
|
-
|
|
|
- <div class="content">
|
|
|
- <p>
|
|
|
- To seamlessly integrate the navbar in any visual context, you can add the <code>is-transparent</code> modifier on the <code>navbar</code> component. This will remove any hover or active background from the navbar items.
|
|
|
- </p>
|
|
|
- </div>
|
|
|
+{% include anchor.html name="Navbar start and navbar end" %}
|
|
|
+
|
|
|
+<div class="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>
|
|
|
|
|
|
- {% include snippet.html content=navbar_transparent_example paddingless=true horizontal=true more=true %}
|
|
|
+{% highlight html %}{{navbar_start_end_example}}{% endhighlight %}
|
|
|
+
|
|
|
+{% include anchor.html name="Navbar item" %}
|
|
|
+
|
|
|
+<div class="content">
|
|
|
+ <p>
|
|
|
+ A <code>navbar-item</code> is a repeatable element that can be:
|
|
|
+ </p>
|
|
|
+ <ul class="bd-spaced">
|
|
|
+ <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>
|
|
|
+ <div class="highlight-full">
|
|
|
+ {% highlight html %}{{ navbar_item_other_example }}{% endhighlight %}
|
|
|
+ </div>
|
|
|
+ </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:
|
|
|
+ </p>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <code>navbar</code>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <code>navbar-brand</code>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <code>navbar-start</code>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <code>navbar-end</code>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <code>navbar-dropdown</code>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <p>
|
|
|
+ You can add the modifier class <code>is-expanded</code> to turn it into a full-width element.
|
|
|
+ </p>
|
|
|
+</div>
|
|
|
|
|
|
- {% include anchor.html name="Fixed navbar" %}
|
|
|
+{% include anchor.html name="Transparent navbar" %}
|
|
|
|
|
|
- {% include elements/new-tag.html version="0.6.1" %}
|
|
|
+<div class="content">
|
|
|
+ <p>
|
|
|
+ To seamlessly integrate the navbar in any visual context, you can add the <code>is-transparent</code> modifier on the <code>navbar</code> component. This will remove any hover or active background from the navbar items.
|
|
|
+ </p>
|
|
|
+</div>
|
|
|
|
|
|
- <div class="content">
|
|
|
- <p>
|
|
|
- You can now <strong>fix</strong> the navbar to either the <strong>top</strong> or <strong>bottom</strong> of the page. This is a 2-step process:
|
|
|
- </p>
|
|
|
- <ul class="bd-spaced">
|
|
|
- <li>
|
|
|
- Add either <code>is-fixed-top</code> or <code>is-fixed-bottom</code> to the <code>navbar</code> component
|
|
|
- {% highlight html %}<nav class="navbar is-fixed-top">{% endhighlight %}
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- Add the corresponding <code>has-navbar-fixed-top</code> or <code>has-navbar-fixed-bottom</code> modifier to either <code><html></code> or <code><body></code> element to provide the appropriate padding to the page
|
|
|
- {% highlight html %}<html class="has-navbar-fixed-top">{% endhighlight %}
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
+{% include snippet.html content=navbar_transparent_example paddingless=true horizontal=true more=true %}
|
|
|
+
|
|
|
+{% include anchor.html name="Fixed navbar" %}
|
|
|
+
|
|
|
+{% include elements/new-tag.html version="0.6.1" %}
|
|
|
+
|
|
|
+<div class="content">
|
|
|
+ <p>
|
|
|
+ You can now <strong>fix</strong> the navbar to either the <strong>top</strong> or <strong>bottom</strong> of the page. This is a 2-step process:
|
|
|
+ </p>
|
|
|
+ <ul class="bd-spaced">
|
|
|
+ <li>
|
|
|
+ Add either <code>is-fixed-top</code> or <code>is-fixed-bottom</code> to the <code>navbar</code> component
|
|
|
+ {% highlight html %}<nav class="navbar is-fixed-top">{% endhighlight %}
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ Add the corresponding <code>has-navbar-fixed-top</code> or <code>has-navbar-fixed-bottom</code> modifier to either <code><html></code> or <code><body></code> element to provide the appropriate padding to the page
|
|
|
+ {% highlight html %}<html class="has-navbar-fixed-top">{% endhighlight %}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+</div>
|
|
|
|
|
|
- <h4 class="title is-5">Try it out!</h4>
|
|
|
+<h4 class="title is-5">Try it out!</h4>
|
|
|
|
|
|
- <div id="navbarToggles" class="buttons">
|
|
|
- <a id="navbarFixBottom" class="button is-link">
|
|
|
- <span><span id="navbarFixBottomText">Show</span> <strong>bottom</strong> navbar</span>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
+<div id="navbarToggles" class="buttons">
|
|
|
+ <a id="navbarFixBottom" class="button is-link">
|
|
|
+ <span><span id="navbarFixBottomText">Show</span> <strong>bottom</strong> navbar</span>
|
|
|
+ </a>
|
|
|
+</div>
|
|
|
|
|
|
- {% include anchor.html name="Dropdown menu" %}
|
|
|
+{% include anchor.html name="Dropdown menu" %}
|
|
|
+
|
|
|
+<div class="content">
|
|
|
+ <p>
|
|
|
+ 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>
|
|
|
|
|
|
- <div class="content">
|
|
|
- <p>
|
|
|
- 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 class="columns">
|
|
|
+ <div class="column">
|
|
|
+ <div class="bd-example is-paddingless">
|
|
|
+ {{ navbar_dropdown_example }}
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="columns">
|
|
|
- <div class="column">
|
|
|
- <div class="bd-example is-paddingless">
|
|
|
- {{ navbar_dropdown_example }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="column">
|
|
|
+ {% highlight html %}{{ navbar_dropdown_example }}{% endhighlight %}
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
|
|
|
- <div class="column">
|
|
|
- {% highlight html %}{{ navbar_dropdown_example }}{% endhighlight %}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+<h4 class="title is-4">
|
|
|
+ Show/hide the dropdown with either <strong>CSS</strong> or <strong>JavaScript</strong>
|
|
|
+</h4>
|
|
|
+
|
|
|
+<div class="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>
|
|
|
|
|
|
- <h4 class="title is-4">
|
|
|
- Show/hide the dropdown with either <strong>CSS</strong> or <strong>JavaScript</strong>
|
|
|
- </h4>
|
|
|
+<div class="message is-success">
|
|
|
+ <p class="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>
|
|
|
|
|
|
- <div class="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>
|
|
|
+{% highlight html %}{{ navbar_dropdown_hover_snippet }}{% endhighlight %}
|
|
|
|
|
|
- <div class="message is-success">
|
|
|
- <p class="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 class="columns">
|
|
|
+ <div class="column">
|
|
|
+ <div class="bd-example is-paddingless">
|
|
|
+ {{ navbar_dropdown_hover_example }}
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
- {% highlight html %}{{ navbar_dropdown_hover_snippet }}{% endhighlight %}
|
|
|
+ <div class="column">
|
|
|
+ {% highlight html %}{{ navbar_dropdown_hover_example }}{% endhighlight %}
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
|
|
|
- <div class="columns">
|
|
|
- <div class="column">
|
|
|
- <div class="bd-example is-paddingless">
|
|
|
- {{ navbar_dropdown_hover_example }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+{% highlight html %}{{ navbar_dropdown_active_snippet }}{% endhighlight %}
|
|
|
|
|
|
- <div class="column">
|
|
|
- {% highlight html %}{{ navbar_dropdown_hover_example }}{% endhighlight %}
|
|
|
- </div>
|
|
|
+<div class="columns">
|
|
|
+ <div class="column">
|
|
|
+ <div class="bd-example is-paddingless">
|
|
|
+ {{ navbar_dropdown_active_example }}
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
- {% highlight html %}{{ navbar_dropdown_active_snippet }}{% endhighlight %}
|
|
|
+ <div class="column">
|
|
|
+ {% highlight html %}{{ navbar_dropdown_active_example }}{% endhighlight %}
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
|
|
|
- <div class="columns">
|
|
|
- <div class="column">
|
|
|
- <div class="bd-example is-paddingless">
|
|
|
- {{ navbar_dropdown_active_example }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+<h4 class="title is-4">
|
|
|
+ Right dropdown
|
|
|
+</h4>
|
|
|
|
|
|
- <div class="column">
|
|
|
- {% highlight html %}{{ navbar_dropdown_active_example }}{% endhighlight %}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+<div class="content">
|
|
|
+ <p>
|
|
|
+ If your parent <code>navbar-item</code> is on the right side, you can position the dropdown to start from the <strong>right</strong> with the <code>is-right</code> modifier.
|
|
|
+ </p>
|
|
|
+</div>
|
|
|
|
|
|
- <h4 class="title is-4">
|
|
|
- Right dropdown
|
|
|
- </h4>
|
|
|
+{% highlight html %}{{ navbar_dropdown_right_snippet }}{% endhighlight %}
|
|
|
|
|
|
- <div class="content">
|
|
|
- <p>
|
|
|
- If your parent <code>navbar-item</code> is on the right side, you can position the dropdown to start from the <strong>right</strong> with the <code>is-right</code> modifier.
|
|
|
- </p>
|
|
|
+<div class="columns">
|
|
|
+ <div class="column">
|
|
|
+ <div class="bd-example is-paddingless">
|
|
|
+ {{ navbar_dropdown_right_example }}
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
- {% highlight html %}{{ navbar_dropdown_right_snippet }}{% endhighlight %}
|
|
|
+ <div class="column">
|
|
|
+ {% highlight html %}{{ navbar_dropdown_right_example }}{% endhighlight %}
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
|
|
|
- <div class="columns">
|
|
|
- <div class="column">
|
|
|
- <div class="bd-example is-paddingless">
|
|
|
- {{ navbar_dropdown_right_example }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+<h4 class="title is-4">
|
|
|
+ Dropup
|
|
|
+</h4>
|
|
|
|
|
|
- <div class="column">
|
|
|
- {% highlight html %}{{ navbar_dropdown_right_example }}{% endhighlight %}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+{% include elements/new-tag.html version="0.6.1" %}
|
|
|
|
|
|
- <h4 class="title is-4">
|
|
|
- Dropup
|
|
|
- </h4>
|
|
|
+<div class="content">
|
|
|
+ <p>
|
|
|
+ If you're using a navbar at the bottom, like the <a href="#fixed-navbar">fixed bottom navbar</a>, you might want to use a <strong>dropup menu</strong>. Simply add the <code>has-dropdown</code> and <code>has-dropdown-up</code> modifiers to the parent <code>navbar-item</code>.
|
|
|
+ </p>
|
|
|
+</div>
|
|
|
|
|
|
- {% include elements/new-tag.html version="0.6.1" %}
|
|
|
+{% highlight html %}{{ navbar_dropup_snippet }}{% endhighlight %}
|
|
|
|
|
|
- <div class="content">
|
|
|
- <p>
|
|
|
- If you're using a navbar at the bottom, like the <a href="#fixed-navbar">fixed bottom navbar</a>, you might want to use a <strong>dropup menu</strong>. Simply add the <code>has-dropdown</code> and <code>has-dropdown-up</code> modifiers to the parent <code>navbar-item</code>.
|
|
|
- </p>
|
|
|
+<div class="columns">
|
|
|
+ <div class="column">
|
|
|
+ <div class="bd-example is-paddingless">
|
|
|
+ {{ navbar_dropup_example }}
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
- {% highlight html %}{{ navbar_dropup_snippet }}{% endhighlight %}
|
|
|
+ <div class="column">
|
|
|
+ {% highlight html %}{{ navbar_dropup_example }}{% endhighlight %}
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
|
|
|
- <div class="columns">
|
|
|
- <div class="column">
|
|
|
- <div class="bd-example is-paddingless">
|
|
|
- {{ navbar_dropup_example }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+<h4 class="title is-4">
|
|
|
+ Styles for the dropdown menu
|
|
|
+</h4>
|
|
|
+
|
|
|
+<div class="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>
|
|
|
|
|
|
- <div class="column">
|
|
|
- {% highlight html %}{{ navbar_dropup_example }}{% endhighlight %}
|
|
|
- </div>
|
|
|
+<div class="columns">
|
|
|
+ <div class="column">
|
|
|
+ <div class="bd-example is-paddingless">
|
|
|
+ {{ navbar_dropdown_default_example }}
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <h4 class="title is-4">
|
|
|
- Styles for the dropdown menu
|
|
|
- </h4>
|
|
|
-
|
|
|
- <div class="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>
|
|
|
+ <div class="column">
|
|
|
+ {% highlight html %}{{ navbar_dropdown_default_example }}{% endhighlight %}
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
|
|
|
- <div class="columns">
|
|
|
- <div class="column">
|
|
|
- <div class="bd-example is-paddingless">
|
|
|
- {{ navbar_dropdown_default_example }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+<div class="content">
|
|
|
+ <p>
|
|
|
+ When having a <a href="#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>
|
|
|
|
|
|
- <div class="column">
|
|
|
- {% highlight html %}{{ navbar_dropdown_default_example }}{% endhighlight %}
|
|
|
- </div>
|
|
|
+<div class="columns">
|
|
|
+ <div class="column">
|
|
|
+ <div class="bd-example is-paddingless">
|
|
|
+ {{ navbar_dropdown_boxed_example }}
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="content">
|
|
|
- <p>
|
|
|
- When having a <a href="#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>
|
|
|
+ <div class="column">
|
|
|
+ {% highlight html %}{{ navbar_dropdown_boxed_example }}{% endhighlight %}
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
|
|
|
- <div class="columns">
|
|
|
- <div class="column">
|
|
|
- <div class="bd-example is-paddingless">
|
|
|
- {{ navbar_dropdown_boxed_example }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+<h4 class="title is-4">
|
|
|
+ Active dropdown navbar item
|
|
|
+</h4>
|
|
|
|
|
|
- <div class="column">
|
|
|
- {% highlight html %}{{ navbar_dropdown_boxed_example }}{% endhighlight %}
|
|
|
- </div>
|
|
|
+<div class="columns">
|
|
|
+ <div class="column">
|
|
|
+ <div class="bd-example is-paddingless">
|
|
|
+ {{ navbar_dropdown_item_active_example }}
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <h4 class="title is-4">
|
|
|
- Active dropdown navbar item
|
|
|
- </h4>
|
|
|
-
|
|
|
- <div class="columns">
|
|
|
- <div class="column">
|
|
|
- <div class="bd-example is-paddingless">
|
|
|
- {{ navbar_dropdown_item_active_example }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="column">
|
|
|
- {% highlight html %}{{ navbar_dropdown_item_active_example }}{% endhighlight %}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="column">
|
|
|
+ {% highlight html %}{{ navbar_dropdown_item_active_example }}{% endhighlight %}
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
|
|
|
- <h4 class="title is-4">
|
|
|
- Dropdown divider
|
|
|
- </h4>
|
|
|
+<h4 class="title is-4">
|
|
|
+ Dropdown divider
|
|
|
+</h4>
|
|
|
|
|
|
- <div class="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>
|
|
|
+<div class="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 %}
|
|
|
+{% highlight html %}{{ navbar_divider_example }}{% endhighlight %}
|
|
|
|
|
|
- {% include anchor.html name="Colors" %}
|
|
|
+{% include anchor.html name="Colors" %}
|
|
|
|
|
|
- <div class="tags has-addons">
|
|
|
- <span class="tag">New!</span>
|
|
|
- <span class="tag is-info">0.5.2</span>
|
|
|
- </div>
|
|
|
+<div class="tags has-addons">
|
|
|
+ <span class="tag">New!</span>
|
|
|
+ <span class="tag is-info">0.5.2</span>
|
|
|
+</div>
|
|
|
|
|
|
- <div class="content">
|
|
|
- <p>
|
|
|
- You can change the background color of the <code>navbar</code> by using one of the <strong>9 color modifiers:</strong>
|
|
|
- </p>
|
|
|
- <ul>
|
|
|
- <li><code>is-primary</code></li>
|
|
|
- <li><code>is-link</code></li>
|
|
|
- <li><code>is-info</code></li>
|
|
|
- <li><code>is-success</code></li>
|
|
|
- <li><code>is-warning</code></li>
|
|
|
- <li><code>is-danger</code></li>
|
|
|
- <li><code>is-black</code></li>
|
|
|
- <li><code>is-dark</code></li>
|
|
|
- <li><code>is-light</code></li>
|
|
|
- <li><code>is-white</code></li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
+<div class="content">
|
|
|
+ <p>
|
|
|
+ You can change the background color of the <code>navbar</code> by using one of the <strong>9 color modifiers:</strong>
|
|
|
+ </p>
|
|
|
+ <ul>
|
|
|
+ <li><code>is-primary</code></li>
|
|
|
+ <li><code>is-link</code></li>
|
|
|
+ <li><code>is-info</code></li>
|
|
|
+ <li><code>is-success</code></li>
|
|
|
+ <li><code>is-warning</code></li>
|
|
|
+ <li><code>is-danger</code></li>
|
|
|
+ <li><code>is-black</code></li>
|
|
|
+ <li><code>is-dark</code></li>
|
|
|
+ <li><code>is-light</code></li>
|
|
|
+ <li><code>is-white</code></li>
|
|
|
+ </ul>
|
|
|
+</div>
|
|
|
|
|
|
- {% highlight html %}{{ navbar_color_markup }}{% endhighlight %}
|
|
|
+{% highlight html %}{{ navbar_color_markup }}{% endhighlight %}
|
|
|
|
|
|
- <div class="bd-example is-paddingless">
|
|
|
- {% include examples/navbar-color.html color="primary" %}
|
|
|
- </div>
|
|
|
+<div class="bd-example is-paddingless">
|
|
|
+ {% include examples/navbar-color.html color="primary" %}
|
|
|
+</div>
|
|
|
|
|
|
- <div class="bd-example is-paddingless">
|
|
|
- {% include examples/navbar-color.html color="link" %}
|
|
|
- </div>
|
|
|
+<div class="bd-example is-paddingless">
|
|
|
+ {% include examples/navbar-color.html color="link" %}
|
|
|
+</div>
|
|
|
|
|
|
- <div class="bd-example is-paddingless">
|
|
|
- {% include examples/navbar-color.html color="info" %}
|
|
|
- </div>
|
|
|
+<div class="bd-example is-paddingless">
|
|
|
+ {% include examples/navbar-color.html color="info" %}
|
|
|
+</div>
|
|
|
|
|
|
- <div class="bd-example is-paddingless">
|
|
|
- {% include examples/navbar-color.html color="success" %}
|
|
|
- </div>
|
|
|
+<div class="bd-example is-paddingless">
|
|
|
+ {% include examples/navbar-color.html color="success" %}
|
|
|
+</div>
|
|
|
|
|
|
- <div class="bd-example is-paddingless">
|
|
|
- {% include examples/navbar-color.html color="warning" light=true %}
|
|
|
- </div>
|
|
|
+<div class="bd-example is-paddingless">
|
|
|
+ {% include examples/navbar-color.html color="warning" light=true %}
|
|
|
+</div>
|
|
|
|
|
|
- <div class="bd-example is-paddingless">
|
|
|
- {% include examples/navbar-color.html color="danger" %}
|
|
|
- </div>
|
|
|
+<div class="bd-example is-paddingless">
|
|
|
+ {% include examples/navbar-color.html color="danger" %}
|
|
|
+</div>
|
|
|
|
|
|
- <div class="bd-example is-paddingless">
|
|
|
- {% include examples/navbar-color.html color="black" %}
|
|
|
- </div>
|
|
|
+<div class="bd-example is-paddingless">
|
|
|
+ {% include examples/navbar-color.html color="black" %}
|
|
|
+</div>
|
|
|
|
|
|
- <div class="bd-example is-paddingless">
|
|
|
- {% include examples/navbar-color.html color="dark" %}
|
|
|
- </div>
|
|
|
+<div class="bd-example is-paddingless">
|
|
|
+ {% include examples/navbar-color.html color="dark" %}
|
|
|
+</div>
|
|
|
|
|
|
- <div class="bd-example is-paddingless">
|
|
|
- {% include examples/navbar-color.html color="light" light=true %}
|
|
|
- </div>
|
|
|
+<div class="bd-example is-paddingless">
|
|
|
+ {% include examples/navbar-color.html color="light" light=true %}
|
|
|
+</div>
|
|
|
|
|
|
- <div class="bd-example is-paddingless">
|
|
|
- {% include examples/navbar-color.html color="white" light=true %}
|
|
|
- </div>
|
|
|
+<div class="bd-example is-paddingless">
|
|
|
+ {% include examples/navbar-color.html color="white" light=true %}
|
|
|
+</div>
|
|
|
|
|
|
- {% include variables.html type='component' %}
|
|
|
+{% include variables.html type='component' %}
|
|
|
|
|
|
- </div>
|
|
|
-</section>
|
Jeremy Thomas