In this guide, we will discuss Navbar in Bulma.
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.
- navbar-item − It specifies single item of the navbar.
- navbar-brand − It includes <a> tag element, which contains some links or logo.
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 = "#">Adglob</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://adglob.in/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>
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 = "#">Adglob</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>
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 = "#">Adglob</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>
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 = "#">Adglob</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>
Next Topic : Click Here
Pingback: Bulma - Components | Adglob Infosystem Pvt Ltd
Pingback: Bulma - Modal | Adglob Infosystem Pvt Ltd
Pingback: miami boat rental prices
Pingback: wongkito4d