- Bulma Tutorial
- Bulma - Home
- Bulma - Introduction
- Bulma - Overview
- Bulma - Modifiers
- Bulma - Columns
- Bulma - Layout
- Bulma - Form
- Bulma - Elements
- Bulma - Components
- Bulma Useful Resources
- Bulma - Quick Guide
- Bulma - Resources
- Bulma - Discussion
Bulma - Navbar
Description
Navbars are responsive components that serve as navigation headers for your site.
Navbar component includes the following structure −
navbar −
navbar-brand − It includes <a> tag element, which contains some links or logo.
navbar-burger − It is a hamburger icon, that toggles navbar menu on small devices (e.g. mobile phone).
navbar-menu − It is a right side menu, which is visible on desktop and hidden on small devices.
navbar-start − It appears on left side of the menu.
navbar-end − It appears on right side of the menu.
navbar-item − It specifies single item of the navbar.
navbar-link − It specifies the dropdown arrow.
navbar-dropdown − It specifies dropdown menu with navbar items and dividers.
navbar-divider − It specifies horizontal line to divide the dropdown items.
The below example demonstrates usage of above elements of Navbar component −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Simple Navbar
</span>
<br>
<br>
<nav class = "navbar">
<div class = "navbar-brand">
<a class = "navbar-item" href = "#">TutorialsPoint</a>
<div class = "navbar-burger burger" data-target="navbarExample">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id = "navbarExample" class = "navbar-menu">
<div class = "navbar-start">
<a class = "navbar-item" href = "https://bulma.io/">Home</a>
<div class = "navbar-item has-dropdown is-hoverable">
<a class = "navbar-link" href = "#">Programming Languages</a>
<div class = "navbar-dropdown is-boxed">
<a class = "navbar-item" href = "#">JavaScript</a>
<a class = "navbar-item" href = "#">Python</a>
<a class = "navbar-item" href = "#">PHP</a>
<a class = "navbar-item" href = "#">Java</a>
<hr class = "navbar-divider">
<a class = "navbar-item" href = "#">Separated link</a>
<hr class = "navbar-divider">
<a class = "navbar-item" href = "#">One more separated link</a>
</div>
</div>
</div>
<div class = "navbar-end">
<div class = "navbar-item">
<div class = "field is-grouped">
<p class = "control">
<a class = "bd-tw-button button" data-social-network = "Google plus" href = "#">
<span class = "icon">
<i class = "fab fa-google-plus-square fa-2x"></i>
</span>
</a>
</p>
<p class = "control">
<a class = "bd-tw-button button" data-social-network = "Twitter" href = "#">
<span class = "icon">
<i class = "fab fa-twitter fa-2x"></i>
</span>
</a>
</p>
<p class = "control">
<a class = "button is-info" href = "https://www.tutorialspoint.com/java/java_tutorial.pdf">
<span class = "icon">
<i class = "fas fa-download"></i>
</span>
<span>Download</span>
</a>
</p>
</div>
</div>
</div>
</div>
</nav>
</div>
</section>
</body>
</html>
It displays the below output −
Navbar Colors
Bulma allows changing background color of navbar by using below modifiers −
is-primary
is-link
is-info
is-success
is-warning
is-danger
is-black
is-dark
is-light
Let's create a simple example by using any one of the above modifiers within the navbar class −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Navbar Color
</span>
<br>
<br>
<nav class = "navbar is-primary">
<div class = "navbar-brand">
<a class = "navbar-item" href = "#">TutorialsPoint</a>
<div class = "navbar-burger burger" data-target = "navbarExample">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id = "navbarExample" class = "navbar-menu">
<div class = "navbar-start">
<a class = "navbar-item" href = "https://bulma.io/">Home</a>
<div class = "navbar-item has-dropdown is-hoverable">
<a class = "navbar-link" href = "#">Programming Languages</a>
<div class = "navbar-dropdown is-boxed">
<a class = "navbar-item" href = "#">JavaScript</a>
<a class = "navbar-item" href = "#">PHP</a>
<a class = "navbar-item" href = "#">Java</a>
<hr class = "navbar-divider">
<a class = "navbar-item" href = "#">Separated link</a>
</div>
</div>
</div>
<div class = "navbar-end">
<div class = "navbar-item">
<div class = "field is-grouped">
<p class = "control">
<a class = "bd-tw-button button" data-social-network = "Google plus" href = "#">
<span class = "icon">
<i class = "fab fa-google-plus-square fa-2x"></i>
</span>
</a>
</p>
<p class = "control">
<a class = "bd-tw-button button" data-social-network = "Twitter" href = "#">
<span class = "icon">
<i class = "fab fa-twitter fa-2x"></i>
</span>
</a>
</p>
</div>
</div>
</div>
</div>
</nav>
</div>
</section>
</body>
</html>
It displays the below output −
In the above example, we have used is-primary modifier. If you want to make use of other modifiers, then replace this modifier with your modifier in the navbar class.
Dropup Navbar
Bulma allows displaying the dropup menu above the navbar by using has-dropdown and has-dropdown-up modifiers within the navbar-item as shown in the below example −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Dropup Navbar
</span>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<nav class = "navbar is-info" role = "navigation" aria-label = "dropdown navigation">
<div class = "navbar-brand">
<a class = "navbar-item" href = "#">TutorialsPoint</a>
<div class = "navbar-burger burger" data-target = "navbarExample">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id = "navbarExample" class = "navbar-menu">
<div class = "navbar-start">
<a class = "navbar-item" href = "https://bulma.io/">Home</a>
<div class = "navbar-item has-dropdown has-dropdown-up is-active">
<a class = "navbar-link" href = "#">Programming Languages</a>
<div class = "navbar-dropdown is-boxed">
<a class = "navbar-item" href = "#">JavaScript</a>
<a class = "navbar-item" href = "#">PHP</a>
<a class = "navbar-item" href = "#">Java</a>
<hr class = "navbar-divider">
<a class = "navbar-item" href = "#">Separated link</a>
</div>
</div>
</div>
</div>
</nav>
</div>
</section>
</body>
</html>
It displays the below output −
Right Dropdown
You can place the dropdown at right side by using the is-right modifier as shown in the below example −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Right Dropdown
</span>
<br>
<br>
<nav class = "navbar is-info" role = "navigation" aria-label = "dropdown navigation">
<div class = "navbar-brand">
<a class = "navbar-item" href = "#">TutorialsPoint</a>
<div class = "navbar-burger burger" data-target = "navbarExample">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id = "navbarExample" class = "navbar-menu">
<div class = "navbar-start">
<a class = "navbar-item" href = "https://bulma.io/">Home</a>
<div class = "navbar-item has-dropdown is-active">
<a class = "navbar-link" href = "#">Left Menu</a>
<div class = "navbar-dropdown is-boxed">
<a class = "navbar-item" href = "#">JavaScript</a>
<a class = "navbar-item" href = "#">PHP</a>
<a class = "navbar-item" href = "#">Java</a>
<hr class = "navbar-divider">
<a class = "navbar-item" href = "#">Separated link</a>
</div>
</div>
</div>
<div class = "navbar-end">
<div class = "navbar-item has-dropdown is-active">
<a class = "navbar-link" href = "#">Right Menu</a>
<div class = "navbar-dropdown is-right">
<a class = "navbar-item" href = "#">JavaScript</a>
<a class = "navbar-item" href = "#">PHP</a>
<a class = "navbar-item" href = "#">Java</a>
<hr class = "navbar-divider">
<a class = "navbar-item" href = "#">Separated link</a>
</div>
</div>
</div>
</div>
</nav>
</div>
</section>
</body>
</html>
It displays the below output −
bulma_components.htm
Advertisements