2017-07-24 13:59:23 +00:00
<!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.4.4 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.4.4: a modern CSS framework based on Flexbox< / title >
< link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" >
< link rel = "stylesheet" href = "http://bulma.io/versions/0.4.4/css/bulma-docs.css" >
< link rel = "canonical" href = "http://bulma.io/versions/0.4.4/documentation/components/navbar/" >
< link rel = "alternate" type = "application/rss+xml" title = "Bulma v0.4.4: a modern CSS framework based on Flexbox" href = "http://bulma.io/versions/0.4.4/feed.xml" >
< meta property = "og:url" content = "http://bulma.io/versions/0.4.4" >
< meta property = "og:type" content = "website" >
< meta property = "og:title" content = "Bulma v0.4.4: a modern CSS framework based on Flexbox" >
< meta property = "og:image" content = "http://bulma.io/versions/0.4.4/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.4.4 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.4.4: a modern CSS framework based on Flexbox" >
< meta name = "twitter:image" content = "http://bulma.io/versions/0.4.4/images/bulma-banner.png" >
< meta name = "twitter:description" content = "Bulma v0.4.4 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.4.4/favicons/apple-touch-icon.png?v=201701041855" >
< link rel = "icon" type = "image/png" href = "http://bulma.io/versions/0.4.4/favicons/favicon-32x32.png?v=201701041855" sizes = "32x32" >
< link rel = "icon" type = "image/png" href = "http://bulma.io/versions/0.4.4/favicons/favicon-16x16.png?v=201701041855" sizes = "16x16" >
< link rel = "manifest" href = "http://bulma.io/versions/0.4.4/favicons/manifest.json?v=201701041855" >
< link rel = "mask-icon" href = "http://bulma.io/versions/0.4.4/favicons/safari-pinned-tab.svg?v=201701041855" color = "#00d1b2" >
< link rel = "shortcut icon" href = "http://bulma.io/versions/0.4.4/favicons/favicon.ico?v=201701041855" >
< meta name = "msapplication-config" content = "http://bulma.io/versions/0.4.4/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.4.4< / 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.4.4" >
< img src = "http://bulma.io/versions/0.4.4/images/bulma-logo.png" alt = "Bulma v0.4.4: 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-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-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" >
< a class = "navbar-item " href = "http://bulma.io/versions/0.4.4/" >
Home
< / a >
< div class = "navbar-item has-dropdown is-hoverable" >
< a class = "navbar-link is-active" href = "/versions/0.4.4/documentation/overview/start/" >
Docs
< / a >
< div class = "navbar-dropdown " >
< a class = "navbar-item " href = "/versions/0.4.4/documentation/overview/start/" >
Overview
< / a >
< a class = "navbar-item " href = "http://bulma.io/versions/0.4.4/documentation/modifiers/syntax/" >
Modifiers
< / a >
< a class = "navbar-item " href = "http://bulma.io/versions/0.4.4/documentation/grid/columns/" >
Grid
< / a >
< a class = "navbar-item " href = "http://bulma.io/versions/0.4.4/documentation/form/general/" >
Form
< / a >
< a class = "navbar-item " href = "http://bulma.io/versions/0.4.4/documentation/elements/box/" >
Elements
< / a >
< a class = "navbar-item is-active" href = "http://bulma.io/versions/0.4.4/documentation/components/breadcrumb/" >
Components
< / a >
< a class = "navbar-item " href = "http://bulma.io/versions/0.4.4/documentation/layout/container/" >
Layout
< / a >
< hr class = "navbar-divider" >
< div class = "navbar-item" >
< div >
< p class = "has-text-info is-size-6-desktop" > < strong > 0.4.4< / strong > < / p >
< small >
< a class = "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.4.4/blog/" >
Blog
< / a >
< div id = "blogDropdown" class = "navbar-dropdown " data-style = "width: 18rem;" >
< a class = "navbar-item" href = "/2017/03/10/new-field-element/" >
< div class = "navbar-content" >
< p >
< small class = "has-text-info" > 10 Mar 2017< / small >
< / p >
< p > New field element (for better controls)< / p >
< / div >
< / a >
< a class = "navbar-item" href = "/2016/04/11/metro-ui-css-grid-with-bulma-tiles/" >
< div class = "navbar-content" >
< p >
< small class = "has-text-info" > 11 Apr 2016< / small >
< / p >
< p > Metro UI CSS grid with Bulma tiles< / p >
< / div >
< / a >
< a class = "navbar-item" href = "/2016/02/09/blog-launched-new-responsive-columns-new-helpers/" >
< div class = "navbar-content" >
< p >
< small class = "has-text-info" > 09 Feb 2016< / small >
< / p >
< p > Blog launched, new responsive columns, new helpers< / p >
< / div >
< / a >
< a class = "navbar-item" href = "http://bulma.io/versions/0.4.4/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 is-rss is-small" href = "http://bulma.io/versions/0.4.4/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.4.4/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 >
< / div >
< div class = "navbar-end" >
< a class = "navbar-item" href = "https://github.com/jgthms/bulma" target = "_blank" >
Github
< / a >
< a class = "navbar-item" href = "https://twitter.com/jgthms" target = "_blank" >
Twitter
< / a >
< div class = "navbar-item" >
< div class = "field is-grouped" >
< p class = "control" >
< a id = "twitter"
class="button"
data-social-network="Twitter"
data-social-action="tweet"
data-social-target="http://bulma.io/versions/0.4.4"
target="_blank"
href="https://twitter.com/intent/tweet?text=Bulma v0.4.4: a modern CSS framework based on Flexbox& url=http://bulma.io/versions/0.4.4& 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.4.4.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 = "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 class = "hero-foot" >
< div class = "container" >
< nav class = "tabs is-boxed" >
< ul >
< li >
< a href = "/versions/0.4.4/documentation/overview/start/" > Overview< / a >
< / li >
< li >
< a href = "http://bulma.io/versions/0.4.4/documentation/modifiers/syntax" > Modifiers< / a >
< / li >
< li >
< a href = "http://bulma.io/versions/0.4.4/documentation/grid/columns" > Grid< / a >
< / li >
< li >
< a href = "http://bulma.io/versions/0.4.4/documentation/form/general" > Form< / a >
< / li >
< li >
< a href = "http://bulma.io/versions/0.4.4/documentation/elements/box/" > Elements< / a >
< / li >
< li class = "is-active" >
< a href = "http://bulma.io/versions/0.4.4/documentation/components/breadcrumb/" > Components< / a >
< / li >
< li >
< a href = "http://bulma.io/versions/0.4.4/documentation/layout/container/" > Layout< / a >
< / li >
< / ul >
< / div >
< / div >
< / nav >
< / section >
< nav class = "navbar has-shadow" >
< div class = "container is-fullhd" >
< div class = "navbar-brand" >
< a class = "navbar-item is-tab " href = "http://bulma.io/versions/0.4.4/documentation/components/breadcrumb/" >
Breadcrumb
< / a >
< a class = "navbar-item is-tab " href = "http://bulma.io/versions/0.4.4/documentation/components/card/" >
Card
< / a >
< a class = "navbar-item is-tab " href = "http://bulma.io/versions/0.4.4/documentation/components/dropdown/" >
Dropdown
< / a >
< a class = "navbar-item is-tab " href = "http://bulma.io/versions/0.4.4/documentation/components/level/" >
Level
< / a >
< a class = "navbar-item is-tab " href = "http://bulma.io/versions/0.4.4/documentation/components/media-object/" >
Media object
< / a >
< a class = "navbar-item is-tab " href = "http://bulma.io/versions/0.4.4/documentation/components/menu/" >
Menu
< / a >
< a class = "navbar-item is-tab " href = "http://bulma.io/versions/0.4.4/documentation/components/message/" >
Message
< / a >
< a class = "navbar-item is-tab " href = "http://bulma.io/versions/0.4.4/documentation/components/modal/" >
Modal
< / a >
< a class = "navbar-item is-tab is-active" href = "http://bulma.io/versions/0.4.4/documentation/components/navbar/" >
Navbar
< / a >
< a class = "navbar-item is-tab " href = "http://bulma.io/versions/0.4.4/documentation/components/pagination/" >
Pagination
< / a >
< a class = "navbar-item is-tab " href = "http://bulma.io/versions/0.4.4/documentation/components/panel/" >
Panel
< / a >
< a class = "navbar-item is-tab " href = "http://bulma.io/versions/0.4.4/documentation/components/tabs/" >
Tabs
< / a >
< / div >
< / div >
< / nav >
< section class = "section" >
< div class = "container" >
< div class = "columns" style = "margin-bottom: -0.75rem !important;" >
< div class = "column" >
< h1 class = "title" > Navbar< / h1 >
< h2 class = "subtitle" >
A responsive horizontal < strong > navbar< / strong > that can supports images, links, buttons, and dropdowns
< / h2 >
< / div >
< div class = "column is-narrow" >
< p class = "content" >
< span class = "tag is-success" > New!< / span >
< span class = "tag is-info" > 0.4.3< / span >
< / p >
< / 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.4.4/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 a < 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 >
< div class = "example is-paddingless" >
< nav class = "navbar " >
< div class = "navbar-brand" >
< a class = "navbar-item" href = "http://bulma.io/versions/0.4.4" >
< img src = "http://bulma.io/versions/0.4.4/images/bulma-logo.png" alt = "Bulma v0.4.4: 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-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-twitter" > < / i >
< / span >
< / a >
< div class = "navbar-burger burger" data-target = "navMenuExample" >
< span > < / span >
< span > < / span >
< span > < / span >
< / div >
< / div >
< div id = "navMenuExample" class = "navbar-menu" >
< div class = "navbar-start" >
< a class = "navbar-item " href = "http://bulma.io/versions/0.4.4/" >
Home
< / a >
< div class = "navbar-item has-dropdown is-hoverable" >
< a class = "navbar-link is-active" href = "/versions/0.4.4/documentation/overview/start/" >
Docs
< / a >
< div class = "navbar-dropdown " >
< a class = "navbar-item " href = "/versions/0.4.4/documentation/overview/start/" >
Overview
< / a >
< a class = "navbar-item " href = "http://bulma.io/versions/0.4.4/documentation/modifiers/syntax/" >
Modifiers
< / a >
< a class = "navbar-item " href = "http://bulma.io/versions/0.4.4/documentation/grid/columns/" >
Grid
< / a >
< a class = "navbar-item " href = "http://bulma.io/versions/0.4.4/documentation/form/general/" >
Form
< / a >
< a class = "navbar-item " href = "http://bulma.io/versions/0.4.4/documentation/elements/box/" >
Elements
< / a >
< a class = "navbar-item is-active" href = "http://bulma.io/versions/0.4.4/documentation/components/breadcrumb/" >
Components
< / a >
< a class = "navbar-item " href = "http://bulma.io/versions/0.4.4/documentation/layout/container/" >
Layout
< / a >
< hr class = "navbar-divider" >
< div class = "navbar-item" >
< div >
< p class = "has-text-info is-size-6-desktop" > < strong > 0.4.4< / strong > < / p >
< small >
< a class = "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.4.4/blog/" >
Blog
< / a >
< div id = "blogDropdown" class = "navbar-dropdown " data-style = "width: 18rem;" >
< a class = "navbar-item" href = "/2017/03/10/new-field-element/" >
< div class = "navbar-content" >
< p >
< small class = "has-text-info" > 10 Mar 2017< / small >
< / p >
< p > New field element (for better controls)< / p >
< / div >
< / a >
< a class = "navbar-item" href = "/2016/04/11/metro-ui-css-grid-with-bulma-tiles/" >
< div class = "navbar-content" >
< p >
< small class = "has-text-info" > 11 Apr 2016< / small >
< / p >
< p > Metro UI CSS grid with Bulma tiles< / p >
< / div >
< / a >
< a class = "navbar-item" href = "/2016/02/09/blog-launched-new-responsive-columns-new-helpers/" >
< div class = "navbar-content" >
< p >
< small class = "has-text-info" > 09 Feb 2016< / small >
< / p >
< p > Blog launched, new responsive columns, new helpers< / p >
< / div >
< / a >
< a class = "navbar-item" href = "http://bulma.io/versions/0.4.4/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 is-rss is-small" href = "http://bulma.io/versions/0.4.4/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.4.4/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 >
< / div >
< div class = "navbar-end" >
< a class = "navbar-item" href = "https://github.com/jgthms/bulma" target = "_blank" >
Github
< / a >
< a class = "navbar-item" href = "https://twitter.com/jgthms" target = "_blank" >
Twitter
< / a >
< div class = "navbar-item" >
< div class = "field is-grouped" >
< p class = "control" >
< a id = "twitter"
class="button"
data-social-network="Twitter"
data-social-action="tweet"
data-social-target="http://bulma.io/versions/0.4.4"
target="_blank"
href="https://twitter.com/intent/tweet?text=Bulma v0.4.4: a modern CSS framework based on Flexbox& url=http://bulma.io/versions/0.4.4& 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.4.4.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" > < nav< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar "< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-brand"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < 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.4.4"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < img< / span > < span class = "na" > src=< / span > < span class = "s" > "http://bulma.io/versions/0.4.4/images/bulma-logo.png"< / span > < span class = "na" > alt=< / span > < span class = "s" > "Bulma v0.4.4: 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" > > < / span >
< span class = "nt" > < /a> < / span >
< span class = "nt" > < 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" > > < / span >
< span class = "nt" > < 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" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-github"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < /a> < / span >
< span class = "nt" > < 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" > > < / span >
< span class = "nt" > < 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" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-twitter"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < /a> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-burger burger"< / span > < span class = "na" > data-target=< / span > < span class = "s" > "navMenuExample"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span> < /span> < / span >
< span class = "nt" > < span> < /span> < / span >
< span class = "nt" > < span> < /span> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > id=< / span > < span class = "s" > "navMenuExample"< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-menu"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-start"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < 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.4.4/"< / span > < span class = "nt" > > < / span >
Home
< span class = "nt" > < /a> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item has-dropdown is-hoverable"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < 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.4.4/documentation/overview/start/"< / span > < span class = "nt" > > < / span >
Docs
< span class = "nt" > < /a> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-dropdown "< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item "< / span > < span class = "na" > href=< / span > < span class = "s" > "/versions/0.4.4/documentation/overview/start/"< / span > < span class = "nt" > > < / span >
Overview
< span class = "nt" > < /a> < / span >
< span class = "nt" > < 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.4.4/documentation/modifiers/syntax/"< / span > < span class = "nt" > > < / span >
Modifiers
< span class = "nt" > < /a> < / span >
< span class = "nt" > < 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.4.4/documentation/grid/columns/"< / span > < span class = "nt" > > < / span >
Grid
< span class = "nt" > < /a> < / span >
< span class = "nt" > < 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.4.4/documentation/form/general/"< / span > < span class = "nt" > > < / span >
Form
< span class = "nt" > < /a> < / span >
< span class = "nt" > < 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.4.4/documentation/elements/box/"< / span > < span class = "nt" > > < / span >
Elements
< span class = "nt" > < /a> < / span >
< span class = "nt" > < 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.4.4/documentation/components/breadcrumb/"< / span > < span class = "nt" > > < / span >
Components
< span class = "nt" > < /a> < / span >
< span class = "nt" > < 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.4.4/documentation/layout/container/"< / span > < span class = "nt" > > < / span >
Layout
< span class = "nt" > < /a> < / span >
< span class = "nt" > < hr< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-divider"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div> < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "has-text-info is-size-6-desktop"< / span > < span class = "nt" > > < strong> < / span > 0.4.4< span class = "nt" > < /strong> < /p> < / span >
< span class = "nt" > < small> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "view-all-versions"< / span > < span class = "na" > href=< / span > < span class = "s" > "/versions"< / span > < span class = "nt" > > < / span > View all versions< span class = "nt" > < /a> < / span >
< span class = "nt" > < /small> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item has-dropdown is-hoverable"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < 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.4.4/blog/"< / span > < span class = "nt" > > < / span >
Blog
< span class = "nt" > < /a> < / span >
< span class = "nt" > < div< / span > < span class = "na" > id=< / span > < span class = "s" > "blogDropdown"< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-dropdown "< / span > < span class = "na" > data-style=< / span > < span class = "s" > "width: 18rem;"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "na" > href=< / span > < span class = "s" > "/2017/03/10/new-field-element/"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-content"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < p> < / span >
< span class = "nt" > < small< / span > < span class = "na" > class=< / span > < span class = "s" > "has-text-info"< / span > < span class = "nt" > > < / span > 10 Mar 2017< span class = "nt" > < /small> < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < p> < / span > New field element (for better controls)< span class = "nt" > < /p> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "na" > href=< / span > < span class = "s" > "/2016/04/11/metro-ui-css-grid-with-bulma-tiles/"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-content"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < p> < / span >
< span class = "nt" > < small< / span > < span class = "na" > class=< / span > < span class = "s" > "has-text-info"< / span > < span class = "nt" > > < / span > 11 Apr 2016< span class = "nt" > < /small> < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < p> < / span > Metro UI CSS grid with Bulma tiles< span class = "nt" > < /p> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "na" > href=< / span > < span class = "s" > "/2016/02/09/blog-launched-new-responsive-columns-new-helpers/"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-content"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < p> < / span >
< span class = "nt" > < small< / span > < span class = "na" > class=< / span > < span class = "s" > "has-text-info"< / span > < span class = "nt" > > < / span > 09 Feb 2016< span class = "nt" > < /small> < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < p> < / span > Blog launched, new responsive columns, new helpers< span class = "nt" > < /p> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /a> < / span >
< span class = "nt" > < 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.4.4/blog/"< / span > < span class = "nt" > > < / span >
More posts
< span class = "nt" > < /a> < / span >
< span class = "nt" > < hr< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-divider"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-content"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "level is-mobile"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "level-left"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "level-item"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < strong> < / span > Stay up to date!< span class = "nt" > < /strong> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "level-right"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "level-item"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "button is-rss is-small"< / span > < span class = "na" > href=< / span > < span class = "s" > "http://bulma.io/versions/0.4.4/atom.xml"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon is-small"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-rss"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < span> < / span > Subscribe< span class = "nt" > < /span> < / span >
< span class = "nt" > < /a> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item has-dropdown is-hoverable"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-link"< / span > < span class = "nt" > > < / span >
More
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > id=< / span > < span class = "s" > "moreDropdown"< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-dropdown "< / span > < span class = "nt" > > < / span >
< span class = "nt" > < 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.4.4/extensions/"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "level is-mobile"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "level-left"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "level-item"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < p> < / span >
< span class = "nt" > < strong> < / span > Extensions< span class = "nt" > < /strong> < / span >
< span class = "nt" > < br> < / span >
< span class = "nt" > < small> < / span > Side projects to enhance Bulma< span class = "nt" > < /small> < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "level-right"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "level-item"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon has-text-info"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-plug"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /a> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-end"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / 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" > > < / span >
Github
< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / 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" > > < / span >
Twitter
< span class = "nt" > < /a> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field is-grouped"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > id=< / span > < span class = "s" > "twitter"< / span >
< span class = "na" > class=< / span > < span class = "s" > "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.4.4"< / 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.4.4: a modern CSS framework based on Flexbox& url=http://bulma.io/versions/0.4.4& via=jgthms"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-twitter"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < span> < / span > Tweet< span class = "nt" > < /span> < / span >
< span class = "nt" > < /a> < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < 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.4.4.zip"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-download"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < span> < / span > Download< span class = "nt" > < /span> < / span >
< span class = "nt" > < /a> < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /nav> < / span > < / code > < / pre > < / figure >
< hr >
< h3 class = "title" > Navbar brand< / 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" > < nav< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-brand"< / span > < span class = "nt" > > < / span >
< span class = "c" > < !-- navbar items, navbar burger ... --> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /nav> < / 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 = "example is-paddingless" >
< nav class = "navbar" >
< div class = "navbar-brand" >
< a class = "navbar-item" href = "http://bulma.io/versions/0.4.4" >
< img src = "http://bulma.io/versions/0.4.4/images/bulma-logo.png" alt = "Bulma v0.4.4: a modern CSS framework based on Flexbox" width = "112" height = "28" >
< / a >
< div class = "navbar-burger" >
< span > < / span >
< span > < / span >
< span > < / span >
< / div >
< / div >
< / nav >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < nav< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-brand"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < 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.4.4"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < img< / span > < span class = "na" > src=< / span > < span class = "s" > "http://bulma.io/versions/0.4.4/images/bulma-logo.png"< / span > < span class = "na" > alt=< / span > < span class = "s" > "Bulma v0.4.4: 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" > > < / span >
< span class = "nt" > < /a> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-burger"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span> < /span> < / span >
< span class = "nt" > < span> < /span> < / span >
< span class = "nt" > < span> < /span> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /nav> < / 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 >
< h3 class = "title" > Navbar burger< / 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 = "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" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-burger"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span> < /span> < / span >
< span class = "nt" > < span> < /span> < / span >
< span class = "nt" > < span> < /span> < / span >
< span class = "nt" > < /div> < / 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 = "example is-paddingless" >
< div class = "navbar-burger is-active" style = "display: flex;" >
< span > < / span >
< span > < / span >
< span > < / span >
< / div >
< / div >
< hr >
< h3 class = "title" > Navbar menu< / 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" > < nav< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-brand"< / span > < span class = "nt" > > < / span >
< span class = "c" > < !-- navbar items, nav burger ... --> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-menu"< / span > < span class = "nt" > > < / span >
< span class = "c" > < !-- navbar start, navbar end --> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /nav> < / 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" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-menu"< / span > < span class = "nt" > > < / span >
< span class = "c" > < !-- hidden on mobile --> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-menu is-active"< / span > < span class = "nt" > > < / span >
< span class = "c" > < !-- shown on mobile --> < / span >
< span class = "nt" > < /div> < / 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" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-burger"< / span > < span class = "na" > data-target=< / span > < span class = "s" > "navMenu"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span> < /span> < / span >
< span class = "nt" > < span> < /span> < / span >
< span class = "nt" > < span> < /span> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < 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" > > < / span >
< span class = "c" > < !-- navbar-start, navbar-end... --> < / span >
< span class = "nt" > < /div> < / 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 nav 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" > > < / 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 = "p" > ()< / span > < span class = "o" > => < / 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 >
< h3 class = "title" > Navbar start and navbar end< / 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" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-menu"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-start"< / span > < span class = "nt" > > < / span >
< span class = "c" > < !-- navbar items --> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-end"< / span > < span class = "nt" > > < / span >
< span class = "c" > < !-- navbar items --> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< hr >
< h3 class = "title" > Navbar item< / 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" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "nt" > > < / span >
Home
< span class = "nt" > < /a> < / 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" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < img< / span > < span class = "na" > src=< / span > < span class = "s" > "http://bulma.io/versions/0.4.4/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 = "nt" > > < / span >
< span class = "nt" > < /a> < / 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" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item has-dropdown"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-link"< / span > < span class = "nt" > > < / span >
Docs
< span class = "nt" > < /a> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-dropdown"< / span > < span class = "nt" > > < / span >
< span class = "c" > < !-- Other navbar items --> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / 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" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-dropdown"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "nt" > > < / span >
Overview
< span class = "nt" > < /a> < / span >
< span class = "nt" > < /div> < / 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" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field is-grouped"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "button"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-twitter"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < span> < / span > Tweet< span class = "nt" > < /span> < / span >
< span class = "nt" > < /a> < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "button is-primary"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-download"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < span> < / span > Download< span class = "nt" > < /span> < / span >
< span class = "nt" > < /a> < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< / li >
< / ul >
< p >
It can either be an anchor tag < code > < a> < / code > or a < code > < div> < / code > , as a < strong > direct child< / strong > of either:
< / p >
< ul >
< li >
< code > navbar< / code >
< / li >
< li >
< code > navbar-brand< / code >
< / li >
< li >
< code > navbar-start< / code >
< / li >
< li >
< code > navbar-end< / code >
< / li >
< li >
< code > navbar-dropdown< / code >
< / li >
< / ul >
< / div >
< hr >
< h3 id = "transparent-navbar" class = "title" > Transparent navbar< / h3 >
< div class = "content" >
< p >
2017-10-02 18:24:29 +00:00
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.
2017-07-24 13:59:23 +00:00
< / p >
< / div >
< div class = "example is-paddingless" >
< nav class = "navbar is-transparent" >
< div class = "navbar-brand" >
< a class = "navbar-item" href = "http://bulma.io/versions/0.4.4" >
< img src = "http://bulma.io/versions/0.4.4/images/bulma-logo.png" alt = "Bulma v0.4.4: 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-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-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" >
< a class = "navbar-item " href = "http://bulma.io/versions/0.4.4/" >
Home
< / a >
< div class = "navbar-item has-dropdown is-hoverable" >
< a class = "navbar-link is-active" href = "/versions/0.4.4/documentation/overview/start/" >
Docs
< / a >
< div class = "navbar-dropdown is-boxed" >
< a class = "navbar-item " href = "/versions/0.4.4/documentation/overview/start/" >
Overview
< / a >
< a class = "navbar-item " href = "http://bulma.io/versions/0.4.4/documentation/modifiers/syntax/" >
Modifiers
< / a >
< a class = "navbar-item " href = "http://bulma.io/versions/0.4.4/documentation/grid/columns/" >
Grid
< / a >
< a class = "navbar-item " href = "http://bulma.io/versions/0.4.4/documentation/form/general/" >
Form
< / a >
< a class = "navbar-item " href = "http://bulma.io/versions/0.4.4/documentation/elements/box/" >
Elements
< / a >
< a class = "navbar-item is-active" href = "http://bulma.io/versions/0.4.4/documentation/components/breadcrumb/" >
Components
< / a >
< a class = "navbar-item " href = "http://bulma.io/versions/0.4.4/documentation/layout/container/" >
Layout
< / a >
< hr class = "navbar-divider" >
< div class = "navbar-item" >
< div >
< p class = "has-text-info is-size-6-desktop" > < strong > 0.4.4< / strong > < / p >
< small >
< a class = "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.4.4/blog/" >
Blog
< / a >
< div id = "blogDropdown" class = "navbar-dropdown is-boxed" data-style = "width: 18rem;" >
< a class = "navbar-item" href = "/2017/03/10/new-field-element/" >
< div class = "navbar-content" >
< p >
< small class = "has-text-info" > 10 Mar 2017< / small >
< / p >
< p > New field element (for better controls)< / p >
< / div >
< / a >
< a class = "navbar-item" href = "/2016/04/11/metro-ui-css-grid-with-bulma-tiles/" >
< div class = "navbar-content" >
< p >
< small class = "has-text-info" > 11 Apr 2016< / small >
< / p >
< p > Metro UI CSS grid with Bulma tiles< / p >
< / div >
< / a >
< a class = "navbar-item" href = "/2016/02/09/blog-launched-new-responsive-columns-new-helpers/" >
< div class = "navbar-content" >
< p >
< small class = "has-text-info" > 09 Feb 2016< / small >
< / p >
< p > Blog launched, new responsive columns, new helpers< / p >
< / div >
< / a >
< a class = "navbar-item" href = "http://bulma.io/versions/0.4.4/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 is-rss is-small" href = "http://bulma.io/versions/0.4.4/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.4.4/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 >
< / div >
< div class = "navbar-end" >
< a class = "navbar-item" href = "https://github.com/jgthms/bulma" target = "_blank" >
Github
< / a >
< a class = "navbar-item" href = "https://twitter.com/jgthms" target = "_blank" >
Twitter
< / a >
< div class = "navbar-item" >
< div class = "field is-grouped" >
< p class = "control" >
< a id = "twitter"
class="button"
data-social-network="Twitter"
data-social-action="tweet"
data-social-target="http://bulma.io/versions/0.4.4"
target="_blank"
href="https://twitter.com/intent/tweet?text=Bulma v0.4.4: a modern CSS framework based on Flexbox& url=http://bulma.io/versions/0.4.4& 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.4.4.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" > < nav< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar is-transparent"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-brand"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < 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.4.4"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < img< / span > < span class = "na" > src=< / span > < span class = "s" > "http://bulma.io/versions/0.4.4/images/bulma-logo.png"< / span > < span class = "na" > alt=< / span > < span class = "s" > "Bulma v0.4.4: 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" > > < / span >
< span class = "nt" > < /a> < / span >
< span class = "nt" > < 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" > > < / span >
< span class = "nt" > < 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" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-github"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < /a> < / span >
< span class = "nt" > < 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" > > < / span >
< span class = "nt" > < 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" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-twitter"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < /a> < / span >
< span class = "nt" > < 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" > > < / span >
< span class = "nt" > < span> < /span> < / span >
< span class = "nt" > < span> < /span> < / span >
< span class = "nt" > < span> < /span> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < 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" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-start"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < 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.4.4/"< / span > < span class = "nt" > > < / span >
Home
< span class = "nt" > < /a> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item has-dropdown is-hoverable"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < 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.4.4/documentation/overview/start/"< / span > < span class = "nt" > > < / span >
Docs
< span class = "nt" > < /a> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-dropdown is-boxed"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item "< / span > < span class = "na" > href=< / span > < span class = "s" > "/versions/0.4.4/documentation/overview/start/"< / span > < span class = "nt" > > < / span >
Overview
< span class = "nt" > < /a> < / span >
< span class = "nt" > < 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.4.4/documentation/modifiers/syntax/"< / span > < span class = "nt" > > < / span >
Modifiers
< span class = "nt" > < /a> < / span >
< span class = "nt" > < 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.4.4/documentation/grid/columns/"< / span > < span class = "nt" > > < / span >
Grid
< span class = "nt" > < /a> < / span >
< span class = "nt" > < 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.4.4/documentation/form/general/"< / span > < span class = "nt" > > < / span >
Form
< span class = "nt" > < /a> < / span >
< span class = "nt" > < 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.4.4/documentation/elements/box/"< / span > < span class = "nt" > > < / span >
Elements
< span class = "nt" > < /a> < / span >
< span class = "nt" > < 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.4.4/documentation/components/breadcrumb/"< / span > < span class = "nt" > > < / span >
Components
< span class = "nt" > < /a> < / span >
< span class = "nt" > < 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.4.4/documentation/layout/container/"< / span > < span class = "nt" > > < / span >
Layout
< span class = "nt" > < /a> < / span >
< span class = "nt" > < hr< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-divider"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div> < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "has-text-info is-size-6-desktop"< / span > < span class = "nt" > > < strong> < / span > 0.4.4< span class = "nt" > < /strong> < /p> < / span >
< span class = "nt" > < small> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "view-all-versions"< / span > < span class = "na" > href=< / span > < span class = "s" > "/versions"< / span > < span class = "nt" > > < / span > View all versions< span class = "nt" > < /a> < / span >
< span class = "nt" > < /small> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item has-dropdown is-hoverable"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < 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.4.4/blog/"< / span > < span class = "nt" > > < / span >
Blog
< span class = "nt" > < /a> < / span >
< span class = "nt" > < 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" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "na" > href=< / span > < span class = "s" > "/2017/03/10/new-field-element/"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-content"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < p> < / span >
< span class = "nt" > < small< / span > < span class = "na" > class=< / span > < span class = "s" > "has-text-info"< / span > < span class = "nt" > > < / span > 10 Mar 2017< span class = "nt" > < /small> < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < p> < / span > New field element (for better controls)< span class = "nt" > < /p> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "na" > href=< / span > < span class = "s" > "/2016/04/11/metro-ui-css-grid-with-bulma-tiles/"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-content"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < p> < / span >
< span class = "nt" > < small< / span > < span class = "na" > class=< / span > < span class = "s" > "has-text-info"< / span > < span class = "nt" > > < / span > 11 Apr 2016< span class = "nt" > < /small> < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < p> < / span > Metro UI CSS grid with Bulma tiles< span class = "nt" > < /p> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "na" > href=< / span > < span class = "s" > "/2016/02/09/blog-launched-new-responsive-columns-new-helpers/"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-content"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < p> < / span >
< span class = "nt" > < small< / span > < span class = "na" > class=< / span > < span class = "s" > "has-text-info"< / span > < span class = "nt" > > < / span > 09 Feb 2016< span class = "nt" > < /small> < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < p> < / span > Blog launched, new responsive columns, new helpers< span class = "nt" > < /p> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /a> < / span >
< span class = "nt" > < 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.4.4/blog/"< / span > < span class = "nt" > > < / span >
More posts
< span class = "nt" > < /a> < / span >
< span class = "nt" > < hr< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-divider"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-content"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "level is-mobile"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "level-left"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "level-item"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < strong> < / span > Stay up to date!< span class = "nt" > < /strong> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "level-right"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "level-item"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "button is-rss is-small"< / span > < span class = "na" > href=< / span > < span class = "s" > "http://bulma.io/versions/0.4.4/atom.xml"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon is-small"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-rss"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < span> < / span > Subscribe< span class = "nt" > < /span> < / span >
< span class = "nt" > < /a> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item has-dropdown is-hoverable"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-link"< / span > < span class = "nt" > > < / span >
More
< span class = "nt" > < /div> < / span >
< span class = "nt" > < 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" > > < / span >
< span class = "nt" > < 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.4.4/extensions/"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "level is-mobile"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "level-left"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "level-item"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < p> < / span >
< span class = "nt" > < strong> < / span > Extensions< span class = "nt" > < /strong> < / span >
< span class = "nt" > < br> < / span >
< span class = "nt" > < small> < / span > Side projects to enhance Bulma< span class = "nt" > < /small> < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "level-right"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "level-item"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon has-text-info"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-plug"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /a> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-end"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / 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" > > < / span >
Github
< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / 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" > > < / span >
Twitter
< span class = "nt" > < /a> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field is-grouped"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > id=< / span > < span class = "s" > "twitter"< / span >
< span class = "na" > class=< / span > < span class = "s" > "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.4.4"< / 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.4.4: a modern CSS framework based on Flexbox& url=http://bulma.io/versions/0.4.4& via=jgthms"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-twitter"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < span> < / span > Tweet< span class = "nt" > < /span> < / span >
< span class = "nt" > < /a> < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < 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.4.4.zip"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-download"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < span> < / span > Download< span class = "nt" > < /span> < / span >
< span class = "nt" > < /a> < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /nav> < / span > < / code > < / pre > < / figure >
< hr >
< h3 id = "dropdown-menu" class = "title" > Dropdown menu< / 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 = "example is-paddingless" >
< nav class = "navbar" >
< 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.4.4
< / div >
< / div >
< / div >
< / nav >
< / div >
< / div >
< div class = "column" >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < nav< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item has-dropdown"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-link"< / span > < span class = "nt" > > < / span >
Docs
< span class = "nt" > < /a> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-dropdown"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "nt" > > < / span >
Overview
< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "nt" > > < / span >
Elements
< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "nt" > > < / span >
Components
< span class = "nt" > < /a> < / span >
< span class = "nt" > < hr< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-divider"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "nt" > > < / span >
Version 0.4.4
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /nav> < / 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 >
< div class = "columns" >
< div class = "column" >
< div class = "example is-paddingless" >
< nav class = "navbar" >
< 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.4.4
< / div >
< / div >
< / div >
< / nav >
< / div >
< / div >
< div class = "column" >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < nav< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item has-dropdown is-hoverable"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-link"< / span > < span class = "nt" > > < / span >
Docs
< span class = "nt" > < /a> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-dropdown"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "nt" > > < / span >
Overview
< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "nt" > > < / span >
Elements
< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "nt" > > < / span >
Components
< span class = "nt" > < /a> < / span >
< span class = "nt" > < hr< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-divider"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "nt" > > < / span >
Version 0.4.4
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /nav> < / span > < / code > < / pre > < / figure >
< / div >
< / div >
< div class = "columns" >
< div class = "column" >
< div class = "example is-paddingless" >
< nav class = "navbar" >
< 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.4.4
< / div >
< / div >
< / div >
< / nav >
< / div >
< / div >
< div class = "column" >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < nav< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item has-dropdown is-active"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-link"< / span > < span class = "nt" > > < / span >
Docs
< span class = "nt" > < /a> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-dropdown"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "nt" > > < / span >
Overview
< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "nt" > > < / span >
Elements
< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "nt" > > < / span >
Components
< span class = "nt" > < /a> < / span >
< span class = "nt" > < hr< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-divider"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "nt" > > < / span >
Version 0.4.4
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /nav> < / 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 = "example is-paddingless" >
< nav class = "navbar" >
< a class = "navbar-item" >
< img src = "http://bulma.io/versions/0.4.4/images/bulma-logo.png" alt = "Bulma v0.4.4: 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.4.4
< / 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" > < nav< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < img< / span > < span class = "na" > src=< / span > < span class = "s" > "http://bulma.io/versions/0.4.4/images/bulma-logo.png"< / span > < span class = "na" > alt=< / span > < span class = "s" > "Bulma v0.4.4: 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" > > < / span >
< span class = "nt" > < /a> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item has-dropdown is-active"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-link"< / span > < span class = "nt" > > < / span >
Docs
< span class = "nt" > < /a> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-dropdown"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "nt" > > < / span >
Overview
< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "nt" > > < / span >
Elements
< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "nt" > > < / span >
Components
< span class = "nt" > < /a> < / span >
< span class = "nt" > < hr< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-divider"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "nt" > > < / span >
Version 0.4.4
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /nav> < / span >
< span class = "nt" > < section< / span > < span class = "na" > class=< / span > < span class = "s" > "hero is-primary"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "hero-body"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "title"< / span > < span class = "nt" > > < / span >
Documentation
< span class = "nt" > < /p> < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "subtitle"< / span > < span class = "nt" > > < / span >
Everything you need to < span class = "nt" > < strong> < / span > create a website< span class = "nt" > < /strong> < / span > with Bulma
< span class = "nt" > < /p> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /section> < / 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 = "example is-paddingless" >
< nav class = "navbar is-transparent" >
< a class = "navbar-item" >
< img src = "http://bulma.io/versions/0.4.4/images/bulma-logo.png" alt = "Bulma v0.4.4: 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.4.4
< / 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" > < nav< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar is-transparent"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < img< / span > < span class = "na" > src=< / span > < span class = "s" > "http://bulma.io/versions/0.4.4/images/bulma-logo.png"< / span > < span class = "na" > alt=< / span > < span class = "s" > "Bulma v0.4.4: 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" > > < / span >
< span class = "nt" > < /a> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item has-dropdown is-active"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-link"< / span > < span class = "nt" > > < / span >
Docs
< span class = "nt" > < /a> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-dropdown is-boxed"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "nt" > > < / span >
Overview
< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "nt" > > < / span >
Elements
< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "nt" > > < / span >
Components
< span class = "nt" > < /a> < / span >
< span class = "nt" > < hr< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-divider"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "nt" > > < / span >
Version 0.4.4
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /nav> < / span >
< span class = "nt" > < section< / span > < span class = "na" > class=< / span > < span class = "s" > "hero"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "hero-body"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "title"< / span > < span class = "nt" > > < / span >
Documentation
< span class = "nt" > < /p> < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "subtitle"< / span > < span class = "nt" > > < / span >
Everything you need to < span class = "nt" > < strong> < / span > create a website< span class = "nt" > < /strong> < / span > with Bulma
< span class = "nt" > < /p> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /section> < / span > < / code > < / pre > < / figure >
< / div >
< / div >
< h4 class = "title is-4" >
Active dropdown navbar item
< / h4 >
< div class = "columns" >
< div class = "column" >
< div class = "example is-paddingless" >
< nav class = "navbar" >
< a class = "navbar-item" >
< img src = "http://bulma.io/versions/0.4.4/images/bulma-logo.png" alt = "Bulma v0.4.4: 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.4.4
< / 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" > < nav< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < img< / span > < span class = "na" > src=< / span > < span class = "s" > "http://bulma.io/versions/0.4.4/images/bulma-logo.png"< / span > < span class = "na" > alt=< / span > < span class = "s" > "Bulma v0.4.4: 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" > > < / span >
< span class = "nt" > < /a> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item has-dropdown is-active"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-link"< / span > < span class = "nt" > > < / span >
Docs
< span class = "nt" > < /a> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-dropdown"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "nt" > > < / span >
Overview
< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item is-active"< / span > < span class = "nt" > > < / span >
Elements
< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "nt" > > < / span >
Components
< span class = "nt" > < /a> < / span >
< span class = "nt" > < hr< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-divider"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-item"< / span > < span class = "nt" > > < / span >
Version 0.4.4
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /nav> < / span >
< span class = "nt" > < section< / span > < span class = "na" > class=< / span > < span class = "s" > "hero is-primary"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "hero-body"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "title"< / span > < span class = "nt" > > < / span >
Documentation
< span class = "nt" > < /p> < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "subtitle"< / span > < span class = "nt" > > < / span >
Everything you need to < span class = "nt" > < strong> < / span > create a website< span class = "nt" > < /strong> < / span > with Bulma
< span class = "nt" > < /p> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /section> < / 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" > < hr< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-divider"< / span > < span class = "nt" > > < / span > < / code > < / pre > < / figure >
< / 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&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 > .
< 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.4.4: a modern CSS framework based on Flexbox" data-url = "http://bulma.io/versions/0.4.4" 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.4.4/images/paypal-donate.png" border = "0" name = "submit" alt = "PayPal – 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.4.4/images/css-reference-logo.png" alt = "CSS Reference logo" >
< / a >
< / li >
< li >
< a href = "http://htmlreference.io" >
< img src = "http://bulma.io/versions/0.4.4/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.4.4/vendor/clipboard-1.7.1.min.js" > < / script >
< script src = "http://bulma.io/versions/0.4.4/lib/main.js" > < / script >
< div id = "fb-root" > < / div >
< script async defer type = "text/javascript" > ( f u n c t i o n ( d , s , i d ) {
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 >
