<section>
<nav class="navbar py-5">
<div class="container px-8-mobile">
<div class="navbar-brand">
<a class="navbar-item pl-3-desktop" href="#">
<span class="navbar-item px-0 title is-5 has-text-dark">
<img src="zeus-assets/logo/logo-zeus-red.svg" alt="" style="height: 28px;" width="auto">
</span>
</a>
<a class="navbar-menu-open navbar-burger" role="button" type="button" data-toggle="side-menu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu">
<div class="navbar-end">
<ul class="navbar-item">
<li><a class="navbar-item" href="#">About</a></li>
<li><a class="navbar-item" href="#">Company</a></li>
<li><a class="navbar-item" href="#">Services</a></li>
<li><a class="navbar-item" href="#">Testimonials</a></li>
</ul>
<div class="navbar-item is-hidden-mobile pr-3-desktop"><a class="button is-primary" href="#">Contact Us</a></div>
</div>
</div>
</div>
</nav>
<div class="is-hidden navbar-side is-fixed is-top-0 is-bottom-0 is-left-0 has-mw-md" style="width: 75%; z-index: 9999;">
<div class="navbar-backdrop is-fixed is-inset-0 has-background-dark" style="opacity: 75%; z-index: 50;"></div>
<aside class="menu is-relative is-flex is-flex-direction-column py-6 px-6 has-background-white" style="width: 100%; height: 100%; z-index: 50; overflow-y: auto;">
<div class="is-flex is-align-items-center mb-10">
<a class="mr-auto mb-0" href="#">
<span class="navbar-item px-0 title is-5 has-text-dark">
<img src="zeus-assets/logo/logo-zeus-red.svg" alt="" style="height: 28px;" width="auto">
</span>
</a>
<button class="navbar-close button is-text p-0 mb-2" type="button" aria-label="Close">
<svg style="width: 18px; height: 18px;" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<ul class="menu-list is-size-7">
<li class="mb-2"><a href="#">About</a></li>
<li class="mb-2"><a href="#">Company</a></li>
<li class="mb-2"><a href="#">Services</a></li>
<li class="mb-2"><a href="#">Testimonials</a></li>
</ul>
<div class="mt-auto">
<div class="py-6"><a class="button is-primary is-fullwidth" href="#">Contact Us</a></div>
<p class="mb-4 has-text-centered has-text-grey-dark">
<span>© 2021 All rights reserved.</span>
</p>
</div>
</aside>
</div>
</section>Framework
Bulma
UI Library
All Libraries
Components
- Alert 80
- Application 60
- Banners 10
- Blog 63
- Call to action 99
- Contact 36
- Content 60
- Cookies 44
- E-commerce (orders) 14
- E-commerce (products) 20
- FAQ 41
- Features 135
- Footers 54
- Graphs 9
- HTTP codes 42
- Hero section 78
- How it works 43
- Logo clouds 85
- Modals 7
- Navbar 28
- Navigation (horizontal) 107
- Navigation (vertical) 2
- Newsletter 40
- Portfolio 46
- Pricing 38
- Reviews 5
- Sign in / Sign up 69
- Stats 44
- Tables 26
- Team 38
- Testimonials 47
- Users 17
A well-designed navigation component determines how easily users navigate your site. This will affect both the conversion of the page and its position in SEO.
Browse the Bulma navigation component variants available in our editor. Under each of them is clear code that you can easily edit. Components are sorted by UI libraries, which consist of many other elements in the same style. Each of these libraries was created by our talented designers to allow you to create diverse and pretty pages.
See all variations of Bulma navigation components and the code underneath them in Shuffle Editor.
