You are currently viewing 15+ Navbar Using HTML & CSS ( Source Code )

15+ Navbar Using HTML & CSS ( Source Code )

15+ Navbar Using HTML & CSS ( Source Code )

Hello there! In this article, you will find 15+ HTML CSS Navbar designs with complete source code so you just copy and paste it into your project.

Navigation bar or a side menu is a integral part of any website, used for quick navigation links, search bar, login/signup links, company logos, etc. without a navbar any website looks incomplete.

Here we’ll show you how to create Simple Navigation Bar with HTML / CSS.

Don’t worry we’ve got you covered. We have Handpicked best 15+ HTML CSS Navbar designs from the web for you to use in your project.

Let’s see some cool 15+ HTML CSS Navbar Footer designs.

1. Responsive Side Navigation Bar

Code by rajeshdn
Demo & download click here for code
Language used HTML,CSS,JS
External link / Dependencies Yes
Responsive Yes

Let’s start our list with a simple, light themed left sided navigation bar. Only navigation bar icons are visible on load but on clicking the hamburger icon side bar expands.

2. Bootstrap Navigation Bar

Code by Md. Rejaul Karim
Demo & download click here for code
Language used HTML,CSS
External link / Dependencies Yes
Responsive Yes

Simple and responsive navigation bar. This one is on top with several different categories and also a search bar. Additionally it also has login and signup button.

3. Transparent Navigation

Code by Manas Yadav
Demo & download click here for code
Language used HTML,CSS,JS
External link / Dependencies Yes
Responsive Yes

This is very well made Navigation bar by Manas Yadav, when you click a navigation bar button it auto scrolls to its location in the page. Can be used for homepages.

4. Sticky Slider Navigation (Responsive)

Code by Ettrics
Demo & download click here for code
Language used HTML,CSS(SCSS),JS
External link / Dependencies Yes
Responsive Yes

Another navigation bar which auto-scrolls but this one is even better with more satisfying animations and design.

5. Navigation bar design

Code by TomyBoy
Demo & download click here for code
Language used HTML,CSS,JS
External link / Dependencies No
Responsive No

A navigation bar with a gradient in its background with a cool gradient and blinking effect on hover.

Restaurant Website Using HTML And CSS With Source Code

6. Dot slider

Code by Derek Nguyen
Demo & download click here for code
Language used HTML(Pug),CSS(Less),JS
External link / Dependencies Yes
Responsive Yes

This a rather different navigation bar, with different pages/web-links buttons as dots with expands on click and take you to that web page with very smooth transition.

7. Navigation with SVG

Code by Julio Soto
Demo & download click here for code
Language used HTML,CSS,JS
External link / Dependencies Yes
Responsive No

A navy blue themed nav bar by Julio Soto with different effects on hover and click, on hover the only top border changes, but on click both top and bottom border changes.

8. Responsive Dropdown Navigation Bar

Code by Tania Rascia
Demo & download click here for code
Language used HTML,CSS,JS
External link / Dependencies Yes
Responsive Yes

A responsive minimal navigation bar with several different categories and a cool hamburger icon animation when viewed on smaller screens.

9. Scrollspy with animated scroll and focus

Code by Boomer
Demo & download click here for code
Language used HTML,CSS(Sass),JS
External link / Dependencies Yes
Responsive Yes

Another one! one more navigation bar with auto-scroll functionality. This is a must for homepages.

10. One Page Navigation CSS Menu

Code by Hrtzt
Demo & download click here for code
Language used HTML,CSS,JS
External link / Dependencies Yes
Responsive No

Left sided navigation menu with icons only and a fabulous transition effect on page change! you have to at least try this one.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

11. E- Commerce Navigation Bar

Code by Olivia Ng
Demo & download click here for code
Language used HTML(Pug),CSS(SCSS)
External link / Dependencies Yes
Responsive No

Are you making a E-Commerce website? Well you are in luck today. This is a excellent navigation bar for e-commerce sites with sort of dark and minimal theme.

12. Light/Dark Mode toggle Navigation Bar

Code by Sasha
Demo & download click here for code
Language used HTML,CSS(SCSS),JS
External link / Dependencies Yes
Responsive No

A Navigation bar this a toggle for dark and light mode(wow). And bottom border effect on hovering on links.

13. Navigation bar concept

Code by Ramnek Singh
Demo & download click here for code
Language used HTML,CSS,JS
External link / Dependencies Yes
Responsive No

A very unique navigation design by Ramnek Singh, with three different icons all with different functionality, one is search bar, another is a drop down menu, and the last one pops up 4 more icons.

14. Responsive Navbar Using CSS Grid/Flexbox

Code by Reggie Bowers
Demo & download click here for code
Language used HTML,CSS,JS
External link / Dependencies Yes
Responsive Yes

Just a simple and responsive navigation bar by Reggie Bowers, also with a great website structure. Could be very useful if you are just staring for project.

15. Pure CSS Accordion Nav

Code by Floyd Hawkes
Demo & download click here for code
Language used HTML(Pug),CSS(SCSS)
External link / Dependencies Yes
Responsive No

Left sided navigation bar with different sections which expands and open a drop down menu on click.

50+ Html ,Css & Javascript Projects With Source Code

16. Navigation Bar by Jan Kaděra

Code by Katy DeCorah
Demo & download click here for code
Language used HTML(Haml),CSS(SCSS)
External link / Dependencies Yes
Responsive No

Let’s end this list with a banger by Katy DeCorah, Navigation bar with 3D icons which rises up on hovering.

That’s it folks. In this article, we shared 15+HTML CSS Navbar with cool and different designs. We covered everything from simple and minimal Navigation bars to bars with auto scrolls, cool transitions and even 3D icons. Hope you liked this article. Share this with your fellow developers. Comment down below your thoughts and suggestions

See our other articles on codewithrandom and gain knowledge in Front-End Development.

Thank you

Leave a Reply