Navigation Bar In HTML And CSS Source Code

100+ Navigation Bar HTML and CSS (Free Demo +Source Code)

Are you looking for the best HTML CSS Navigation Bar for your project?

Today we’ll see how to make a Navigation Bar with HTML and CSS. Here is the Latest Collection of free Navigation Bar codes in HTML and CSS. 

Here are examples of different types of Navigation Bars like Top Navigation Bar, Full-page Navigation Menu, Animated Menu, Fixed Top Navigation Bar etc.

Navigation Bar Using HTML and CSS

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

Do you know I have already shared many step by step tutorials to create Navigation Bar in Html.

Here we’ll show you how to create a Simple Navigation Bar In HTML and CSS with 100+ examples.

Simple CSS Navigation Bar

Let’s see some cool  Navigation bars in HTML and CSS.

1. Responsive Side Navigation Bar

Code byrajeshdn
Demo & downloadclick here for code
Language usedHTML,CSS,JS
External link / DependenciesYes
ResponsiveYes

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 byMd. Rejaul Karim
Demo & downloadclick here for code
Language usedHTML,CSS
External link / DependenciesYes
ResponsiveYes

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

How To Build Interest Calculator Using JavaScript

ADVERTISEMENT

3. HTML CSS Transparent Navigation

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

Code byManas Yadav
Demo & downloadclick here for code
Language usedHTML,CSS,JS
External link / DependenciesYes
ResponsiveYes

ADVERTISEMENT

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

4. Sticky Slider Navigation (Responsive)

Code byEttrics
Demo & downloadclick here for code
Language usedHTML,CSS(SCSS),JS
External link / DependenciesYes
ResponsiveYes

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

5. Navigation bar design

Code byTomyBoy
Demo & downloadclick here for code
Language usedHTML,CSS,JS
External link / DependenciesNo
ResponsiveNo

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

6. Dot slider

Code byDerek Nguyen
Demo & downloadclick here for code
Language usedHTML(Pug),CSS(Less),JS
External link / DependenciesYes
ResponsiveYes

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 byJulio Soto
Demo & downloadclick here for code
Language usedHTML,CSS,JS
External link / DependenciesYes
ResponsiveNo

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 byTania Rascia
Demo & downloadclick here for code
Language usedHTML,CSS,JS
External link / DependenciesYes
ResponsiveYes

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

Full Page Image Slider Using Html, Css, and JavaScript

9. Scrollspy with animated scroll and focus

Code byBoomer
Demo & downloadclick here for code
Language usedHTML,CSS(Sass),JS
External link / DependenciesYes
ResponsiveYes

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

10. One Page Navigation CSS Menu

Code byHrtzt
Demo & downloadclick here for code
Language usedHTML,CSS,JS
External link / DependenciesYes
ResponsiveNo

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 byOlivia Ng
Demo & downloadclick here for code
Language usedHTML(Pug),CSS(SCSS)
External link / DependenciesYes
ResponsiveNo

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

12. Light/Dark Mode toggle Navigation Bar

Code bySasha
Demo & downloadclick here for code
Language usedHTML,CSS(SCSS),JS
External link / DependenciesYes
ResponsiveNo

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 byRamnek Singh
Demo & downloadclick here for code
Language usedHTML,CSS,JS
External link / DependenciesYes
ResponsiveNo

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.

Responsive Navigation Menu HTML CSS

Navigation Bar must be responsive. So here I have given some Responsive Navigation Menu HTML CSS examples.

Responsive Navbar Using CSS Grid/Flexbox

Code byReggie Bowers
Demo & downloadclick here for code
Language usedHTML,CSS,JS
External link / DependenciesYes
ResponsiveYes

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 byFloyd Hawkes
Demo & downloadclick here for code
Language usedHTML(Pug),CSS(SCSS)
External link / DependenciesYes
ResponsiveNo

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

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

16. Navigation Bar by Jan Kaděra

Code byKaty DeCorah
Demo & downloadclick here for code
Language usedHTML(Haml),CSS(SCSS)
External link / DependenciesYes
ResponsiveNo

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

17. menu

This is really good looking hamburger menu which is really good for mobile

Code byArefeh hatami
Demo & downloadclick here for code
Language usedHTML,CSS
External link / DependenciesNo
ResponsiveYes

 

18. Hamburger Menu 2

This is a hamburger which on clicking goes to full screen and looks good on smaller devices

Code byYuhomyan
Demo & downloadclick here for code
Language usedHTML,CSS
External link / DependenciesYes
ResponsiveYes

 

19. Three Fancy Link Hover Effects

These are some animated links examples that look very complicated to create but really are easy

Code byJames Hancock
Demo & downloadclick here for code
Language usedHTML,CSS
External link / DependenciesYes
ResponsiveYes

 

20. Navigation Dotted Hover Effect

This one is the also good for your website or blog you can see it has an amazing dot hover effect which makes it look more attractive

Code bywhisnuys
Demo & downloadclick here for code
Language usedHTML,CSS
External link / DependenciesNo
ResponsiveYes

 

21. Navigation Dotted Hover Effect

This is the one which is called navi bar, when you click on hamburger it will be activated to full screen and making the links visible

Code byYuhomyan
Demo & downloadclick here for code
Language usedHTML,CSS
External link / DependenciesYes
ResponsiveYes

 

Pure CSS Menu

This one is made with pure css and this has an amazing animations thought the page and each element and link is created really beautifully

Code byIvan Grozdic
Demo & downloadclick here for code
Language usedHTML,CSS
External link / DependenciesYes
ResponsiveYes

 

Simple Navigation Bar Using HTML and CSS

Now here I have given some examples of Simple Navigation Bar Using HTML and CSS. These are made with very simple and minimal requirements.

Simple Navigation System

If you are a beginner and wants to create your first navbar then this project is for you only

Code byChris Smith
Demo & downloadclick here for code
Language usedHTML,CSS(SCSS)
External link / DependenciesNo
ResponsiveYes

 

24. Menu CSS

This one right above can be used in your website for phone which will make it look really good and attractive

Code byBrawadaCom
Demo & downloadclick here for code
Language usedHTML(Slim),CSS(SASS)
External link / DependenciesYes
ResponsiveYes

 

25. Fullscreen Menu Enter

This is the one which is also very suitable for smaller screen like mobile, it also has images in the nav

Code byalphardex
Demo & downloadclick here for code
Language usedHTML,CSS(SCSS)
External link / DependenciesYes
ResponsiveYes

 

CSS Hamburger Menu

When you click on the hamburger then a full screen hamburger menu will appear

Code byAdir
Demo & downloadclick here for code
Language usedHTML,CSS
External link / DependenciesNo
ResponsiveYes

 

27. Text fill on hover #1

This is the very classic and good looking design of a navbar with just Html, CSS.

Code byG Rohit
Demo & downloadclick here for code
Language usedHTML,CSS(SCSS)
External link / DependenciesYes
ResponsiveNo

 

28. List Item Hower Effect

When you will hover these then you will be going to see a amazing hover effect that will please you eyes

Code byAbhinav Kumar
Demo & downloadclick here for code
Language usedHTML,CSS
External link / DependenciesNo
ResponsiveNo

 

29. Full-Page Navigation

when you will click this navbar then you will see a ful page navbar

Code byRyan Mulligan
Demo & downloadclick here for code
Language usedHTML, CSS(SCSS)
External link / DependenciesNo
ResponsiveNo

 

30. Full-page navigation

On clicking the “Click Me” text you will see a full page navigation bar

Code byCassandra Rossall
Demo & downloadclick here for code
Language usedHTML,CSS
External link / DependenciesNo
ResponsiveNo

 

31. Randomly generated CSS blobby nav

When you will click the hamburger above some balls will pop up, that will be navigation only

Code byJhey
Demo & downloadclick here for code
Language usedHTML(Pug),CSS(SCSS),JS(babel)
External link / DependenciesNo
ResponsiveNo

32. Pure CSS CPC full page nav

This is amazing, when you click the ham burger amazing looking screen will pop up

Code byAlex Hart
Demo & downloadclick here for code
Language usedHTML,CSS
External link / DependenciesNo
ResponsiveNo

 

33. CSS only fold out mobile menu

This is coolest hamburger it will pop out of no where you will click the hamburger

Code byCyd Stumpel
Demo & downloadclick here for code
Language usedHTML, CSS(SCSS)
External link / DependenciesNo
ResponsiveYes

 

34. CSS only fold out mobile menu

Amazing looking menu which will fill text when hovered with mouse

Code byMenu Hover Fill Text
Demo & downloadclick here for code
Language usedHTML, CSS(SCSS)
External link / DependenciesNo
ResponsiveNo

 

35. menu with awesome hover

This navbar really has an amazing looking hover effect, which makes you website look more attractive

Code bySwarup Kumar Kuila
Demo & downloadclick here for code
Language usedHTML, CSS
External link / DependenciesYes
ResponsiveYes

36. CSS Navigation Bar

Amazing looking icons that changes into a new mode when hovered. Text appears when hovered with mouse

Code byJasmine G
Demo & downloadclick here for code
Language usedHTML, CSS
External link / DependenciesYes
ResponsiveNo

 

37. Menu Hover Underline

Amazing underline that goes under the links when hovered with mouse on them

Code byalphardex
Demo & downloadclick here for code
Language usedHTML, CSS(SCSS)
External link / DependenciesNo
ResponsiveYes

 

38. Apple TV Menu Interface (Chrome, Edge, Safari)

This is really cool and looks like apple tv menu interface, hover effect is also very cool

Code byKyle Lavery
Demo & downloadclick here for code
Language usedHTML(Pug), CSS(SCSS)
External link / DependenciesYes
ResponsiveNo

 

39. Navbar with pure css

This really has a drop down menu which is poped out after hovering the menu link

Code byKyle Lavery
Demo & downloadclick here for code
Language usedHTML(Pug), CSS(SCSS)
External link / DependenciesNo
ResponsiveNo

 

40. Navbar Interaction

This is really good navbar interaction, this has a elements that runs below the links when hovered

Code byHimalaya Singh
Demo & downloadclick here for code
Language usedHTML, CSS
External link / DependenciesNo
ResponsiveYes

41. Off Canvas Menu (CSS)

This is the nav bar that will pop out from the side of the website when clicked on the hamburger

Code byAmli
Demo & downloadclick here for code
Language usedHTML(Pug), CSS(SCSS)
External link / DependenciesYes
ResponsiveNo

 

42. Barra de navegación con css – Menú bar

Amazing looking expandable css navigation which is really easy to use

Code byDave Mendoza
Demo & downloadclick here for code
Language usedHTML, CSS
External link / DependenciesNo
ResponsiveYes

43. Moving Underline Nav Menu

There are total 4 navbars that you can take inspiration from, and they have a moving underline below them

Code byBennett Feely
Demo & downloadclick here for code
Language usedHTML, CSS, JS
External link / DependenciesNo
ResponsiveYes

44. Fun Hover Navigation

This is the fun hover nagivation which really looks cool and is sharp for eyes

Code byScott Kennedy
Demo & downloadclick here for code
Language usedHTML, CSS
External link / DependenciesNo
ResponsiveNo

45. Futuristic 3D Hover Effect 🛸

This is a futuristic navigation that really look futuristic that you will be shocked 

Code byJouan Marcel
Demo & downloadclick here for code
Language usedHTML, CSS(SCSS), JS
External link / DependenciesNo
ResponsiveNo

46. Fun Hover Navigation

This is a 3D looking board that will work as a navigation bar, great idea and very good looking

Code byJouan Marcel
Demo & downloadclick here for code
Language usedHTML, CSS
External link / DependenciesNo
ResponsiveYes

 

47. Just Another Menu(Pure CSS)

This is a mobile navbar that can be used at the bottom of the website it looks very good for a mobile website

Code byAkhil Sai Ram
Demo & downloadclick here for code
Language usedHTML, CSS
External link / DependenciesYes
ResponsiveNo

48. Pure CSS Menu Drawer w/ off-click 🍔 #CodePenChallenge

This is the pure css meny drawer which really opens like a drawer when clicked on the hamburger

Code byJhey
Demo & downloadclick here for code
Language usedHTML, CSS(Stylus)
External link / DependenciesNo
ResponsiveYes

 

49. 💪 CSS menu feat. emoji

This is the new CSS menu which has emoji as icons, thats a new idea and you can also try this out

Code byPiotr Galor
Demo & downloadclick here for code
Language usedHTML, CSS
External link / DependenciesNo
ResponsiveYes

 

50. The Menu

This right over here looks like an index page of a notebook or a book which really looks cool on website

Code byycw
Demo & downloadclick here for code
Language usedHTML, CSS
External link / DependenciesNo
ResponsiveYes

 

51. bootstrap dropdown hover menu

This is really cool boorstrap dropdown menu, which is responsive and has a dropdown menu too

Code bybetul
Demo & downloadclick here for code
Language usedHTML, CSS, Js
External link / DependenciesNo
ResponsiveYes

 

52. A Pen By Celine

This is amazing, a completely responsive nav bar that also has a hamburger when its in mobile

Code byCeline
Demo & downloadclick here for code
Language usedHTML, CSS, Js
External link / DependenciesNo
ResponsiveYes

 

53. bootstrap 4 navbar

This is also a responsive bar which will convert into a hamburger when run in a mobile also has an cool animation effects

Code byPiyush
Demo & downloadclick here for code
Language usedHTML, CSS, Js
External link / DependenciesYes
ResponsiveYes

 

54. Responsive Dropdown Navigation Bar

This is a responsive dropdown navigation bar which has dropdown menu and its responsive also

Code byTania Rascia
Demo & downloadclick here for code
Language usedHTML, CSS, Js
External link / DependenciesYes
ResponsiveYes

 

55. Centered Navbar Items – Bootstrap 3

Amazing looking bootstrap centered navbar items that really will look good on any website, this is also a great project for beginners

Code byDavid Cochran
Demo & downloadclick here for code
Language usedHTML, CSS(less)
External link / DependenciesNo
ResponsiveYes

 

56. Transparent to Solid navbar

Transparent navbar which is turned into solid on hovering with mouse, making it more visible and clear

Code byErin Manahan
Demo & downloadclick here for code
Language usedHTML, CSS(SCSS), JS
External link / DependenciesNo
ResponsiveYes

 

57. Pure CSS Responsive Navbar

Pure Css responsive navbar which really is responsive and great to look at this is created by Jones

Code byJones Josephr
Demo & downloadclick here for code
Language usedHTML, CSS
External link / DependenciesYes
ResponsiveYes

 

58. Responsive Bootstrap 4 menu – light/dark

Awesome looking responsive bootstrap navbar which really looks really cool and awesome

Code byIvan Grozdic
Demo & downloadclick here for code
Language usedHTML, CSS, JS
External link / DependenciesYes
ResponsiveYes

 

59. Navigation Bar by Jan Kaděra

Amazing looking 3d type navigation bar by jan kadera for your website or blog, this really looks good

Code byKaty DeCorah
Demo & downloadclick here for code
Language usedHTML(Haml), CSS(SCSS), JS
External link / DependenciesNo
ResponsiveNo

60. Navigation Bar by Jan Kaděra

This is slicky slider navigation bar at the bottom of the website, which lot of people are trying these days

Code byEttrics
Demo & downloadclick here for code
Language usedHTML, CSS(SCSS), JS
External link / DependenciesNo
ResponsiveYes

 

61. Computer store landing page

This is amazing computer store with amazing navigation bar, which is responsive with the help of hamburger

Code byThierry Mugisha
Demo & downloadclick here for code
Language usedHTML, CSS, JS
External link / DependenciesYes
ResponsiveYes

62. Scrollspy with animated scroll and focus

This is a website but the navbar in this is great, it is responsive and very good looking at the center

Code byBoomer
Demo & downloadclick here for code
Language usedHTML, CSS(Sass), JS
External link / DependenciesYes
ResponsiveYes

 

63. sticky navbar

This is a sticky navbar which is sticked to the of the page and when you scroll down or up it doesn’t move at all

Code byNick L. Olsen
Demo & downloadclick here for code
Language usedHTML, CSS(Scss), JS
External link / DependenciesNo
ResponsiveNo

 

64. Bootstrap 4 Mega Dropdown Menu Navbar

This is an amazing nega dropdown meny navigation bar which is really impressive to look at

Code byJacob Lett
Demo & downloadclick here for code
Language usedHTML, CSS, JS
External link / DependenciesYes
ResponsiveYes

 

65. STRIPE LIKE CSS ONLY MENU

This is the mega menu navigation which really has a big dropdown menu, its gradient background is making it more beautiful

Code bysmpnjn
Demo & downloadclick here for code
Language usedHTML, CSS
External link / DependenciesYes
ResponsiveNo

 

66. Dropdown Menu

This is a new drop down menu which is really unique in its own way, it has a lot of color 

Code byLauren
Demo & downloadclick here for code
Language usedHTML, CSS(Less)
External link / DependenciesNo
ResponsiveYes

67. Circular navigation popout

When clicked on that plus icon the nagivation bar in a circular will pop out and this even take less space

Code byNiels Van Limberghen
Demo & downloadclick here for code
Language usedHTML, CSS(Scss), JS
External link / DependenciesNo
ResponsiveYes

 

68. Radial menu

This is another radial/circular menu and navbar which also pop out when click on the hamburger

Code byCarlos
Demo & downloadclick here for code
Language usedHTML, CSS(Scss), JS
External link / DependenciesYes
ResponsiveYes

69. Flat Horizontal Navigation

This is another navigation which has a dropdown feature making it look good and taking less space in the website

Code byAndy Tran
Demo & downloadclick here for code
Language usedHTML(haml), CSS(Less), JS
External link / DependenciesYes
ResponsiveNo

 

70. Material design navigation

This navigation bar is pop out on click with mouse over the hamburger icon, this is even responsive

Code byLewi Hussey
Demo & downloadclick here for code
Language usedHTML, CSS(Less), JS
External link / DependenciesNo
ResponsiveYes

 

71. Flat Vertical Navigation 2.0

Another amazing looking vertical navigation which also has a dropdown menu

Code byAndy Tran
Demo & downloadclick here for code
Language usedHTML(haml), CSS(Less), JS
External link / DependenciesNo
ResponsiveYes

72. Offcanvas sidebar menu with a twist

Good looking with animation sidebar menu which is activated when click on the hamburger icon on the top left

Code byDevilish Alchemist
Demo & downloadclick here for code
Language usedHTML, CSS(Scss), JS
External link / DependenciesNo
ResponsiveYes

 

73. Menu 1

New good looking vertical menu which is really responsive and very stylish for your website

Code byVirgil Pana
Demo & downloadclick here for code
Language usedHTML, CSS, JS
External link / DependenciesYes
ResponsiveYes

 

74. Full-Screen Menu Overlay

This is also a full screen menu overlay, which takes up the whole viewpoint when clicked on the hamburger

Code byEttrics
Demo & downloadclick here for code
Language usedHTML, CSS(Scss), JS
External link / DependenciesYes
ResponsiveNo

 

75. Fullscreen Menu Flexbox Method

This also is an amazing looking fullscreen menu with flexbox method and style suitable for your website

Code byMarcus Hall
Demo & downloadclick here for code
Language usedHTML(slim), CSS(Scss), JS
External link / DependenciesYes
ResponsiveYes

 

76. Dropdown Menu Animation

Drop down menu with amazing animation that you have only seen here, do check this out

Code byDany Santos
Demo & downloadclick here for code
Language usedHTML, CSS, JS
External link / DependenciesYes
ResponsiveYes

 

77. Fullscreen Menu Flexbox Method

Amazing mobile navigation animation which is perfect for mobile webapps, a must recommended

Code byKarlo Videk
Demo & downloadclick here for code
Language usedHTML, CSS(Scss), JS
External link / DependenciesNo
ResponsiveYes

 

78. Reverse text color menu effects

New amazing looking nav bar which has cool animations that looks really cool when is being hovered

Code byComehope
Demo & downloadclick here for code
Language usedHTML, CSS,
External link / DependenciesNo
ResponsiveNo

 

79. Pure CSS Accordion Nav

Amazing looking Pure CSS accordion navbar which is placed at the side of the website looking really good and has dropdown

Code byFloyd Hawkes
Demo & downloadclick here for code
Language usedHTML(pug), CSS(scss)
External link / DependenciesNo
ResponsiveYes

80. Transparent Fading Navigation Bar

Amazing looking transparent fading navigation bar which is fading from the corners and has a hover effect too

Code byMrPirrera
Demo & downloadclick here for code
Language usedHTML, CSS, JS
External link / DependenciesNo
ResponsiveYes

 

81. Scroll To Top Then Fixed Navigation Effect With jQuery and CSS

This will first take make you go up and then from there, there will be no movement of navbar it will be fixed

Code byBram de Haan
Demo & downloadclick here for code
Language usedHTML, CSS, JS
External link / DependenciesNo
ResponsiveYes

 

82. Bootstrap Navbar with Logo Centered Above

This is also a amazing looking bootstrap navbar with a logo centered and has a hamburger in mobile view

Code byDavid Cochran
Demo & downloadclick here for code
Language usedHTML, CSS(less)
External link / DependenciesYes
ResponsiveYes

 

83. Awesome Bootstrap 3 Sidebar Navigation

Awesome looking Bootstrap 3 sidebar navigation bar which pops out when clicked on hamburger

Code byJay Holtslander
Demo & downloadclick here for code
Language usedHTML, CSS(less), JS
External link / DependenciesYes
ResponsiveYes

 

84. Bulma.io Full Width Menu ( Navbar)

This is a full-width menu/ navigation bar that is responsive and good-looking

Code byAslam
Demo & downloadclick here for code
Language usedHTML, CSS(Scss), JS
External link / DependenciesYes
ResponsiveYes

 

85. Sass mixin library for text hover

Amazing looking nav bar with a hamburger on the side for side navigation, two navigations in one website, look super good

Code byAntonija Šimić
Demo & downloadclick here for code
Language usedHTML, CSS, JS
External link / DependenciesYes
ResponsiveNo

 

86. Vertical icon navigation with slide-out menu

Vertical side menu layout that looks good and has a hamburger, on clicking that hamburger more links pop out

Code bynikhil
Demo & downloadclick here for code
Language usedHTML, CSS, JS
External link / DependenciesNo
ResponsiveYes

 

87. Add Event Dialog and Menubar Mockup

Amazing a looking nav bar on top of the page and has an add event dialog, which lets you add a dialog 

Code byMark Ayers
Demo & downloadclick here for code
Language usedHTML, CSS, JS
External link / DependenciesNo
ResponsiveNo

87. Animated scroll-dependant menu using scrollMonitor

Good looking animated scroll-dependant menu using scrollMonitor, which is good for any website

Code byCreative Punch
Demo & downloadclick here for code
Language usedHTML, CSS, JS
External link / DependenciesYes
ResponsiveNo

 

88. CSS Horizontal Menu Bar with Icons

This is another good-looking but very simple css horizontal menu for beginners, this can be a good project for beginners too

Code byGraham Clark
Demo & downloadclick here for code
Language usedHTML, CSS
External link / DependenciesNo
ResponsiveNo

 

89. Responsive Multilevel Menu

Good looking responsive multilevel menu which is responsive + dropdown, making it take less space

Code byDavidson
Demo & downloadclick here for code
Language usedHTML, CSS(Scss), Js
External link / DependenciesYes
ResponsiveYes

 

90. CSS only responsive multi-level mega menu

This is just made by CSS, and this is a dropdown multilevel menu which is useful and less space-consuming

Code byVictoria K
Demo & downloadclick here for code
Language usedHTML, CSS(Less)
External link / DependenciesYes
ResponsiveYes

 

91. Mobile first – hide on scroll menu

This is mobile-first – hide on the scroll menu, which is really good-looking and user-friendly menu, it disappears when we scroll down

Code byACB
Demo & downloadclick here for code
Language usedHTML, CSS(Less), JS
External link / DependenciesYes
ResponsiveYes

 

92. OS X

It has OS X theme and has a good-looking nav bar on the above of the page, It looks good and has a pretty much functionality to it

Code byJack Harner
Demo & downloadclick here for code
Language usedHTML, CSS(Scss), JS
External link / DependenciesYes
ResponsiveNo

 

93.Mobile Hamburger menu

Another mobile menu which has a dropdown functionality to it, which makes it consume less space

Code byMichael Whyte
Demo & downloadclick here for code
Language usedHTML, CSS, JS
External link / DependenciesNo
ResponsiveYes

 

94. Hamburger Icon Turns Into Loading Icon

New good looking screen menu is activated after clicking on the hamburger, the hamburger has an amazing animation too

Code byRamsay Lanier
Demo & downloadclick here for code
Language usedHTML, CSS(SCSS), JS
External link / DependenciesYes
ResponsiveYes

 

95. Sticky Slide Out Navigation Menu

This is another good-looking and simple navigation which is at the side of the page, it is activated when clicking on the hamburger

Code byJulie Park
Demo & downloadclick here for code
Language usedHTML, CSS(SCSS), JS
External link / DependenciesYes
ResponsiveNo

 

96. Three Bar Menu Button

Another simple but visually attractive menu bar/ navbar which slides out when clicked on the hamburger icon

Code byDevon Noel de Tilly
Demo & downloadclick here for code
Language usedHTML, CSS, JS
External link / DependenciesYes
ResponsiveYes

 

97. Three Bar Menu Button

Good looking gooey navigation bar which is good looking and consumes less space on your website

Code bySamritha S
Demo & downloadclick here for code
Language usedHTML, CSS, JS
External link / DependenciesNo
ResponsiveYes

 

98. Responsive Menu Bar

Another good-looking responsive menu bar has a hamburger when watching in on a mobile screen

Code byMitsu García
Demo & downloadclick here for code
Language usedHTML, CSS, JS
External link / DependenciesNo
ResponsiveYes

 

99. Jquery Left Menu

It has a dropdown menu which consumes less space on your website, it’s good looking in an orange theme

Code byArjun Amgain
Demo & downloadclick here for code
Language usedHTML, CSS, JS
External link / DependenciesYes
ResponsiveYes

100. React Slide-In Menu

This is a slide menu that slides out when click on the hamburger on the top left

Code byLakston
Demo & downloadclick here for code
Language usedHTML(Pug), CSS(SASS), JS(Babel)
External link / DependenciesYes
ResponsiveYes

 

101. Awesome responsive navigation menu bar

This is an Awesome responsive navigation menu bar which has a hamburger in mobile view and has dropdown menu also

Code byKanha Sahu
Demo & downloadclick here for code
Language usedHTML, CSS
External link / DependenciesNo
ResponsiveYes

 

<<<<<<<<<<<<More Navigation Bar In HTML And CSS Added Soon!>>>>>>>>>>>>>>

 

That’s it, folks. In this article, we shared the Navigation Bar In HTML And CSS Source Code 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 with your thoughts and suggestions.

Comment me which design you like best from this collection of HTML CSS Navigation Bar. You can download and customize the Navigation Bar design as per your choice.



Leave a Reply