Pure CSS Navigation Bars
CSS navigation bars are headers, tabs, breadcrumbs and responsive nav layouts styled with HTML and CSS, with active states and hover effects included.
12 free examples, most liked first. Click one to preview it and copy the code.
Sliding Pill Navigation Indicator
by @admin · Menu
Radio Button Tabs
by @admin · Navigation
Expanding Search Bar
by @admin · Navigation
Order Status Stepper
by @admin · Navigation
Radio Pagination Numbers
by @admin · Navigation
Bottom Tab Bar
by @admin · Menu
Breadcrumb Arrow Trail
by @admin · Navigation
Scroll-Linked Shrinking Header
by @admin · Navigation
Sliding Underline Navigation
by @admin · Menu
Vertical Radio Tabs
by @admin · Navigation
Pagination Prev Next
by @admin · Navigation
Step Wizard Dots
by @admin · Navigation
Learn how it works
Read the step-by-step guide: How to Build a Dropdown Menu with Pure CSS (No JavaScript)
Navigation Bars FAQ
How do I build a responsive navbar with CSS?
Use flexbox for the layout and a media query to stack or collapse the links on small screens. The examples here show complete, copy-ready navbars.
How do I use these pure CSS navigation bars?
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.