bulma/docs/documentation/navbar.html
2016-10-16 19:19:40 +01:00

258 lines
7.6 KiB
HTML

---
layout: documentation
doc-tab: navbar
---
<section class="section">
<div class="container">
<h1 class="title">Navbar</h1>
<h2 class="subtitle">A multi-purpose <strong>horizontal navbar</strong>, which can contain almost any other element</h2>
<hr>
<div class="content">
<p>The <strong>structure</strong> of a navbar is the following:</p>
<ul>
<li>
<code>navbar</code>: main container
<ul>
<li><code>navbar-left</code> for the left side</li>
<li>
<code>navbar-right</code> for the right side
<ul>
<li><code>navbar-item</code> for each individual element</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>In a <code>navbar-item</code>, you can then insert almost <em>anything</em> you want: a title, a button, a text input, or just simple text. No matter what elements you put inside a Bulma <code>navbar</code>, they will always be <strong>vertically aligned</strong>.</p>
</div>
<div class="structure">
<nav class="navbar structure-item is-structure-container" title="navbar">
<div class="navbar-left structure-item" title="navbar-left">
<div class="navbar-item">
<p class="subtitle is-5">
<strong>123</strong> posts
</p>
</div>
<div class="navbar-item">
<p class="control has-addons">
<input class="input" type="text" placeholder="Find a post">
<button class="button">
Search
</button>
</p>
</div>
</div>
<div class="navbar-right structure-item" title="navbar-right">
<p class="navbar-item">
<strong>All</strong>
</p>
<p class="navbar-item">
<a>Published</a>
</p>
<p class="navbar-item">
<a>Drafts</a>
</p>
<p class="navbar-item">
<a>Deleted</a>
</p>
<p class="navbar-item">
<a class="button is-success">
New
</a>
</p>
</div>
</nav>
</div>
<div class="example">
<nav class="navbar">
<div class="navbar-left">
<div class="navbar-item">
<p class="subtitle is-5">
<strong>123</strong> posts
</p>
</div>
<div class="navbar-item">
<p class="control has-addons">
<input class="input" type="text" placeholder="Find a post">
<button class="button">
Search
</button>
</p>
</div>
</div>
<div class="navbar-right">
<p class="navbar-item">
<strong>All</strong>
</p>
<p class="navbar-item">
<a>Published</a>
</p>
<p class="navbar-item">
<a>Drafts</a>
</p>
<p class="navbar-item">
<a>Deleted</a>
</p>
<p class="navbar-item">
<a class="button is-success">
New
</a>
</p>
</div>
</nav>
</div>
{% highlight html %}
<!-- Main container -->
<nav class="navbar">
<!-- Left side -->
<div class="navbar-left">
<div class="navbar-item">
<p class="subtitle is-5">
<strong>123</strong> posts
</p>
</div>
<div class="navbar-item">
<p class="control has-addons">
<input class="input" type="text" placeholder="Find a post">
<button class="button">
Search
</button>
</p>
</div>
</div>
<!-- Right side -->
<div class="navbar-right">
<p class="navbar-item"><strong>All</strong></p>
<p class="navbar-item"><a>Published</a></p>
<p class="navbar-item"><a>Drafts</a></p>
<p class="navbar-item"><a>Deleted</a></p>
<p class="navbar-item"><a class="button is-success">New</a></p>
</div>
</nav>
{% endhighlight %}
<hr>
<h3 class="title">Centered navbar</h3>
<div class="content">
If you want a <strong>centered navbar</strong>, you can use as many <code>navbar-item</code> as you want, as long as they are <strong>direct</strong> children of the <code>navbar</code> container.
</div>
<div class="example">
<nav class="navbar">
<div class="navbar-item has-text-centered">
<p class="heading">Tweets</p>
<p class="title">3,456</p>
</div>
<div class="navbar-item has-text-centered">
<p class="heading">Following</p>
<p class="title">123</p>
</div>
<div class="navbar-item has-text-centered">
<p class="heading">Followers</p>
<p class="title">456K</p>
</div>
<div class="navbar-item has-text-centered">
<p class="heading">Likes</p>
<p class="title">789</p>
</div>
</nav>
</div>
{% highlight html %}
<nav class="navbar">
<div class="navbar-item has-text-centered">
<p class="heading">Tweets</p>
<p class="title">3,456</p>
</div>
<div class="navbar-item has-text-centered">
<p class="heading">Following</p>
<p class="title">123</p>
</div>
<div class="navbar-item has-text-centered">
<p class="heading">Followers</p>
<p class="title">456K</p>
</div>
<div class="navbar-item has-text-centered">
<p class="heading">Likes</p>
<p class="title">789</p>
</div>
</nav>
{% endhighlight %}
<div class="example">
<nav class="navbar">
<p class="navbar-item has-text-centered">
<a class="link is-info">Home</a>
</p>
<p class="navbar-item has-text-centered">
<a class="link is-info">Menu</a>
</p>
<p class="navbar-item has-text-centered">
<img src="{{ site.url }}/images/bulma-type.png" alt="" style="height: 33px;">
</p>
<p class="navbar-item has-text-centered">
<a class="link is-info">Reservations</a>
</p>
<p class="navbar-item has-text-centered">
<a class="link is-info">Contact</a>
</p>
</nav>
</div>
{% highlight html %}
<nav class="navbar">
<p class="navbar-item has-text-centered">
<a class="link is-info">Home</a>
</p>
<p class="navbar-item has-text-centered">
<a class="link is-info">Menu</a>
</p>
<p class="navbar-item has-text-centered">
<img src="{{ site.url }}/images/bulma-type.png" alt="" style="height: 33px;">
</p>
<p class="navbar-item has-text-centered">
<a class="link is-info">Reservations</a>
</p>
<p class="navbar-item has-text-centered">
<a class="link is-info">Contact</a>
</p>
</nav>
{% endhighlight %}
<hr>
<h3 class="title">Mobile navbar</h3>
<div class="content">
By default, for space concerns, the navbar is vertical on mobile. If you want the navbar to be horizontal on mobile as well, add the <code>is-mobile</code> modifier on the <code>navbar</code> container.
</div>
<div class="example">
<nav class="navbar is-mobile">
<div class="navbar-item has-text-centered">
<p class="heading">Tweets</p>
<p class="title">3,456</p>
</div>
<div class="navbar-item has-text-centered">
<p class="heading">Following</p>
<p class="title">123</p>
</div>
<div class="navbar-item has-text-centered">
<p class="heading">Followers</p>
<p class="title">456K</p>
</div>
<div class="navbar-item has-text-centered">
<p class="heading">Likes</p>
<p class="title">789</p>
</div>
</nav>
</div>
</div>
</section>