bulma/docs/versions/0.5.2/documentation/components/navbar/index.html
2017-10-02 19:24:29 +01:00

3318 lines
139 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en" class="route-documentation">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Bulma v0.5.2 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
<title>Bulma v0.5.2: a modern CSS framework based on Flexbox</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://bulma.io/versions/0.5.2/css/bulma-docs.css?v=20170911-2007">
<link rel="canonical" href="http://bulma.io/versions/0.5.2/documentation/components/navbar/">
<link rel="alternate" type="application/rss+xml" title="Bulma v0.5.2: a modern CSS framework based on Flexbox" href="http://bulma.io/versions/0.5.2/feed.xml">
<meta property="og:url" content="http://bulma.io/versions/0.5.2">
<meta property="og:type" content="website">
<meta property="og:title" content="Bulma v0.5.2: a modern CSS framework based on Flexbox">
<meta property="og:image" content="http://bulma.io/versions/0.5.2/images/bulma-banner.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:description" content="Bulma v0.5.2 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@jgthms">
<meta name="twitter:creator" content="@jgthms">
<meta name="twitter:title" content="Bulma v0.5.2: a modern CSS framework based on Flexbox">
<meta name="twitter:image" content="http://bulma.io/versions/0.5.2/images/bulma-banner.png">
<meta name="twitter:description" content="Bulma v0.5.2 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
<link rel="apple-touch-icon" sizes="180x180" href="http://bulma.io/versions/0.5.2/favicons/apple-touch-icon.png?v=201701041855">
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.2/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.2/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
<link rel="manifest" href="http://bulma.io/versions/0.5.2/favicons/manifest.json?v=201701041855">
<link rel="mask-icon" href="http://bulma.io/versions/0.5.2/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
<link rel="shortcut icon" href="http://bulma.io/versions/0.5.2/favicons/favicon.ico?v=201701041855">
<meta name="msapplication-config" content="http://bulma.io/versions/0.5.2/favicons/browserconfig.xml?v=201701041855">
<meta name="theme-color" content="#00d1b2">
</head>
<body class="layout-documentation page-components">
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
<p>
You are viewing the deprecated <strong>0.5.2</strong> version of the website.
<a href="/">Click here to view the latest version</a>
</p>
</div>
<div class="container">
<nav class="navbar ">
<div class="navbar-brand">
<a class="navbar-item" href="http://bulma.io/versions/0.5.2">
<img src="http://bulma.io/versions/0.5.2/images/bulma-logo.png" alt="Bulma v0.5.2: a modern CSS framework based on Flexbox" width="112" height="28">
</a>
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
<span class="icon" style="color: #333;">
<i class="fa fa-lg fa-github"></i>
</span>
</a>
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
<span class="icon" style="color: #55acee;">
<i class="fa fa-lg fa-twitter"></i>
</span>
</a>
<div class="navbar-burger burger" data-target="navMenuDocumentation">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navMenuDocumentation" class="navbar-menu">
<div class="navbar-start">
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link is-active" href="/versions/0.5.2/documentation/overview/start/">
Docs
</a>
<div class="navbar-dropdown ">
<a class="navbar-item " href="/versions/0.5.2/documentation/overview/start/">
Overview
</a>
<a class="navbar-item " href="http://bulma.io/versions/0.5.2/documentation/modifiers/syntax/">
Modifiers
</a>
<a class="navbar-item " href="http://bulma.io/versions/0.5.2/documentation/columns/basics/">
Columns
</a>
<a class="navbar-item " href="http://bulma.io/versions/0.5.2/documentation/layout/container/">
Layout
</a>
<a class="navbar-item " href="http://bulma.io/versions/0.5.2/documentation/form/general/">
Form
</a>
<a class="navbar-item " href="http://bulma.io/versions/0.5.2/documentation/elements/box/">
Elements
</a>
<a class="navbar-item is-active" href="http://bulma.io/versions/0.5.2/documentation/components/breadcrumb/">
Components
</a>
<hr class="navbar-divider">
<div class="navbar-item">
<div>
<p class="is-size-6-desktop">
<strong class="has-text-info">0.5.2</strong>
</p>
<small>
<a class="bd-view-all-versions" href="/versions">View all versions</a>
</small>
</div>
</div>
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link " href="http://bulma.io/versions/0.5.2/blog/">
Blog
</a>
<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
<a class="navbar-item" href="/2017/08/03/list-of-tags/">
<div class="navbar-content">
<p>
<small class="has-text-info">03 Aug 2017</small>
</p>
<p>New feature: list of tags</p>
</div>
</a>
<a class="navbar-item" href="/2017/08/01/bulma-bootstrap-comparison/">
<div class="navbar-content">
<p>
<small class="has-text-info">01 Aug 2017</small>
</p>
<p>Bulma / Bootstrap comparison</p>
</div>
</a>
<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
<div class="navbar-content">
<p>
<small class="has-text-info">24 Jul 2017</small>
</p>
<p>Access previous Bulma versions</p>
</div>
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/blog/">
More posts
</a>
<hr class="navbar-divider">
<div class="navbar-item">
<div class="navbar-content">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<strong>Stay up to date!</strong>
</div>
</div>
<div class="level-right">
<div class="level-item">
<a class="button bd-is-rss is-small" href="http://bulma.io/versions/0.5.2/atom.xml">
<span class="icon is-small">
<i class="fa fa-rss"></i>
</span>
<span>Subscribe</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<div class="navbar-link">
More
</div>
<div id="moreDropdown" class="navbar-dropdown ">
<a class="navbar-item " href="http://bulma.io/versions/0.5.2/extensions/">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<p>
<strong>Extensions</strong>
<br>
<small>Side projects to enhance Bulma</small>
</p>
</div>
</div>
<div class="level-right">
<div class="level-item">
<span class="icon has-text-info">
<i class="fa fa-plug"></i>
</span>
</div>
</div>
</div>
</a>
</div>
</div>
<a class="navbar-item " href="http://bulma.io/versions/0.5.2/expo/">
<span class="bd-emoji">⭐️</span>
Expo
</a>
<a class="navbar-item " href="http://bulma.io/versions/0.5.2/love/">
<span class="bd-emoji">❤️</span>
Love
</a>
</div>
<div class="navbar-end">
<a class="navbar-item is-hidden-desktop-only" href="https://github.com/jgthms/bulma" target="_blank">
<span class="icon" style="color: #333;">
<i class="fa fa-lg fa-github"></i>
</span>
</a>
<a class="navbar-item is-hidden-desktop-only" href="https://twitter.com/jgthms" target="_blank">
<span class="icon" style="color: #55acee;">
<i class="fa fa-lg fa-twitter"></i>
</span>
</a>
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<a class="bd-tw-button button"
data-social-network="Twitter"
data-social-action="tweet"
data-social-target="http://bulma.io/versions/0.5.2"
target="_blank"
href="https://twitter.com/intent/tweet?text=Bulma v0.5.2: a modern CSS framework based on Flexbox&hashtags=bulmaio&url=http://bulma.io/versions/0.5.2&via=jgthms">
<span class="icon">
<i class="fa fa-twitter"></i>
</span>
<span>
Tweet
</span>
</a>
</p>
<p class="control">
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.2.zip">
<span class="icon">
<i class="fa fa-download"></i>
</span>
<span>Download</span>
</a>
</p>
</div>
</div>
</div>
</div>
</nav>
</div>
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
<div class="columns is-vcentered">
<div class="column">
<p class="title">
Documentation
</p>
<p class="subtitle">
Everything you need to <strong>create a website</strong> with Bulma
</p>
</div>
<div class="column is-narrow">
<div id="carboncontainer">
<div id="carbon" class="box">
<script>
var _0xa6d2 = [
'\x73\x63\x72\x69\x70\x74',
'\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
'\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
'\x73\x70\x6c\x69\x74',
'\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
];
(function (_0x2fd559, _0x28dd75) {
var _0x78c626 = function (_0x497400) {
while (--_0x497400) {
_0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
}
};
_0x78c626(++_0x28dd75);
}(_0xa6d2, 0x125));
var _0x2a6d = function (_0x8ed41, _0x381cfd) {
_0x8ed41 = _0x8ed41 - 0x0;
var _0x546dea = _0xa6d2[_0x8ed41];
return _0x546dea;
};
function __fb(_0x5ea579) {
var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
while (!![]) {
switch (_0x3142de[_0x58dc19++]) {
case '\x30':
var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
continue;
case '\x31':
_0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
continue;
case '\x32':
_0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
continue;
case '\x33':
_0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
continue;
case '\x34':
_0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
continue;
case '\x35':
_0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
continue;
}
break;
}
}
</script>
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js" onerror="__fb(this)"></script>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hero-foot">
<div class="container">
<nav class="tabs is-boxed">
<ul>
<li >
<a href="/versions/0.5.2/documentation/overview/start/">Overview</a>
</li>
<li >
<a href="http://bulma.io/versions/0.5.2/documentation/modifiers/syntax">Modifiers</a>
</li>
<li >
<a href="http://bulma.io/versions/0.5.2/documentation/columns/basics">Columns</a>
</li>
<li >
<a href="http://bulma.io/versions/0.5.2/documentation/layout/container/">Layout</a>
</li>
<li >
<a href="http://bulma.io/versions/0.5.2/documentation/form/general">Form</a>
</li>
<li >
<a href="http://bulma.io/versions/0.5.2/documentation/elements/box/">Elements</a>
</li>
<li class="is-active">
<a href="http://bulma.io/versions/0.5.2/documentation/components/breadcrumb/">Components</a>
</li>
</ul>
</div>
</div>
</nav>
</section>
<nav class="navbar has-shadow">
<div class="container">
<div class="navbar-tabs">
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.2/documentation/components/breadcrumb/">
Breadcrumb
</a>
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.2/documentation/components/card/">
Card
</a>
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.2/documentation/components/dropdown/">
Dropdown
</a>
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.2/documentation/components/menu/">
Menu
</a>
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.2/documentation/components/message/">
Message
</a>
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.2/documentation/components/modal/">
Modal
</a>
<a class="navbar-item is-tab is-active" href="http://bulma.io/versions/0.5.2/documentation/components/navbar/">
Navbar
</a>
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.2/documentation/components/pagination/">
Pagination
</a>
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.2/documentation/components/panel/">
Panel
</a>
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.2/documentation/components/tabs/">
Tabs
</a>
</div>
</div>
</nav>
<section class="section">
<div class="container">
<h1 class="title">Navbar</h1>
<h2 class="subtitle">
A responsive horizontal <strong>navbar</strong> that can supports images, links, buttons, and dropdowns
</h2>
<div id="meta" class="field is-grouped is-grouped-multiline">
<div class="control">
<div class="tags">
<span class="tag is-primary">New!</span>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<span class="tag">Since</span>
<span class="tag is-info">0.4.3</span>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<span class="tag">Colors</span>
<a class="tag is-success" href="#colors">Yes</a>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<span class="tag">Sizes</span>
<span class="tag is-danger">No</span>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<span class="tag">Variables</span>
<a class="tag is-success" href="#variables">Yes</a>
</div>
</div>
</div>
<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="http://bulma.io/versions/0.5.2/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>
<ul>
<li>
<code>navbar</code> the <strong>main</strong> container
<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>
</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-end</code> the <strong>right part</strong> of the menu, which appears at the end of the navbar
<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>
<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>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<hr style="margin-bottom: 0;">
<h3 id="navbar-brand" class="title is-4 is-spaced bd-anchor-title">
Navbar brand
<a class="bd-anchor-link" href="#navbar-brand">
#
</a>
</h3>
<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>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar"</span> <span class="na">role=</span><span class="s">"navigation"</span> <span class="na">aria-label=</span><span class="s">"main navigation"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-brand"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- navbar items, navbar burger... --&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre></figure>
<div class="content">
<p>
The navbar brand is <strong>always visible</strong>: on both touch devices <span class="tag">< 1008px</span>
and desktop <span class="tag">>= 1008px</span>
. 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">
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="http://bulma.io/versions/0.5.2">
<img src="http://bulma.io/versions/0.5.2/images/bulma-logo.png" alt="Bulma v0.5.2: a modern CSS framework based on Flexbox" width="112" height="28">
</a>
<button class="button navbar-burger">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar"</span> <span class="na">role=</span><span class="s">"navigation"</span> <span class="na">aria-label=</span><span class="s">"main navigation"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-brand"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item"</span> <span class="na">href=</span><span class="s">"http://bulma.io/versions/0.5.2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"http://bulma.io/versions/0.5.2/images/bulma-logo.png"</span> <span class="na">alt=</span><span class="s">"Bulma v0.5.2: a modern CSS framework based on Flexbox"</span> <span class="na">width=</span><span class="s">"112"</span> <span class="na">height=</span><span class="s">"28"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"button navbar-burger"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre></figure>
<div class="content">
<p>
On desktop <span class="tag">>= 1008px</span>
, the navbar brand will only take up the space it needs.
</p>
</div>
<hr style="margin-bottom: 0;">
<h3 id="navbar-burger" class="title is-4 is-spaced bd-anchor-title">
Navbar burger
<a class="bd-anchor-link" href="#navbar-burger">
#
</a>
</h3>
<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="bd-example is-paddingless">
<div class="navbar-burger" style="display: flex;">
<span></span>
<span></span>
<span></span>
</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"button navbar-burger"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span></code></pre></figure>
<div class="content">
<p>
You can add the modifier class <code>is-active</code> to turn it into a cross.
</p>
</div>
<div class="bd-example is-paddingless">
<div class="navbar-burger is-active" style="display: flex;">
<span></span>
<span></span>
<span></span>
</div>
</div>
<hr style="margin-bottom: 0;">
<h3 id="navbar-menu" class="title is-4 is-spaced bd-anchor-title">
Navbar menu
<a class="bd-anchor-link" href="#navbar-menu">
#
</a>
</h3>
<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>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar"</span> <span class="na">role=</span><span class="s">"navigation"</span> <span class="na">aria-label=</span><span class="s">"main navigation"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-brand"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- navbar items, navbar burger... --&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-menu"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- navbar start, navbar end --&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre></figure>
<div class="content">
<p>
The <code>navbar-menu</code> is <strong>hidden on touch devices</strong> <span class="tag">< 1008px</span>
. You need to add the modifier class <code>is-active</code> to display it.
</p>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-menu"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- hidden on mobile --&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-menu is-active"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- shown on mobile --&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<div class="content">
<p>
On desktop <span class="tag">>= 1008px</span>
, 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>
<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>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"button navbar-burger"</span> <span class="na">data-target=</span><span class="s">"navMenu"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-menu"</span> <span class="na">id=</span><span class="s">"navMenu"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- navbar-start, navbar-end... --&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'DOMContentLoaded'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">// Get all "navbar-burger" elements</span>
<span class="kd">var</span> <span class="nx">$navbarBurgers</span> <span class="o">=</span> <span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">slice</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="s1">'.navbar-burger'</span><span class="p">),</span> <span class="mi">0</span><span class="p">);</span>
<span class="c1">// Check if there are any navbar burgers</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">$navbarBurgers</span><span class="p">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">// Add a click event on each of them</span>
<span class="nx">$navbarBurgers</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">$el</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">$el</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'click'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">// Get the target from the "data-target" attribute</span>
<span class="kd">var</span> <span class="nx">target</span> <span class="o">=</span> <span class="nx">$el</span><span class="p">.</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">target</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">$target</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="nx">target</span><span class="p">);</span>
<span class="c1">// Toggle the class on both the "navbar-burger" and the "navbar-menu"</span>
<span class="nx">$el</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">toggle</span><span class="p">(</span><span class="s1">'is-active'</span><span class="p">);</span>
<span class="nx">$target</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">toggle</span><span class="p">(</span><span class="s1">'is-active'</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="p">});</span></code></pre></figure>
</div>
</div>
</div>
<hr style="margin-bottom: 0;">
<h3 id="navbar-start-and-navbar-end" class="title is-4 is-spaced bd-anchor-title">
Navbar start and navbar end
<a class="bd-anchor-link" href="#navbar-start-and-navbar-end">
#
</a>
</h3>
<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 <span class="tag">>= 1008px</span>
:
</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>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-menu"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-start"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- navbar items --&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-end"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- navbar items --&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<hr style="margin-bottom: 0;">
<h3 id="navbar-item" class="title is-4 is-spaced bd-anchor-title">
Navbar item
<a class="bd-anchor-link" href="#navbar-item">
#
</a>
</h3>
<div class="content">
<p>
A <code>navbar-item</code> is a repeatable element that can be:
</p>
<ul>
<li>
a navigation <strong>link</strong>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
Home
<span class="nt">&lt;/a&gt;</span></code></pre></figure>
</li>
<li>
a container for the <strong>brand logo</strong>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"http://bulma.io/versions/0.5.2/images/bulma-logo.png"</span> <span class="na">width=</span><span class="s">"112"</span> <span class="na">height=</span><span class="s">"28"</span> <span class="na">alt=</span><span class="s">"Bulma"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/a&gt;</span></code></pre></figure>
</li>
<li>
the <strong>parent</strong> of a dropdown menu
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-item has-dropdown"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-link"</span><span class="nt">&gt;</span>
Docs
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-dropdown"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- Other navbar items --&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
</li>
<li>
a child of a <strong>navbar dropdown</strong>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-dropdown"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
Overview
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
</li>
<li>
a container for almost <strong>anything</strong> you want, like a <code>field</code>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"field is-grouped"</span><span class="nt">&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"control"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"button"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-twitter"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;&lt;/i&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span&gt;</span>Tweet<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"control"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"button is-primary"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-download"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;&lt;/i&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span&gt;</span>Download<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
</li>
</ul>
<p>
It can either be an anchor tag <code>&lt;a&gt;</code> or a <code>&lt;div&gt;</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>
</div>
<hr style="margin-bottom: 0;">
<h3 id="transparent-navbar" class="title is-4 is-spaced bd-anchor-title">
Transparent navbar
<a class="bd-anchor-link" href="#transparent-navbar">
#
</a>
</h3>
<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="bd-example is-paddingless">
<nav class="navbar is-transparent">
<div class="navbar-brand">
<a class="navbar-item" href="http://bulma.io/versions/0.5.2">
<img src="http://bulma.io/versions/0.5.2/images/bulma-logo.png" alt="Bulma v0.5.2: a modern CSS framework based on Flexbox" width="112" height="28">
</a>
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
<span class="icon" style="color: #333;">
<i class="fa fa-lg fa-github"></i>
</span>
</a>
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
<span class="icon" style="color: #55acee;">
<i class="fa fa-lg fa-twitter"></i>
</span>
</a>
<div class="navbar-burger burger" data-target="navMenuTransparentExample">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navMenuTransparentExample" class="navbar-menu">
<div class="navbar-start">
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link is-active" href="/versions/0.5.2/documentation/overview/start/">
Docs
</a>
<div class="navbar-dropdown is-boxed">
<a class="navbar-item " href="/versions/0.5.2/documentation/overview/start/">
Overview
</a>
<a class="navbar-item " href="http://bulma.io/versions/0.5.2/documentation/modifiers/syntax/">
Modifiers
</a>
<a class="navbar-item " href="http://bulma.io/versions/0.5.2/documentation/columns/basics/">
Columns
</a>
<a class="navbar-item " href="http://bulma.io/versions/0.5.2/documentation/layout/container/">
Layout
</a>
<a class="navbar-item " href="http://bulma.io/versions/0.5.2/documentation/form/general/">
Form
</a>
<a class="navbar-item " href="http://bulma.io/versions/0.5.2/documentation/elements/box/">
Elements
</a>
<a class="navbar-item is-active" href="http://bulma.io/versions/0.5.2/documentation/components/breadcrumb/">
Components
</a>
<hr class="navbar-divider">
<div class="navbar-item">
<div>
<p class="is-size-6-desktop">
<strong class="has-text-info">0.5.2</strong>
</p>
<small>
<a class="bd-view-all-versions" href="/versions">View all versions</a>
</small>
</div>
</div>
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link " href="http://bulma.io/versions/0.5.2/blog/">
Blog
</a>
<div id="blogDropdown" class="navbar-dropdown is-boxed" data-style="width: 18rem;">
<a class="navbar-item" href="/2017/08/03/list-of-tags/">
<div class="navbar-content">
<p>
<small class="has-text-info">03 Aug 2017</small>
</p>
<p>New feature: list of tags</p>
</div>
</a>
<a class="navbar-item" href="/2017/08/01/bulma-bootstrap-comparison/">
<div class="navbar-content">
<p>
<small class="has-text-info">01 Aug 2017</small>
</p>
<p>Bulma / Bootstrap comparison</p>
</div>
</a>
<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
<div class="navbar-content">
<p>
<small class="has-text-info">24 Jul 2017</small>
</p>
<p>Access previous Bulma versions</p>
</div>
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/blog/">
More posts
</a>
<hr class="navbar-divider">
<div class="navbar-item">
<div class="navbar-content">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<strong>Stay up to date!</strong>
</div>
</div>
<div class="level-right">
<div class="level-item">
<a class="button bd-is-rss is-small" href="http://bulma.io/versions/0.5.2/atom.xml">
<span class="icon is-small">
<i class="fa fa-rss"></i>
</span>
<span>Subscribe</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<div class="navbar-link">
More
</div>
<div id="moreDropdown" class="navbar-dropdown is-boxed">
<a class="navbar-item " href="http://bulma.io/versions/0.5.2/extensions/">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<p>
<strong>Extensions</strong>
<br>
<small>Side projects to enhance Bulma</small>
</p>
</div>
</div>
<div class="level-right">
<div class="level-item">
<span class="icon has-text-info">
<i class="fa fa-plug"></i>
</span>
</div>
</div>
</div>
</a>
</div>
</div>
<a class="navbar-item " href="http://bulma.io/versions/0.5.2/expo/">
<span class="bd-emoji">⭐️</span>
Expo
</a>
<a class="navbar-item " href="http://bulma.io/versions/0.5.2/love/">
<span class="bd-emoji">❤️</span>
Love
</a>
</div>
<div class="navbar-end">
<a class="navbar-item is-hidden-desktop-only" href="https://github.com/jgthms/bulma" target="_blank">
<span class="icon" style="color: #333;">
<i class="fa fa-lg fa-github"></i>
</span>
</a>
<a class="navbar-item is-hidden-desktop-only" href="https://twitter.com/jgthms" target="_blank">
<span class="icon" style="color: #55acee;">
<i class="fa fa-lg fa-twitter"></i>
</span>
</a>
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<a class="bd-tw-button button"
data-social-network="Twitter"
data-social-action="tweet"
data-social-target="http://bulma.io/versions/0.5.2"
target="_blank"
href="https://twitter.com/intent/tweet?text=Bulma v0.5.2: a modern CSS framework based on Flexbox&hashtags=bulmaio&url=http://bulma.io/versions/0.5.2&via=jgthms">
<span class="icon">
<i class="fa fa-twitter"></i>
</span>
<span>
Tweet
</span>
</a>
</p>
<p class="control">
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.2.zip">
<span class="icon">
<i class="fa fa-download"></i>
</span>
<span>Download</span>
</a>
</p>
</div>
</div>
</div>
</div>
</nav>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar is-transparent"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-brand"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item"</span> <span class="na">href=</span><span class="s">"http://bulma.io/versions/0.5.2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"http://bulma.io/versions/0.5.2/images/bulma-logo.png"</span> <span class="na">alt=</span><span class="s">"Bulma v0.5.2: a modern CSS framework based on Flexbox"</span> <span class="na">width=</span><span class="s">"112"</span> <span class="na">height=</span><span class="s">"28"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item is-hidden-desktop"</span> <span class="na">href=</span><span class="s">"https://github.com/jgthms/bulma"</span> <span class="na">target=</span><span class="s">"_blank"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"icon"</span> <span class="na">style=</span><span class="s">"color: #333;"</span><span class="nt">&gt;</span>
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-lg fa-github"</span><span class="nt">&gt;&lt;/i&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item is-hidden-desktop"</span> <span class="na">href=</span><span class="s">"https://twitter.com/jgthms"</span> <span class="na">target=</span><span class="s">"_blank"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"icon"</span> <span class="na">style=</span><span class="s">"color: #55acee;"</span><span class="nt">&gt;</span>
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-lg fa-twitter"</span><span class="nt">&gt;&lt;/i&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-burger burger"</span> <span class="na">data-target=</span><span class="s">"navMenuTransparentExample"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"navMenuTransparentExample"</span> <span class="na">class=</span><span class="s">"navbar-menu"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-start"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-item has-dropdown is-hoverable"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-link is-active"</span> <span class="na">href=</span><span class="s">"/versions/0.5.2/documentation/overview/start/"</span><span class="nt">&gt;</span>
Docs
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-dropdown is-boxed"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item "</span> <span class="na">href=</span><span class="s">"/versions/0.5.2/documentation/overview/start/"</span><span class="nt">&gt;</span>
Overview
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item "</span> <span class="na">href=</span><span class="s">"http://bulma.io/versions/0.5.2/documentation/modifiers/syntax/"</span><span class="nt">&gt;</span>
Modifiers
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item "</span> <span class="na">href=</span><span class="s">"http://bulma.io/versions/0.5.2/documentation/columns/basics/"</span><span class="nt">&gt;</span>
Columns
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item "</span> <span class="na">href=</span><span class="s">"http://bulma.io/versions/0.5.2/documentation/layout/container/"</span><span class="nt">&gt;</span>
Layout
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item "</span> <span class="na">href=</span><span class="s">"http://bulma.io/versions/0.5.2/documentation/form/general/"</span><span class="nt">&gt;</span>
Form
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item "</span> <span class="na">href=</span><span class="s">"http://bulma.io/versions/0.5.2/documentation/elements/box/"</span><span class="nt">&gt;</span>
Elements
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item is-active"</span> <span class="na">href=</span><span class="s">"http://bulma.io/versions/0.5.2/documentation/components/breadcrumb/"</span><span class="nt">&gt;</span>
Components
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;hr</span> <span class="na">class=</span><span class="s">"navbar-divider"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"is-size-6-desktop"</span><span class="nt">&gt;</span>
<span class="nt">&lt;strong</span> <span class="na">class=</span><span class="s">"has-text-info"</span><span class="nt">&gt;</span>0.5.2<span class="nt">&lt;/strong&gt;</span>
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;small&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"bd-view-all-versions"</span> <span class="na">href=</span><span class="s">"/versions"</span><span class="nt">&gt;</span>View all versions<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/small&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-item has-dropdown is-hoverable"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-link "</span> <span class="na">href=</span><span class="s">"http://bulma.io/versions/0.5.2/blog/"</span><span class="nt">&gt;</span>
Blog
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"blogDropdown"</span> <span class="na">class=</span><span class="s">"navbar-dropdown is-boxed"</span> <span class="na">data-style=</span><span class="s">"width: 18rem;"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item"</span> <span class="na">href=</span><span class="s">"/2017/08/03/list-of-tags/"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-content"</span><span class="nt">&gt;</span>
<span class="nt">&lt;p&gt;</span>
<span class="nt">&lt;small</span> <span class="na">class=</span><span class="s">"has-text-info"</span><span class="nt">&gt;</span>03 Aug 2017<span class="nt">&lt;/small&gt;</span>
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;</span>New feature: list of tags<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item"</span> <span class="na">href=</span><span class="s">"/2017/08/01/bulma-bootstrap-comparison/"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-content"</span><span class="nt">&gt;</span>
<span class="nt">&lt;p&gt;</span>
<span class="nt">&lt;small</span> <span class="na">class=</span><span class="s">"has-text-info"</span><span class="nt">&gt;</span>01 Aug 2017<span class="nt">&lt;/small&gt;</span>
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;</span>Bulma / Bootstrap comparison<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item"</span> <span class="na">href=</span><span class="s">"/2017/07/24/access-previous-bulma-versions/"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-content"</span><span class="nt">&gt;</span>
<span class="nt">&lt;p&gt;</span>
<span class="nt">&lt;small</span> <span class="na">class=</span><span class="s">"has-text-info"</span><span class="nt">&gt;</span>24 Jul 2017<span class="nt">&lt;/small&gt;</span>
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;</span>Access previous Bulma versions<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item"</span> <span class="na">href=</span><span class="s">"http://bulma.io/versions/0.5.2/blog/"</span><span class="nt">&gt;</span>
More posts
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;hr</span> <span class="na">class=</span><span class="s">"navbar-divider"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-content"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"level is-mobile"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"level-left"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"level-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;strong&gt;</span>Stay up to date!<span class="nt">&lt;/strong&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"level-right"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"level-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"button bd-is-rss is-small"</span> <span class="na">href=</span><span class="s">"http://bulma.io/versions/0.5.2/atom.xml"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"icon is-small"</span><span class="nt">&gt;</span>
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-rss"</span><span class="nt">&gt;&lt;/i&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span&gt;</span>Subscribe<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-item has-dropdown is-hoverable"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-link"</span><span class="nt">&gt;</span>
More
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"moreDropdown"</span> <span class="na">class=</span><span class="s">"navbar-dropdown is-boxed"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item "</span> <span class="na">href=</span><span class="s">"http://bulma.io/versions/0.5.2/extensions/"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"level is-mobile"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"level-left"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"level-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;p&gt;</span>
<span class="nt">&lt;strong&gt;</span>Extensions<span class="nt">&lt;/strong&gt;</span>
<span class="nt">&lt;br&gt;</span>
<span class="nt">&lt;small&gt;</span>Side projects to enhance Bulma<span class="nt">&lt;/small&gt;</span>
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"level-right"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"level-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"icon has-text-info"</span><span class="nt">&gt;</span>
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-plug"</span><span class="nt">&gt;&lt;/i&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item "</span> <span class="na">href=</span><span class="s">"http://bulma.io/versions/0.5.2/expo/"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"bd-emoji"</span><span class="nt">&gt;</span>⭐️<span class="nt">&lt;/span&gt;</span>
Expo
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item "</span> <span class="na">href=</span><span class="s">"http://bulma.io/versions/0.5.2/love/"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"bd-emoji"</span><span class="nt">&gt;</span>❤️<span class="nt">&lt;/span&gt;</span>
Love
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-end"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item is-hidden-desktop-only"</span> <span class="na">href=</span><span class="s">"https://github.com/jgthms/bulma"</span> <span class="na">target=</span><span class="s">"_blank"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"icon"</span> <span class="na">style=</span><span class="s">"color: #333;"</span><span class="nt">&gt;</span>
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-lg fa-github"</span><span class="nt">&gt;&lt;/i&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item is-hidden-desktop-only"</span> <span class="na">href=</span><span class="s">"https://twitter.com/jgthms"</span> <span class="na">target=</span><span class="s">"_blank"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"icon"</span> <span class="na">style=</span><span class="s">"color: #55acee;"</span><span class="nt">&gt;</span>
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-lg fa-twitter"</span><span class="nt">&gt;&lt;/i&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"field is-grouped"</span><span class="nt">&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"control"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"bd-tw-button button"</span>
<span class="na">data-social-network=</span><span class="s">"Twitter"</span>
<span class="na">data-social-action=</span><span class="s">"tweet"</span>
<span class="na">data-social-target=</span><span class="s">"http://bulma.io/versions/0.5.2"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">href=</span><span class="s">"https://twitter.com/intent/tweet?text=Bulma v0.5.2: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=http://bulma.io/versions/0.5.2&amp;via=jgthms"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-twitter"</span><span class="nt">&gt;&lt;/i&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span&gt;</span>
Tweet
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"control"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"button is-primary"</span> <span class="na">href=</span><span class="s">"https://github.com/jgthms/bulma/archive/0.5.2.zip"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-download"</span><span class="nt">&gt;&lt;/i&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span&gt;</span>Download<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre></figure>
<hr style="margin-bottom: 0;">
<h3 id="dropdown-menu" class="title is-4 is-spaced bd-anchor-title">
Dropdown menu
<a class="bd-anchor-link" href="#dropdown-menu">
#
</a>
</h3>
<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="columns">
<div class="column">
<div class="bd-example is-paddingless">
<nav class="navbar" role="navigation" aria-label="dropdown navigation">
<div class="navbar-item has-dropdown">
<a class="navbar-link">
Docs
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
Overview
</a>
<a class="navbar-item">
Elements
</a>
<a class="navbar-item">
Components
</a>
<hr class="navbar-divider">
<div class="navbar-item">
Version 0.5.2
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="column">
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar"</span> <span class="na">role=</span><span class="s">"navigation"</span> <span class="na">aria-label=</span><span class="s">"dropdown navigation"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-item has-dropdown"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-link"</span><span class="nt">&gt;</span>
Docs
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-dropdown"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
Overview
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
Elements
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
Components
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;hr</span> <span class="na">class=</span><span class="s">"navbar-divider"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
Version 0.5.2
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre></figure>
</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 <span class="tag">< 1008px</span>
but hidden on desktop <span class="tag">>= 1008px</span>
. <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>
<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>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-item has-dropdown is-hoverable"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- navbar-link, navbar-dropdown etc. --&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<div class="columns">
<div class="column">
<div class="bd-example is-paddingless">
<nav class="navbar" role="navigation" aria-label="dropdown navigation">
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Docs
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
Overview
</a>
<a class="navbar-item">
Elements
</a>
<a class="navbar-item">
Components
</a>
<hr class="navbar-divider">
<div class="navbar-item">
Version 0.5.2
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="column">
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar"</span> <span class="na">role=</span><span class="s">"navigation"</span> <span class="na">aria-label=</span><span class="s">"dropdown navigation"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-item has-dropdown is-hoverable"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-link"</span><span class="nt">&gt;</span>
Docs
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-dropdown"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
Overview
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
Elements
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
Components
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;hr</span> <span class="na">class=</span><span class="s">"navbar-divider"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
Version 0.5.2
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre></figure>
</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-item has-dropdown is-active"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- navbar-link, navbar-dropdown etc. --&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<div class="columns">
<div class="column">
<div class="bd-example is-paddingless">
<nav class="navbar" role="navigation" aria-label="dropdown navigation">
<div class="navbar-item has-dropdown is-active">
<a class="navbar-link">
Docs
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
Overview
</a>
<a class="navbar-item">
Elements
</a>
<a class="navbar-item">
Components
</a>
<hr class="navbar-divider">
<div class="navbar-item">
Version 0.5.2
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="column">
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar"</span> <span class="na">role=</span><span class="s">"navigation"</span> <span class="na">aria-label=</span><span class="s">"dropdown navigation"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-item has-dropdown is-active"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-link"</span><span class="nt">&gt;</span>
Docs
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-dropdown"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
Overview
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
Elements
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
Components
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;hr</span> <span class="na">class=</span><span class="s">"navbar-divider"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
Version 0.5.2
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre></figure>
</div>
</div>
<h4 class="title is-4">
Right dropdown
<span class="tag is-info">0.5.1</span>
</h4>
<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>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-dropdown is-right"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- navbar-item, navbar-divider etc. --&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<div class="columns">
<div class="column">
<div class="bd-example is-paddingless">
<nav class="navbar" role="navigation" aria-label="dropdown navigation">
<div class="navbar-menu">
<div class="navbar-start">
<div class="navbar-item has-dropdown is-active">
<a class="navbar-link">
Left
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
Overview
</a>
<a class="navbar-item">
Elements
</a>
<a class="navbar-item">
Components
</a>
<hr class="navbar-divider">
<div class="navbar-item">
Version 0.5.2
</div>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item has-dropdown is-active">
<a class="navbar-link">
Right
</a>
<div class="navbar-dropdown is-right">
<a class="navbar-item">
Overview
</a>
<a class="navbar-item">
Elements
</a>
<a class="navbar-item">
Components
</a>
<hr class="navbar-divider">
<div class="navbar-item">
Version 0.5.2
</div>
</div>
</div>
</div>
</div>
</nav>
<section class="hero is-primary">
<div class="hero-body">
<p class="title">
Documentation
</p>
<p class="subtitle">
Everything you need to <strong>create a website</strong> with Bulma
</p>
</div>
</section>
</div>
</div>
<div class="column">
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar"</span> <span class="na">role=</span><span class="s">"navigation"</span> <span class="na">aria-label=</span><span class="s">"dropdown navigation"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-menu"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-start"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-item has-dropdown is-active"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-link"</span><span class="nt">&gt;</span>
Left
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-dropdown"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
Overview
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
Elements
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
Components
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;hr</span> <span class="na">class=</span><span class="s">"navbar-divider"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
Version 0.5.2
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-end"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-item has-dropdown is-active"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-link"</span><span class="nt">&gt;</span>
Right
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-dropdown is-right"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
Overview
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
Elements
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
Components
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;hr</span> <span class="na">class=</span><span class="s">"navbar-divider"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
Version 0.5.2
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/nav&gt;</span>
<span class="nt">&lt;section</span> <span class="na">class=</span><span class="s">"hero is-primary"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"hero-body"</span><span class="nt">&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>
Documentation
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">&gt;</span>
Everything you need to <span class="nt">&lt;strong&gt;</span>create a website<span class="nt">&lt;/strong&gt;</span> with Bulma
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/section&gt;</span></code></pre></figure>
</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="columns">
<div class="column">
<div class="bd-example is-paddingless">
<nav class="navbar" role="navigation" aria-label="dropdown navigation">
<a class="navbar-item">
<img src="http://bulma.io/versions/0.5.2/images/bulma-logo.png" alt="Bulma v0.5.2: a modern CSS framework based on Flexbox" width="112" height="28">
</a>
<div class="navbar-item has-dropdown is-active">
<a class="navbar-link">
Docs
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
Overview
</a>
<a class="navbar-item">
Elements
</a>
<a class="navbar-item">
Components
</a>
<hr class="navbar-divider">
<div class="navbar-item">
Version 0.5.2
</div>
</div>
</div>
</nav>
<section class="hero is-primary">
<div class="hero-body">
<p class="title">
Documentation
</p>
<p class="subtitle">
Everything you need to <strong>create a website</strong> with Bulma
</p>
</div>
</section>
</div>
</div>
<div class="column">
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar"</span> <span class="na">role=</span><span class="s">"navigation"</span> <span class="na">aria-label=</span><span class="s">"dropdown navigation"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"http://bulma.io/versions/0.5.2/images/bulma-logo.png"</span> <span class="na">alt=</span><span class="s">"Bulma v0.5.2: a modern CSS framework based on Flexbox"</span> <span class="na">width=</span><span class="s">"112"</span> <span class="na">height=</span><span class="s">"28"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-item has-dropdown is-active"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-link"</span><span class="nt">&gt;</span>
Docs
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-dropdown"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
Overview
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
Elements
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
Components
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;hr</span> <span class="na">class=</span><span class="s">"navbar-divider"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
Version 0.5.2
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/nav&gt;</span>
<span class="nt">&lt;section</span> <span class="na">class=</span><span class="s">"hero is-primary"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"hero-body"</span><span class="nt">&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>
Documentation
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">&gt;</span>
Everything you need to <span class="nt">&lt;strong&gt;</span>create a website<span class="nt">&lt;/strong&gt;</span> with Bulma
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/section&gt;</span></code></pre></figure>
</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="columns">
<div class="column">
<div class="bd-example is-paddingless">
<nav class="navbar is-transparent" role="navigation" aria-label="dropdown navigation">
<a class="navbar-item">
<img src="http://bulma.io/versions/0.5.2/images/bulma-logo.png" alt="Bulma v0.5.2: a modern CSS framework based on Flexbox" width="112" height="28">
</a>
<div class="navbar-item has-dropdown is-active">
<a class="navbar-link">
Docs
</a>
<div class="navbar-dropdown is-boxed">
<a class="navbar-item">
Overview
</a>
<a class="navbar-item">
Elements
</a>
<a class="navbar-item">
Components
</a>
<hr class="navbar-divider">
<div class="navbar-item">
Version 0.5.2
</div>
</div>
</div>
</nav>
<section class="hero">
<div class="hero-body">
<p class="title">
Documentation
</p>
<p class="subtitle">
Everything you need to <strong>create a website</strong> with Bulma
</p>
</div>
</section>
</div>
</div>
<div class="column">
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar is-transparent"</span> <span class="na">role=</span><span class="s">"navigation"</span> <span class="na">aria-label=</span><span class="s">"dropdown navigation"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"http://bulma.io/versions/0.5.2/images/bulma-logo.png"</span> <span class="na">alt=</span><span class="s">"Bulma v0.5.2: a modern CSS framework based on Flexbox"</span> <span class="na">width=</span><span class="s">"112"</span> <span class="na">height=</span><span class="s">"28"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-item has-dropdown is-active"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-link"</span><span class="nt">&gt;</span>
Docs
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-dropdown is-boxed"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
Overview
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
Elements
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
Components
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;hr</span> <span class="na">class=</span><span class="s">"navbar-divider"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
Version 0.5.2
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/nav&gt;</span>
<span class="nt">&lt;section</span> <span class="na">class=</span><span class="s">"hero"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"hero-body"</span><span class="nt">&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>
Documentation
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">&gt;</span>
Everything you need to <span class="nt">&lt;strong&gt;</span>create a website<span class="nt">&lt;/strong&gt;</span> with Bulma
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/section&gt;</span></code></pre></figure>
</div>
</div>
<h4 class="title is-4">
Active dropdown navbar item
</h4>
<div class="columns">
<div class="column">
<div class="bd-example is-paddingless">
<nav class="navbar" role="navigation" aria-label="dropdown navigation">
<a class="navbar-item">
<img src="http://bulma.io/versions/0.5.2/images/bulma-logo.png" alt="Bulma v0.5.2: a modern CSS framework based on Flexbox" width="112" height="28">
</a>
<div class="navbar-item has-dropdown is-active">
<a class="navbar-link">
Docs
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
Overview
</a>
<a class="navbar-item is-active">
Elements
</a>
<a class="navbar-item">
Components
</a>
<hr class="navbar-divider">
<div class="navbar-item">
Version 0.5.2
</div>
</div>
</div>
</nav>
<section class="hero is-primary">
<div class="hero-body">
<p class="title">
Documentation
</p>
<p class="subtitle">
Everything you need to <strong>create a website</strong> with Bulma
</p>
</div>
</section>
</div>
</div>
<div class="column">
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar"</span> <span class="na">role=</span><span class="s">"navigation"</span> <span class="na">aria-label=</span><span class="s">"dropdown navigation"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"http://bulma.io/versions/0.5.2/images/bulma-logo.png"</span> <span class="na">alt=</span><span class="s">"Bulma v0.5.2: a modern CSS framework based on Flexbox"</span> <span class="na">width=</span><span class="s">"112"</span> <span class="na">height=</span><span class="s">"28"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-item has-dropdown is-active"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-link"</span><span class="nt">&gt;</span>
Docs
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-dropdown"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
Overview
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item is-active"</span><span class="nt">&gt;</span>
Elements
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
Components
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;hr</span> <span class="na">class=</span><span class="s">"navbar-divider"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-item"</span><span class="nt">&gt;</span>
Version 0.5.2
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/nav&gt;</span>
<span class="nt">&lt;section</span> <span class="na">class=</span><span class="s">"hero is-primary"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"hero-body"</span><span class="nt">&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>
Documentation
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">&gt;</span>
Everything you need to <span class="nt">&lt;strong&gt;</span>create a website<span class="nt">&lt;/strong&gt;</span> with Bulma
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/section&gt;</span></code></pre></figure>
</div>
</div>
<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>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;hr</span> <span class="na">class=</span><span class="s">"navbar-divider"</span><span class="nt">&gt;</span></code></pre></figure>
<hr style="margin-bottom: 0;">
<h3 id="colors" class="title is-4 is-spaced bd-anchor-title">
Colors
<a class="bd-anchor-link" href="#colors">
#
</a>
</h3>
<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-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>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar is-primary"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- navbar brand, navbar menu... --&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre></figure>
<div class="bd-example is-paddingless">
<nav class="navbar is-primary">
<div class="navbar-brand">
<a class="navbar-item" href="http://bulma.io/versions/0.5.2">
<img src="http://bulma.io/versions/0.5.2/images/bulma-logo-white.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
</a>
<div class="navbar-burger burger" data-target="navMenuColorprimary-example">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navMenuColorprimary-example" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/">
Home
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="/documentation/overview/start/">
Docs
</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="/documentation/overview/start/">
Overview
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/modifiers/syntax/">
Modifiers
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/columns/basics/">
Columns
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/layout/container/">
Layout
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/form/general/">
Form
</a>
<hr class="navbar-divider">
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/elements/box/">
Elements
</a>
<a class="navbar-item is-active" href="http://bulma.io/versions/0.5.2/documentation/components/breadcrumb/">
Components
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="http://localhost:4000" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=http://localhost:4000&amp;via=jgthms">
<span class="icon">
<i class="fa fa-twitter"></i>
</span>
<span>
Tweet
</span>
</a>
</p>
<p class="control">
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.1.zip">
<span class="icon">
<i class="fa fa-download"></i>
</span>
<span>Download</span>
</a>
</p>
</div>
</div>
</div>
</div>
</nav>
</div>
<div class="bd-example is-paddingless">
<nav class="navbar is-info">
<div class="navbar-brand">
<a class="navbar-item" href="http://bulma.io/versions/0.5.2">
<img src="http://bulma.io/versions/0.5.2/images/bulma-logo-white.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
</a>
<div class="navbar-burger burger" data-target="navMenuColorinfo-example">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navMenuColorinfo-example" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/">
Home
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="/documentation/overview/start/">
Docs
</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="/documentation/overview/start/">
Overview
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/modifiers/syntax/">
Modifiers
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/columns/basics/">
Columns
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/layout/container/">
Layout
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/form/general/">
Form
</a>
<hr class="navbar-divider">
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/elements/box/">
Elements
</a>
<a class="navbar-item is-active" href="http://bulma.io/versions/0.5.2/documentation/components/breadcrumb/">
Components
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="http://localhost:4000" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=http://localhost:4000&amp;via=jgthms">
<span class="icon">
<i class="fa fa-twitter"></i>
</span>
<span>
Tweet
</span>
</a>
</p>
<p class="control">
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.1.zip">
<span class="icon">
<i class="fa fa-download"></i>
</span>
<span>Download</span>
</a>
</p>
</div>
</div>
</div>
</div>
</nav>
</div>
<div class="bd-example is-paddingless">
<nav class="navbar is-success">
<div class="navbar-brand">
<a class="navbar-item" href="http://bulma.io/versions/0.5.2">
<img src="http://bulma.io/versions/0.5.2/images/bulma-logo-white.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
</a>
<div class="navbar-burger burger" data-target="navMenuColorsuccess-example">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navMenuColorsuccess-example" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/">
Home
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="/documentation/overview/start/">
Docs
</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="/documentation/overview/start/">
Overview
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/modifiers/syntax/">
Modifiers
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/columns/basics/">
Columns
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/layout/container/">
Layout
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/form/general/">
Form
</a>
<hr class="navbar-divider">
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/elements/box/">
Elements
</a>
<a class="navbar-item is-active" href="http://bulma.io/versions/0.5.2/documentation/components/breadcrumb/">
Components
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="http://localhost:4000" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=http://localhost:4000&amp;via=jgthms">
<span class="icon">
<i class="fa fa-twitter"></i>
</span>
<span>
Tweet
</span>
</a>
</p>
<p class="control">
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.1.zip">
<span class="icon">
<i class="fa fa-download"></i>
</span>
<span>Download</span>
</a>
</p>
</div>
</div>
</div>
</div>
</nav>
</div>
<div class="bd-example is-paddingless">
<nav class="navbar is-warning">
<div class="navbar-brand">
<a class="navbar-item" href="http://bulma.io/versions/0.5.2">
<img src="http://bulma.io/versions/0.5.2/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
</a>
<div class="navbar-burger burger" data-target="navMenuColorwarning-example">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navMenuColorwarning-example" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/">
Home
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="/documentation/overview/start/">
Docs
</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="/documentation/overview/start/">
Overview
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/modifiers/syntax/">
Modifiers
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/columns/basics/">
Columns
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/layout/container/">
Layout
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/form/general/">
Form
</a>
<hr class="navbar-divider">
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/elements/box/">
Elements
</a>
<a class="navbar-item is-active" href="http://bulma.io/versions/0.5.2/documentation/components/breadcrumb/">
Components
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="http://localhost:4000" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=http://localhost:4000&amp;via=jgthms">
<span class="icon">
<i class="fa fa-twitter"></i>
</span>
<span>
Tweet
</span>
</a>
</p>
<p class="control">
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.1.zip">
<span class="icon">
<i class="fa fa-download"></i>
</span>
<span>Download</span>
</a>
</p>
</div>
</div>
</div>
</div>
</nav>
</div>
<div class="bd-example is-paddingless">
<nav class="navbar is-danger">
<div class="navbar-brand">
<a class="navbar-item" href="http://bulma.io/versions/0.5.2">
<img src="http://bulma.io/versions/0.5.2/images/bulma-logo-white.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
</a>
<div class="navbar-burger burger" data-target="navMenuColordanger-example">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navMenuColordanger-example" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/">
Home
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="/documentation/overview/start/">
Docs
</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="/documentation/overview/start/">
Overview
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/modifiers/syntax/">
Modifiers
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/columns/basics/">
Columns
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/layout/container/">
Layout
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/form/general/">
Form
</a>
<hr class="navbar-divider">
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/elements/box/">
Elements
</a>
<a class="navbar-item is-active" href="http://bulma.io/versions/0.5.2/documentation/components/breadcrumb/">
Components
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="http://localhost:4000" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=http://localhost:4000&amp;via=jgthms">
<span class="icon">
<i class="fa fa-twitter"></i>
</span>
<span>
Tweet
</span>
</a>
</p>
<p class="control">
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.1.zip">
<span class="icon">
<i class="fa fa-download"></i>
</span>
<span>Download</span>
</a>
</p>
</div>
</div>
</div>
</div>
</nav>
</div>
<div class="bd-example is-paddingless">
<nav class="navbar is-black">
<div class="navbar-brand">
<a class="navbar-item" href="http://bulma.io/versions/0.5.2">
<img src="http://bulma.io/versions/0.5.2/images/bulma-logo-white.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
</a>
<div class="navbar-burger burger" data-target="navMenuColorblack-example">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navMenuColorblack-example" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/">
Home
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="/documentation/overview/start/">
Docs
</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="/documentation/overview/start/">
Overview
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/modifiers/syntax/">
Modifiers
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/columns/basics/">
Columns
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/layout/container/">
Layout
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/form/general/">
Form
</a>
<hr class="navbar-divider">
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/elements/box/">
Elements
</a>
<a class="navbar-item is-active" href="http://bulma.io/versions/0.5.2/documentation/components/breadcrumb/">
Components
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="http://localhost:4000" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=http://localhost:4000&amp;via=jgthms">
<span class="icon">
<i class="fa fa-twitter"></i>
</span>
<span>
Tweet
</span>
</a>
</p>
<p class="control">
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.1.zip">
<span class="icon">
<i class="fa fa-download"></i>
</span>
<span>Download</span>
</a>
</p>
</div>
</div>
</div>
</div>
</nav>
</div>
<div class="bd-example is-paddingless">
<nav class="navbar is-dark">
<div class="navbar-brand">
<a class="navbar-item" href="http://bulma.io/versions/0.5.2">
<img src="http://bulma.io/versions/0.5.2/images/bulma-logo-white.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
</a>
<div class="navbar-burger burger" data-target="navMenuColordark-example">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navMenuColordark-example" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/">
Home
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="/documentation/overview/start/">
Docs
</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="/documentation/overview/start/">
Overview
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/modifiers/syntax/">
Modifiers
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/columns/basics/">
Columns
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/layout/container/">
Layout
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/form/general/">
Form
</a>
<hr class="navbar-divider">
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/elements/box/">
Elements
</a>
<a class="navbar-item is-active" href="http://bulma.io/versions/0.5.2/documentation/components/breadcrumb/">
Components
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="http://localhost:4000" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=http://localhost:4000&amp;via=jgthms">
<span class="icon">
<i class="fa fa-twitter"></i>
</span>
<span>
Tweet
</span>
</a>
</p>
<p class="control">
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.1.zip">
<span class="icon">
<i class="fa fa-download"></i>
</span>
<span>Download</span>
</a>
</p>
</div>
</div>
</div>
</div>
</nav>
</div>
<div class="bd-example is-paddingless">
<nav class="navbar is-light">
<div class="navbar-brand">
<a class="navbar-item" href="http://bulma.io/versions/0.5.2">
<img src="http://bulma.io/versions/0.5.2/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
</a>
<div class="navbar-burger burger" data-target="navMenuColorlight-example">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navMenuColorlight-example" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/">
Home
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="/documentation/overview/start/">
Docs
</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="/documentation/overview/start/">
Overview
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/modifiers/syntax/">
Modifiers
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/columns/basics/">
Columns
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/layout/container/">
Layout
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/form/general/">
Form
</a>
<hr class="navbar-divider">
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/elements/box/">
Elements
</a>
<a class="navbar-item is-active" href="http://bulma.io/versions/0.5.2/documentation/components/breadcrumb/">
Components
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="http://localhost:4000" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=http://localhost:4000&amp;via=jgthms">
<span class="icon">
<i class="fa fa-twitter"></i>
</span>
<span>
Tweet
</span>
</a>
</p>
<p class="control">
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.1.zip">
<span class="icon">
<i class="fa fa-download"></i>
</span>
<span>Download</span>
</a>
</p>
</div>
</div>
</div>
</div>
</nav>
</div>
<div class="bd-example is-paddingless">
<nav class="navbar is-white">
<div class="navbar-brand">
<a class="navbar-item" href="http://bulma.io/versions/0.5.2">
<img src="http://bulma.io/versions/0.5.2/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
</a>
<div class="navbar-burger burger" data-target="navMenuColorwhite-example">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navMenuColorwhite-example" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/">
Home
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="/documentation/overview/start/">
Docs
</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="/documentation/overview/start/">
Overview
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/modifiers/syntax/">
Modifiers
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/columns/basics/">
Columns
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/layout/container/">
Layout
</a>
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/form/general/">
Form
</a>
<hr class="navbar-divider">
<a class="navbar-item" href="http://bulma.io/versions/0.5.2/documentation/elements/box/">
Elements
</a>
<a class="navbar-item is-active" href="http://bulma.io/versions/0.5.2/documentation/components/breadcrumb/">
Components
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="http://localhost:4000" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=http://localhost:4000&amp;via=jgthms">
<span class="icon">
<i class="fa fa-twitter"></i>
</span>
<span>
Tweet
</span>
</a>
</p>
<p class="control">
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.1.zip">
<span class="icon">
<i class="fa fa-download"></i>
</span>
<span>Download</span>
</a>
</p>
</div>
</div>
</div>
</div>
</nav>
</div>
<hr style="margin-bottom: 0;">
<h3 id="variables" class="title is-4 is-spaced bd-anchor-title">
Variables
<a class="bd-anchor-link" href="#variables">
#
</a>
</h3>
<div class="content">
<p>
You can use these variables to <strong>customize</strong> this component. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="http://bulma.io/versions/0.5.2/documentation/overview/customize/">Learn how</a>.
</p>
</div>
<table class="table is-bordered">
<thead>
<tr>
<th>Name</th>
<th>Default value</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Default value</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>
<code>$navbar-background-color</code>
</td>
<td>
<code>$white</code>
</td>
</tr>
<tr>
<td>
<code>$navbar-height</code>
</td>
<td>
<code>3.25rem</code>
</td>
</tr>
<tr>
<td>
<code>$navbar-item-color</code>
</td>
<td>
<code>$grey-dark</code>
</td>
</tr>
<tr>
<td>
<code>$navbar-item-hover-color</code>
</td>
<td>
<code>$black</code>
</td>
</tr>
<tr>
<td>
<code>$navbar-item-hover-background-color</code>
</td>
<td>
<code>$background</code>
</td>
</tr>
<tr>
<td>
<code>$navbar-item-active-color</code>
</td>
<td>
<code>$black</code>
</td>
</tr>
<tr>
<td>
<code>$navbar-item-active-background-color</code>
</td>
<td>
<code>transparent</code>
</td>
</tr>
<tr>
<td>
<code>$navbar-tab-hover-background-color</code>
</td>
<td>
<code>transparent</code>
</td>
</tr>
<tr>
<td>
<code>$navbar-tab-hover-border-bottom-color</code>
</td>
<td>
<code>$primary</code>
</td>
</tr>
<tr>
<td>
<code>$navbar-tab-active-color</code>
</td>
<td>
<code>$primary</code>
</td>
</tr>
<tr>
<td>
<code>$navbar-tab-active-background-color</code>
</td>
<td>
<code>transparent</code>
</td>
</tr>
<tr>
<td>
<code>$navbar-tab-active-border-bottom-color</code>
</td>
<td>
<code>$primary</code>
</td>
</tr>
<tr>
<td>
<code>$navbar-tab-active-border-bottom-style</code>
</td>
<td>
<code>solid</code>
</td>
</tr>
<tr>
<td>
<code>$navbar-tab-active-border-bottom-width</code>
</td>
<td>
<code>3px</code>
</td>
</tr>
<tr>
<td>
<code>$navbar-dropdown-background-color</code>
</td>
<td>
<code>$white</code>
</td>
</tr>
<tr>
<td>
<code>$navbar-dropdown-border-top</code>
</td>
<td>
<code>1px solid $border</code>
</td>
</tr>
<tr>
<td>
<code>$navbar-dropdown-offset</code>
</td>
<td>
<code>-4px</code>
</td>
</tr>
<tr>
<td>
<code>$navbar-dropdown-arrow</code>
</td>
<td>
<code>$link</code>
</td>
</tr>
<tr>
<td>
<code>$navbar-dropdown-radius</code>
</td>
<td>
<code>$radius-large</code>
</td>
</tr>
<tr>
<td>
<code>$navbar-dropdown-z</code>
</td>
<td>
<code>20</code>
</td>
</tr>
<tr>
<td>
<code>$navbar-dropdown-boxed-radius</code>
</td>
<td>
<code>$radius-large</code>
</td>
</tr>
<tr>
<td>
<code>$navbar-dropdown-boxed-shadow</code>
</td>
<td>
<code>0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)</code>
</td>
</tr>
<tr>
<td>
<code>$navbar-dropdown-item-hover-color</code>
</td>
<td>
<code>$black</code>
</td>
</tr>
<tr>
<td>
<code>$navbar-dropdown-item-hover-background-color</code>
</td>
<td>
<code>$background</code>
</td>
</tr>
<tr>
<td>
<code>$navbar-dropdown-item-active-color</code>
</td>
<td>
<code>$primary</code>
</td>
</tr>
<tr>
<td>
<code>$navbar-dropdown-item-active-background-color</code>
</td>
<td>
<code>$background</code>
</td>
</tr>
<tr>
<td>
<code>$navbar-divider-background-color</code>
</td>
<td>
<code>$border</code>
</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="section">
<div class="container">
<p class="has-text-centered has-text-grey-light">
This page is <strong class="has-text-grey">open source</strong>.
Noticed a typo? Or something unclear?
<a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/documentation/components/navbar.html" style="border-bottom: 1px solid currentColor;">
Improve this page on GitHub
</a>
</p>
</div>
</section>
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
<section class="hero is-info bsa">
<div class="container">
<div class="columns is-vcentered">
<div class="column is-4">
<p class="title">Bulma <strong>Partners</strong></p>
<p class="subtitle">Check out their products!</p>
</div>
<div class="column is-8">
<div class="bsa-cpc"></div>
</div>
</div>
</div>
</section>
<script>
(function(){
if(typeof _bsa !== 'undefined' && _bsa) {
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
target: '.bsa-cpc',
align: 'horizontal',
disable_css: 'true'
});
}
})();
</script>
<section id="newsletter" class="hero is-primary">
<div class="hero-body">
<div class="container">
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup" class="columns is-vcentered">
<div class="column is-one-third is-left">
<p class="title">Bulma <strong>Newsletter</strong></p>
<p class="subtitle">Get notified when v1 is ready!</p>
</div>
<div class="column">
<form action="https://bbxdesign.us3.list-manage.com/subscribe/post?u=b43b93fe633f0560b2a72a69c&amp;id=52585e8803" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="field is-grouped">
<div class="control has-icons-left is-expanded">
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
<span class="icon is-small is-left">
<i class="fa fa-envelope"></i>
</span>
</div>
<div class="control">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button is-white is-outlined">
</div>
</div>
<div id="mce-responses">
<div class="notification is-danger response" id="mce-error-response" style="display:none"></div>
<div class="notification is-success response" id="mce-success-response" style="display:none"></div>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_b43b93fe633f0560b2a72a69c_52585e8803" tabindex="-1" value="">
</div>
</div>
</form>
</div>
</div>
<!--End mc_embed_signup-->
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="columns">
<div class="column is-3">
<div id="about" class="content">
<strong xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">Bulma</strong> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://jgthms.com" property="cc:attributionName" rel="cc:attributionURL">Jeremy Thomas</a>.
<p id="alternative">
<a href="http://bulma.io/versions/0.5.2/alternative-to-bootstrap/">An alternative to <strong>Bootstrap</strong></a>
</p>
<div class="twitter-container">
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
</div>
</div>
</div>
<div class="column is-5">
<div id="share" class="content">
<div>
<strong>Support</strong> and share the love!
</div>
<div id="social">
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Bulma v0.5.2: a modern CSS framework based on Flexbox" data-url="http://bulma.io/versions/0.5.2" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
<form class="paypal-form" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="8WMKYSRFN6A78">
<input type="image" src="http://bulma.io/versions/0.5.2/images/paypal-donate.png" border="0" name="submit" alt="PayPal The safer, easier way to pay online." height="30">
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
</div>
</div>
</div>
<div class="column is-4">
<div id="sister">
<p>
More <strong>helpful</strong> tools:
</p>
<ul>
<li>
<a href="http://cssreference.io">
<img src="http://bulma.io/versions/0.5.2/images/css-reference-logo.png" alt="CSS Reference logo">
</a>
</li>
<li>
<a href="http://htmlreference.io">
<img src="http://bulma.io/versions/0.5.2/images/html-reference-logo.png" alt="HTML Reference logo">
</a>
</li>
</ul>
</div>
</div>
</div>
<p id="tsp">
<small>
Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
<br>
Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
</small>
</p>
</div>
</footer>
<script src="http://bulma.io/versions/0.5.2/vendor/clipboard-1.7.1.min.js"></script>
<script src="http://bulma.io/versions/0.5.2/lib/main.js"></script>
<div id="fb-root"></div>
<script async defer type="text/javascript">(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.async = true;
js.defer = true;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
<script async defer type="text/javascript">
(function() {
window.fnames = new Array();
window.ftypes = new Array();
fnames[0]='EMAIL';
ftypes[0]='email';
}());
// var $mcj = window.jQuery.noConflict(true);
</script>
<script async defer type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-82634666-2', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>