Bulma is an Open source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive, minimizing the use of media queries for responsive behavior.
Navbar is a horizontal navigation bar that has navbar items, buttons, dropdown menu, etc.
Bulma Navbar structure classes:
- navbar: It is the main component.
- navbar-brand: We can place the logo using this class.
- navbar-burger: It is also called the hamburger icon in the left corner of the navbar.
- navbar-menu: The right part of the screen is visible only in desktop mode.
- navbar-item: Items in the navigation bar are shown using this class.
- navbar-link: This class is used to set the links to other routes.
- navbar-dropdown: This class is used to set the dropdown menu.
- navbar-divider: This class is used to set the horizontal line that can separate the navbar items from each other.
Syntax:
<nav class="navbar">
<div class="...">
...
</div>
</nav>Example 1: Suppose we want to create a navbar that has a logo in the left part and has some items, a dropdown menu then we can create using the above classes. The following code demonstrates a basic navigation bar using the navbar components classes.
<!DOCTYPE html> <html>
<head>
<title>Bulma Navbar Basic</title>
<link rel='stylesheet' href=
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">GeeksforGeeks</h1>
<b class="is-size-4">Bulma Basic Navbar</b>
<nav class="navbar"
role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" <img src=
width="112" height="38">
</a>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Menu1
</a>
<a class="navbar-item">
Menu2
</a>
<a class="navbar-item">
Menu3
</a>
<a class="navbar-item">
Menu4
</a>
<a class="navbar-item">
Menu5
</a>
<a class="navbar-item">
Menu6
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Dropdown
</a>
</div>
</div>
</div>
</nav>
</body>
</html>
|
Output:
Bulma Basic Navbar
Example 2: The following code demonstrates the navigation bar as shown in the above code along with the navbar-end class.
<!DOCTYPE html> <html>
<head>
<title>Bulma Navbar Basic</title>
<link rel='stylesheet' href=
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">GeeksforGeeks</h1>
<b class="is-size-4">Bulma Basic Navbar</b>
<nav class="navbar"
role="navigation"
aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" <img src=
width="112"
height="38">
</a>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Menu1
</a>
<a class="navbar-item">
Menu2
</a>
<a class="navbar-item">
Menu3
</a>
<a class="navbar-item">
Menu4
</a>
<a class="navbar-item">
Menu5
</a>
<a class="navbar-item">
Menu6
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Dropdown
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
Profile
</a>
<a class="navbar-item">
Messages
</a>
<a class="navbar-item">
Contact infpo
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div>
<a class="button is-family-secondary">
<strong>Login</strong>
</a>
<a class="button is-primary">
<strong>Sign up</strong>
</a>
</div>
</div>
</div>
</div>
</nav>
</body>
</html>
|
Output:
Bulma Basic Navbar
Reference: https://bulma.io/documentation/components/navbar/#basic-navbar