Nav Bar Generator
Build a navigation bar from five templates: simple, centred, split with CTA, floating glass and vertical sidebar. Edit links, colours, hover and active states.
Bar Style
Link Hover Effect
<nav class="navbar navbar--sticky">
<a class="nav-brand" href="#">Brand</a>
<ul class="nav-links">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">About</a></li>
</ul>
<a class="nav-cta" href="#">Sign up</a>
</nav>About the nav bar generator
The navigation bar is the first component most projects need and the one most often rebuilt from scratch. This generator starts you from five layouts that cover the common cases, including a vertical sidebar, then lets you edit every part of it.
Link hover and active states are handled properly rather than left as an afterthought, since those are what make navigation feel responsive.
How to use it
- 1Pick a template. Side/Vertical switches to a sidebar layout with its own width control.
- 2Edit the brand name and the links. Click the dot beside a link to mark it as the active page.
- 3Choose the bar style: solid, glass or gradient.
- 4Pick a link hover effect: underline, highlight, fade or colour.
- 5Adjust height or width, radius, link gap and font size.
- 6Copy the HTML and the CSS.
Worth knowing
- The exported CSS hides the link list under 640 pixels. Add a burger toggle for mobile.
- Glass style needs content behind it to blur, so it works best over a hero image.
Questions
How do I make the navbar stick to the top?
Turn on the Sticky toggle. It exports position: sticky with top: 0 and a z-index, which keeps the bar visible as the page scrolls.
What about the mobile menu?
The exported CSS hides the links below 640 pixels so the layout does not break. The burger button and its toggle logic are yours to add, since that part needs JavaScript.
How do I mark the current page?
Add class="active" to the current link. The exported CSS already styles it with the accent colour and a heavier weight.