How to Build a Responsive Navigation Bar Using HTML and CSS

Calling all beginner web devs: this tutorial will give you the skills you need to create your own responsive navbars using just HTML and CSS!

A responsive navigation bar (navbar) is essential for improving your user experience and web design skills.

You've arrived at the right place, especially if you're a beginner learning front-end development and looking to build a responsive navigation bar. But before you start creating a navigation bar with HTML and CSS, you need to understand the basic design principles of a responsive navbar.

Here's how to make a responsive navigation bar using only HTML and CSS, without using even a single line of JavaScript.

Prerequisites: The Three Key Elements of a Responsive Navbar

It’s quite obvious that most website owners want to acquire new visitors. The first step towards doing so is showing visitors a clear and concise path. You should build a navbar that inspires curiosity and attracts visitors simultaneously. Consider three key elements while designing an ideal HTML navbar:

It should be clear and easy to read. Instead of cluttering the navbar with links to every page, you should go for the broader categories of your site. Afterward, you can add sub-menus as a dropdown, if necessary.

2. Noticeable

A simple responsive navigation bar shouldn’t be boring at all. You should stick to a pre-decided brand color to make the design more consistent. You can experiment with color schemes and use lighter or darker shades for highlighting and dropdown menus.

3. Responsive

A global internet usage report by Statista shows that 59.5 percent of the global population is actively using the internet, and 92.6 percent are using it via mobile devices. That's enough to understand the importance of implementing responsive mobile navigation on your site.

Top-level mobile navigation is quite popular. You can use a hamburger menu, guillotine, floating icons, and tabs. It’s a savior when you have five or more categories with multiple hierarchies. Top-level navigation can save significant screen space, especially with a content-heavy site.

Tab bars with relevant icons fit perfectly at the bottom navigation bar as they usually contain three to five menus at the same hierarchy level. Sub-menus and sequential menus follow the main category with the parent-child relationship.

If you are new to the world of web design, you should always consult some relevant, responsive web design principles for more tips.

Building a Responsive Navigation Bar With Hamburger Menu

Now that the design principles are clear, it's time to start building your exclusive responsive navbar menu. There are a variety of CSS features for building responsive websites . However, this guide will teach you how to create a responsive navigation menu with CSS Flexbox and Media Queries from scratch.

So, what will your CSS navbar look like? It’ll have top-level navigation with:

  • Navigation Menus
  • Dropdown Menu
  • Hamburger Menu (using the checkbox hack)

Getting Started With HTML

You'll have the dropdown menu inside the Service (main) menu. You can skip the hamburger menu while building the desktop navbar.

Your HTML navbar structure is now complete. Here's what the output will look like:

Getting started with HTML for navbar

Applying Basic CSS: Utilities

Start by applying some basic CSS styles to reset default values, making it easier to style the navbar:

Styling the Navbar Using CSS Flexbox

You can use CSS Flexbox to apply hovering effects for highlighting. The Service menu needs a little extra attention as you have to set display: none; for normal conditions and set it to display: block; when someone hovers on it.

This CSS will create a nav bar that looks like the following:

Navbar for desktop

Responsive Navbar Using CSS Media Queries

Once you input this code snippet, you’ll have a hamburger menu that shows up only on mobile devices with small screen sizes. For this, you’ll have two children of <ul class="nav-links"> . First, you’ll use input type="checkbox" and give the label a class="hamburger" . Second, give your navigation menu class="menu" .

Note that &#9776; is an HTML entity that displays the ☰ character, representing a hamburger icon.

The logic behind using the checkbox element is that when it's unchecked, it'll have display: none; whereas while checked, it'll change the CSS property of the general sibling selector (~) by setting it to display: block ; Simply stated, you’re using the checkbox to toggle the hamburger and navigation menus between the expanded and hidden states.

Style the CSS navbar for mobile devices using CSS media queries, as shown below. In this case, you can also use CSS grid and JS for the mobile menu .

Here’s what your design will look like on a desktop browser:

Navbar for desktop with dropdown menu

And here’s how it will display on mobile screens:

Responsive navigation bar with hamburger menu

Experimenting Is the Best Way to Design Your Ideal Navigation Bar

Having good website navigation heavily impacts bounce rates and conversion rates. Essentially, the first fold of your website should have a clear context, hierarchical navigation, and a call to action.

Your website navigation structure should help visitors land on your site's popular or trending pages in three clicks or fewer. So, keep on experimenting and designing better site navigation!

DEV Community

DEV Community

David Bilson

Posted on Jun 30, 2023 • Updated on Feb 16

Learn How to Build Responsive Navigation Bar with HTML, CSS, and JavaScript

A responsive navigation bar is essential for any web application, whether you are building static websites using the frontend trio (HTML, CSS, JS) or technologies such as React and Angular for single-page apps, it is crucial to know how to build a well-designed navigation bar.

This step-by-step tutorial will give you a clean walk-through, and a straightforward approach to building a responsive navigation bar that adapts to different screen sizes and provides a clean browsing experience for your users.

If you are a beginner, it is important to understand that when building with HTML, it is advisable to avoid using div containers excessively. Instead, you should adopt a semantic approach.

To ensure clarity, let's break down the entire tutorial into a series of steps.

Step 1 (HTML structure)

Create the complete HTML structure.

Remember, all the content of a web page is enclosed within the <body> element. Therefore, we will begin by nesting a <header> element within the <body> element. This <header> element will be the parent container for the <nav> element.

Step 2 (Create header and nav element)

Create a <header> element within the body and assign it a class name of "navigation-header" . Next, nest a <nav> element within the <header> . Inside the <nav> , include two <div> containers. The first div, with a class name of "logo-container" , will contain the logo, while the second div, with a class name of "navigation-items" will contain the navigation items. Also, give the navigation items container an id of "navigation-items" .

Nest <a></a> within the logo container, the content of the anchor tag can either be text or an image, depending on the requirement of your project. Nest three <a></a> within the navigation items container. The text content of each anchor element will be based on the requirements of your project. For the sake of this tutorial, I will use "About", "Projects", and "Contact Me" as the text contents for each anchor element respectively.

Lastly, for the HTML part of this tutorial, you will nest another div container within the nav element. This container will host the hamburger icons that will be displayed on smaller screens. Give it a class name of "hamburger" . Then, nest two spans within it. The first span should have an id of "openHam" with a hamburger HTML entity as its text content &#9776; . The second span should have an id of "closeHam" with a HTML entity &#x2716; as its text content.

Complete HTML Code Snippet

Step 3 (styling with css).

Before proceeding to styling the HTML elements in the external CSS file, ensure the CSS file is attached to the HTML file within the head element using the tag.

It is a common practice in web development to apply a CSS reset or CSS normalization to ensure a consistent starting point for styling across different browsers. By resetting the padding, margin, and box-sizing properties of all elements, as well as the body element, you can avoid any inconsistencies or unexpected default styles that different browsers may apply.

- Create a consistent styling foundation

The CSS snippet above helps to create a more predictable layout and styling behavior across different browsers and devices.

- Styling the navigation header

Select the header element using its class name. Since it is the parent container for the <nav> , it is going to be the main background, and would have a definite height. The navigation element within it should be centered on the x-axis and y-axis, therefore, flex properties come into play.

- Styling the nav

Since we are working with only one <nav> element, we do not need to give it a class name. Select the nav element using its element name. If the project you are working requires a uniform width on all parent containers, then you are going to set the max-width of the nav to that required max-width of your project.

For the sake of this project, we are going to set the max-width to 1200px. To make the container stretch to the full max-width, apply 100% width. This way, the container stretches up to the max-width but won't exceed the maximum width making the container responsive in that process. There are three child containers within the nav, they need to be on the same plain on the x-axis, therefore, we are going to make use of the flex properties to space out the containers and align them properly using the snippet below.

- Styling the logo

Select the anchor element within the logo container. Set its text color to ghostwhite . Remove any underlining or decoration from the text within the <a> element. Set the font-weight to bold (700 is the numeric value for bold font-weight). Set the font-size to 26 pixels.

- Styling the navigation items

Select the navigation items using its class name. Within the navigation items, we have three navigation links, make them align horizontally using the flex layout.

- Style the navigation links

Select the links within the navigation items using the direction child selector. Set the text color to "ghostwhite", remove text decoration, apply a font weight of 500, and set the font size to 16 pixels. Also add a transition for smooth hover effect.

- Add hover effect to navigation links

Simply change the color of the navigation to white, or based on the requirement of your project.

- Styling the hamburger

The hamburger has two child elements within it which includes the openHam and the closeHam icons. Here we used HTML entities for the icons, you can import icons from icon libraries such as font awesome, google fonts or iconicon library. On desktop and laptop screens, we definitely do not want the hamburger icons to show, so we hide them by default, then make them show up on smaller screens using media queries. But we are going to add some other default styling to the hamburger.

We are done with the desktop version of the entire navigation. Now, let's proceed to making it responsive and well designed for the smaller screens using media query.

- Create a different style for hamburger, and the navigation items on smaller screens using CSS media query

Here, we are going to have a different style from tablet devices with screen sizes from 768px below, this would also cover for mobile screens.

Media query is commonly used for creating responsive designs that adapt to smaller screen sizes, such as tablets or smaller desktop screens. In the above code snippet, the styles within the media query will only be applied when the screen width is 768 pixels or smaller. Elements are reselected within the curly braces and are styled to fit properly to the current screen size as written in the media query which is 768px in this case.

The hamburger and the navigation items will be reselected and styled to fit properly for the 768px screens

The closeHam icon is hidden and should only display when the navigation menu is displayed.

- style the navigation-items within the media query

It is hidden by default using the display: none; property and should only show up when the openHam icon is clicked. We are going to handle this event logic using JavaScript

Complete CSS Code

Step 4 click event logic with javascript, - variables for openham, closeham and navigationitems.

Create openHam, closeHam, and navigationItems variables and assign to elements in the HTML document using their corresponding IDs.

- Create a reusable function that controls visibility of elements.

The code snippet defines a function called hamburgerEvent which takes three parameters: navigation, close, and open. Inside the function, it modifies the CSS display property of the navigationItems, closeHam, and openHam elements based on the provided values.

Using an event listener, attach a click event to openHam and closeHam icons, with the hamburgerEvent function as the second parameter of the event listener:

openHam.addEventListener('click', () => hamburgerEvent("flex", "block", "none")); sets up an event listener for the click event on the openHam icon. When this element is clicked, it triggers an anonymous arrow function that calls the hamburgerEvent function with the arguments "flex", "block", and "none". This will change the display property of navigationItems to "flex", closeHam to "block", and openHam to "none", effectively showing the navigation items and switching the hamburger icon to the close icon.

The event listener attached to the closeHam does the exact opposite of this by passing "none", "none", "block" as the parameters of the hamburgerEvent function invoked in the event listener.

Complete JavaScript Code

Top comments (0).

pic

Templates let you quickly answer FAQs or store snippets for re-use.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

yogini16 profile image

Power of Idempotency Keys - Making Your Transactions Smooth and Safe

yogini16 - Feb 23

otamm profile image

A Non-noob Javascript Glossary for 2024, with Examples

Otavio Monteagudo - Feb 19

akritiu profile image

Steps to Build RAG Application with Gemma 7B LLM

Akriti Upadhyay - Feb 23

igbojionu profile image

Understanding CSS Website Layouts

igbojionu - Feb 22

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Published May 10, 2020 • Updated September 18, 2021

Creating a Responsive Navbar with HTML, CSS, and JavaScript

Navigation bars (also known as navbars ) are practically everywhere on modern websites, so it’s good to know how to create one by hand without relying on a component library that does all of the heavy lifting for you. But if you’ve never created a navbar from scratch, you may find it intimidating to get started.

For this reason, people often turn to CSS frameworks like Bootstrap to build navbars so that they don’t have to reinvent the wheel. Yet what usually ends up happening is that you get lost in a sea of obscure class names and behavior that’s difficult to customize. You waste many frustrating hours on StackOverflow when instead you could’ve simply built the thing by hand in less time.

In this tutorial, we’ll create a responsive navbar that works on both mobile and desktop, using nothing but HTML, CSS, and JavaScript. That’s right—no CSS frameworks needed! We’ll also ensure that it remains accessible to users of assistive technologies.

Table of Contents

What we’re building.

Here’s the Codepen demo for this tutorial if you want to follow along:

See the Pen Responsive Navbar by Aleksandr Hovhannisyan ( @AleksandrHovhannisyan ) on CodePen .

There’s actually not a lot of HTML involved! Navbars aren’t all that difficult to create once you go through the process yourself.

We’ll design this with a mobile-first approach and simply take care of the desktop case with a media query. Note that I’m not designing with any minimum device width in mind, but this works all the way down to 320px , one of the narrowest mobile resolutions that you typically need to account for.

Responsive Navbar HTML

Below is all of the HTML that we’re going to need to create our responsive navbar:

We’re going to write some CSS and JavaScript in this post; you can either add the styles an JavaScript inline to your head if you’re following along in a local sandbox, or you can create separate files for those. I’ll do the latter, but it’s up to you how you want to structure your local project.

Dissecting a Navbar

Before I vomit a bunch of CSS on your screen and leave you clueless as to what’s going on, let’s take a closer look at the components that make up our navbar.

First up, we’re using a <header> landmark element with an ID of navbar as the outermost parent:

A header element

Inside of that is a nested <nav> landmark element, which signals the start of a navigation menu to screen readers and browsers. This container’s main purpose is to align the left and right ends of our navbar with the page’s left and right margins. This assumes that the page content itself is also wrapped with a .container for horizontal centering.

A nav landmark element with left and right padding and auto margins

As you may have probably guessed, this is a flex container. It has three children:

  • .home-link : Anchor wrapped around the website logo and name.
  • #navbar-toggle : The hamburger button used to toggle the navigation menu on mobile devices.
  • #navbar-menu : The navigation menu wrapper, containing a list of links to our pages.

Let’s take a closer look at that last element:

The navbar-menu fixed wrapper

This wrapper is given a fixed position and covers the entire screen. It also has a semi-transparent background that elevates it visually above the main content of the page. In some UI libraries, this is known as a mask layer . It’s a common approach used with things like modal windows and menus.

Within #navbar-menu is an unordered list with some padding, margins, and a box shadow:

The navbar-links unordered list element

And finally, that list houses the actual navigation links:

A navigation bar link being inspected in Chrome dev tools

That’s it! When we hit the 700px breakpoint, our media query kicks in and styles the desktop navbar. This media query was determined based on the number of navbar links in this particular setup. If you have more content, you may wish to adjust this breakpoint.

With all of this prep work out of the way, we’re ready to begin creating our responsive navbar.

Styling the Navbar

We’re going to take this slowly. I’ll add explanations for each bit of CSS and JavaScript that I introduce so you understand what’s going on. I’ll also show screenshots with each major change we introduce.

First up are some standard CSS resets and base styling:

Feel free to remove any of the CSS that doesn’t apply to your situation; this is just for the tutorial itself. The variables up at the top will help us avoid copy-pasting colors in our CSS. We reset paddings and margins and use box-sizing: border-box to ensure that widths/heights take border and padding into account. Finally, we ensure that the body takes up the entire vertical height of the device with height: 100vh .

Before we look at the CSS specific to the responsive navbar, I’d like to introduce one more selector:

This is a pretty popular approach for centering things horizontally in CSS. Basically, you can just slap a class name of container on anything that should be horizontally centered on the page. Here, the page is centered to a maximum width of 1000px . If you’ll recall, we applied this class to the <nav> element:

Alright, time to actually style our responsive navbar. We’ll work in a top-down fashion. First up is the outermost #navbar element:

A black, horizontal navigation bar is positioned at the top of a blank white page. Some blue links overflow vertically on its left-hand side.

Why we need the CSS variable will become obvious later on. The entire element is given a fixed position so it sticks to the top of the page as the user scrolls. It’s also given a slight box shadow. Don’t worry about the fact that the links are currently overflowing their parent; we’ll fix this soon enough.

Moving on, we have the nested container element:

A black, horizontal navigation bar is positioned at the top of a blank white page. A purple link reads Website Name on the left-hand side; on the right side are some blue-colored vertically overflowing links, rendered with visible bullet points.

As I mentioned earlier, this is simply a flex container. We use justify-content: space-between to position the home link and hamburger icon on opposite ends of the navbar. But right now, it’s positioning all three children: the home link, the hamburger button, and the navigation links themselves; we’ll fix this shortly.

Next up is some general styling for the navbar anchors:

A black, horizontal navigation bar is positioned at the top of a blank white page. A white link reads Website Name on the left-hand side; on the right side are some white-colored vertically overflowing links, rendered with visible bullet points.

Pretty straightforward.

Here’s the CSS for the website logo. Note that this is just a placeholder for my demo; in reality, you’ll probably want to use an image or SVG:

A black, horizontal navigation bar is positioned at the top of a blank white page. A white link reads Website Name on the left-hand side. To its immediate left is a white circle that serves as a logo placeholder.

Time for the toggle button!

Making It Interactive: Navbar Toggle Button

First, here’s the markup for the navbar button:

We’re doing several things here, so let’s try to unpack it all:

  • We set type="button" since the default behavior is submit (for forms).
  • We give the button an ID, to be used for styling and interactivity.
  • We use aria-controls to associate the button with the element whose ID is navbar-menu .
  • We set aria-expanded to "false" by default, indicating that the menu is closed.

That’s all that you need to create a semantic and accessible toggle button.

Let’s now look at some of the CSS:

We reset some of the default button styles and give it fixed dimensions. It’s also a flex container for centering.

Here’s the CSS for the icon bars:

A black, horizontal navigation bar is positioned at the top of a blank white page. A hamburger toggle button is visible in the center, with three horizontal bars stacked on top of each other with some spacing in between.

There are lots of ways to do this, but I think this is the most straightforward to understand. I’m sure you can take advantage of pseudo-elements instead or just draw an SVG .

When the toggle button is clicked, we’ll set aria-expanded to "true" on the button. Here’s how we’ll animate the hamburger icon to become a close icon (X):

The middle bar disappears, the top and bottom bars get centered, the top bar rotates 45 degrees clockwise, and the bottom bar rotates 45 degrees counter-clockwise.

JavaScript for Toggling the Navbar Visibility

Now’s a good time to code up the logic for toggling the navigation menu so we can test that the toggle button works. Ideally, you’d want to put this in a separate module to avoid leaking variables into the global scope, or wrap the whole thing in an immediately invoked function expression the old-fashioned way.

Now, I know what you’re thinking:

“But Aleksandr, why not just use the checkbox hack and avoid writing JavaScript altogether?”
  • CSS is for styling. JavaScript is for interactivity.
  • Hacks are called hacks for a reason. Use checkboxes for forms , not buttons.

At this point, you can open up your browser and test out the button. The menu itself is still not toggling its visibility, so let’s fix that with CSS.

Responsive Navbar Menu

As I mentioned earlier, the navigation menu wrapper has fixed positioning, with a top offset equal to precisely the height of the navbar itself:

A black, horizontal navigation bar is positioned at the top of a blank white page. The only visible elements are the home link and a hamburger toggle button, positioned on opposite ends horizontally.

While opacity: 0 and visibility: hidden may seem redundant, it’s a good practice to apply both if you want to animate the menu’s visibility later with the transition property. I’ve omitted transition styles from this tutorial, but you can add them if you’d like.

Below is the CSS for the menu’s open state; we style it based on whether it’s a sibling of the toggle button in the aria-expanded="true" state:

Click the hamburger icon to see the following result:

Navigation menu in its opened state, with links visible below the navigation bar against a semi-transparent background

The container for the navigation links is an unordered list:

Styled navigation link container, with a background color matching the main navigation bar.

This is the actual, physical “menu” part of our navigation. The margin ensures that the menu appears detached from the rest of the navbar, as if it’s floating on the page. If instead you’d like it to appear as a physical extension of the navigation bar, simply get rid of the margin and border radius and shift the shadow down:

An attached navigation menu that's been opened, with links positioned immediately below the navigation bar itself.

And that’s it for the mobile version’s CSS!

One last thing before we style the desktop version. Add this to your JavaScript:

Basically, this allows the user to close the navigation menu by clicking on the #navbar-menu mask layer. But we need to stop click propagation so that any clicks on .navbar-links don’t bubble up and trigger a close.

Go ahead and test this on your end to make sure the mobile version works.

Responsive Navbar: Desktop Layout

I’ll show the media query in its entirety and then we’ll look at what each piece is doing:

So first up is this:

Styled navbar with no visible elements except for the home link and the logo.

We don’t want the hamburger button to be visible on desktop, so we hide it with display: none .

Now we get to the most important part of making this navbar responsive:

Whereas before the #navbar-menu wrapper was fixed in position, covering the entire screen, it’s now static. This means it assumes its natural position in the DOM based on where it was defined in our HTML. In this case, that’s after the home link (since the hamburger is now invisible).

And finally, .navbar-links now uses a flex direction of row instead of column , ensuring that the links appear side by side on the navbar:

Fully styled desktop version of the navbar, with links positioned in a horizontal layout towards the right-hand side.

We’re officially done! But you may be wondering if there’s room for customization—there sure is!

Alternative Responsive Navbar Designs

For the purposes of this tutorial, I made lots of assumptions about the default state, appearance, and behavior of the navigation bar. In reality, what you’ll want to do is use separate, specialized class names to customize this navbar to your liking.

Here’s a codepen with options that you can toggle:

See the Pen Responsive Navbar (Customizable) by Aleksandr Hovhannisyan ( @AleksandrHovhannisyan ) on CodePen .

The CSS now involves these classes, which get applied to #navbar-menu :

  • detached : The default type of navigation menu.
  • attached : The menu is an extension of the navigation bar.
  • sidebar left : The menu opens as a sidebar from the left.
  • sidebar right : The menu opens as a sidebar from the right.

Final Thoughts

Creating responsive navbars in HTML isn’t really all that difficult once you master basic positioning and Flexbox, as those two account for a majority of the CSS. The rest is just there to space the content and make things look pretty.

I hope you found this tutorial helpful!

Comment system powered by the GitHub Issues API. You can learn more about how I built it or post a comment over on GitHub, and it'll show up below once you reload this page.

Navigation Bar

Navigation bars are tools used to help users get from one location to another very quickly and easily. With bootstrap, many of the small details of the navigation bar have already been written by someone else and posted online, so you can just focus on getting the main bar to work and look the way you want it to.

In order to link to the bootstrap, you must call the bootstrap link using:

<link rel="stylesheet" href="link to bootstrap goes here">

in the header section. For some of them, a Javascript source will also need to be called.

To call the navbar, you will need to call <nav class="navbar"> (the class is called "navbar").

<li>, called lists, are sections of the navigation bar.

<a href="link">, which are links to the other location(s), go inside the list. For example:

<li> <a href="link"> Link One </a> </li>

In this exercise, you will be adding three more sections to the navigation bar, and calling <nav class="navbar"> at the indicated space in order to call the bootstrap code.

Sphere Engine

Table of Contents

Prerequisites, project directory, services.html, contact.html, how to create a responsive html navigation bar.

How To Create a Responsive HTML Navigation Bar?

HTML needs no introduction. HTML expands as HyperText Markup Language. It is the most popular and widely-used language for web application development. Created in 1991 by Berners-Lee, but published first in 1995, the HTML programming language has gone through a lot of changes and resulting versions over the years. Released in 1999, HTML 4 was a popular breakthrough version that attracted a lot of attention and was adopted across the world fairly quickly - soon becoming the language of choice for web application development for many. The language has been upgraded once more - HTML5 ; and was published in the year 2012.

In this HTML Navigation Bar article, we focus on navigating between web pages using the navigation bar. We will also add a little bit of CSS to make the webpage look and feel good.

In this article, you will get to learn to code and work on an HTML web application along with us. The application under discussion can navigate between pages using the links provided in the navigation bar. So without further ado, let’s get started!

  • We suggest you have a basic knowledge of HTML and CSS before moving on to the tutorial. Even though it is a simple tutorial, it will help if you already know the most basic concepts. We have an article on What is HTML? ; you can go check that out.
  • We are using Visual Studio Code as the text editor for this tutorial. It is a simple, powerful text editor and supports many languages, including HTML, CSS, and JavaScript.

Want a Top Software Development Job? Start Here!

Want a Top Software Development Job? Start Here!

The project directory should look like this in the end.

project directory

Fig: Project Directory

Let’s now start coding this HTML web application. As you can see in the project directory, there are four pages in this web application. Our main goal is to allow users to navigate these pages using the navigation bar to add to all the web pages. Therefore, code will mostly be similar for all four web pages with minor tweaks here and there.

This is the home (landing) page of the website. Let’s go ahead and get a better understanding of the code in this file.

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link

      href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"

      rel="stylesheet"

    <link rel="stylesheet" href="style.css" />

    <title>Home</title>

  </head>

  <body>

    <nav>

      <div class="heading">

        <h4>Navigation Bar</h4>

      </div>

      <ul class="nav-links">

        <li><a class="active" href="index.html">Home</a></li>

        <li><a href="pages/about.html">About</a></li>

        <li><a href="pages/services.html">Services</a></li>

        <li><a href="pages/contact.html">Contact</a></li>

      </ul>

    </nav>

    <div class="body-text"><h1>This is Home Page!</h1></div>

  </body>

</html>

  • <html> tag marks the beginning of an HTML document.
  • Inside <html> tag is the <head> tag. This tag is used for describing the document and importing complementary files that the web application might require.
  • Import the CSS file and Google font using the <link> tag, inside the <head> tag.
  • Give a title to this web page using the <title> tag inside the <head> tag.
  • Close the <head> tag and start the <body> tag. Everything visible on the webpage is defined within this tag.
  • The <nav> tag defines a set of navigation links that we will use to navigate between the pages.
  • Add the <div> tag to apply CSS styles to HTML content. HTML elements that have to be styled are assigned class names to be associated with specific CSS styles.
  • Use <h4> tag to add the heading for the navigation bar.
  • Use <ul> tag to define unordered (unnumbered) lists.
  • Use <li> tags within the <ul> tag to add list items to the unordered list.
  • Use <a> tag to add a hyperlink to any content on the web page. We use this to make the text clickable and to be able to navigate between the pages on the website.
  • Use <h1> tag for adding big sized text and enclose it within a <div> tag to center it on the webpage.

That’s all the code we needed for this webpage. Going forward, we have to create three more pages to illustrate the concept of navigation in HTML properly. The code is mostly the same, so let’s point out the code’s differences between the pages.

This is the second page of the website with a very similar code to the first one. Let’s go ahead and look at the differences in the code.

    <link rel="stylesheet" href="../style.css" />

    <title>About</title>

        <li><a href="../index.html">Home</a></li>

        <li><a class="active" href="about.html">About</a></li>

        <li><a href="services.html">Services</a></li>

        <li><a href="contact.html">Contact</a></li>

    <div class="body-text"><h1>This is About Page!</h1></div>

  • Import the same CSS stylesheet as well as Google font on this page as well.
  • Change the title of the webpage inside the <head> tag.
  • Make the second list item active by adding the active class. We have defined the style for the active tab in the CSS stylesheet.
  • Change the href links according to the project directory.
  • Change the <h1> text to let the user know that the page has changed.

This is the third page of the website with a very similar code to the previous pages. Let’s go ahead and look at the differences in the code.

    <title>Services</title>

        <li><a href="about.html">About</a></li>

        <li><a class="active" href="services.html">Services</a></li>

    <div class="body-text"><h1>This is Services Page!</h1></div>

  • Make the third list item active by adding the active class. We have defined the style for the active tab in the CSS stylesheet.

This is the fourth and last page of the website with a similar code to the previous pages. Let’s go ahead and look at the differences in the code.

  • Make the fourth list item active by adding the active class. We have defined the style for the active tab in the CSS stylesheet.

This is the CSS stylesheet that we add to the website to make it look and feel good. Let’s go ahead and have a look at the styles added in this stylesheet.

  margin: 0px;

  padding: 0px;

  box-sizing: border-box;

.body-text {

  display: flex;

  font-family: "Montserrat", sans-serif;

  align-items: center;

  justify-content: center;

  margin-top: 250px;

  justify-content: space-around;

  min-height: 8vh;

  background-color: teal;

  color: white;

  text-transform: uppercase;

  letter-spacing: 5px;

  font-size: 20px;

.nav-links {

  width: 30%;

.nav-links li {

  list-style: none;

.nav-links a {

  text-decoration: none;

  letter-spacing: 3px;

  font-weight: bold;

  font-size: 14px;

  padding: 14px 16px;

.nav-links a:hover:not(.active) {

  background-color: lightseagreen;

.nav-links li a.active {

  background-color: #4caf50;

  • As mentioned above, CSS styles use class names, among other things, to associate with an HTML element having that class name and apply styles to it.
  • Define the styles within the class names used in the HTML files to add styles to the HTML elements used in those pages.
  • The styles are self-explanatory, and you are free to change them according to your style.
Get skilled in HTML5 and CSS3 with the  Full Stack Java Developer Master's Program . Click to check out the program details!

This is how the application should look when you code it. So congratulations, you just coded your HTML web application with navigation features.

bar output

Fig: HTML Navigation Bar Output

You can further style your web applications using CSS stylesheet, add interactivity using JavaScript, and build a good website. Keep in mind that you will need to know all three languages at a beginner level.

We hope this HTML Navigation Bar article helped you grasp a few essential navigation concepts in HTML websites. We highly recommend you go through other tutorials and learn more about CSS and JavaScript to become a full-fledged web developer.

Get Ahead of the Curve and Master HTML Today

Now that you’ve learned the basics of HTML and the HTML Navigation bar, an ideal next step would be for you to obtain the skills necessary to take advantage of its immense popularity of this language. Simplilearn’s comprehensive PGP Full Stack Developer Program , is a great choice for this as it will help you become career-ready upon completion.

To learn more, we encourage you to go through our Youtube video providing a quick introduction to HTML Navigation Bar and how to navigate between the HTML web pages.

If you’re an aspiring web and mobile developer, HTML training is almost an essential skill you will need to broaden your career horizons. Do you have any questions for us? Feel free to place your queries in the comments section of this article. Our SMEs will get to them shortly and answer them promptly, at the earliest.

Our Software Development Courses Duration And Fees

Software Development Course typically range from a few weeks to several months, with fees varying based on program and institution.

Recommended Reads

Getting Started With Web Application Development in the Cloud

What Makes a Full Stack Web Developer?

Implementing Stacks in Data Structures

Combating the Global Talent Shortage Through Skill Development Programs

Average Full Stack Developer Salary

The Perfect Guide for All You Need to Learn About MEAN Stack

Get Affiliated Certifications with Live Class programs

Post graduate program in full stack web development.

  • Live sessions on the latest AI trends, such as generative AI, prompt engineering, explainable AI, and more
  • Caltech CTME Post Graduate Certificate

Automation Testing Masters Program

  • Comprehensive blended learning program
  • 200 hours of Applied Learning
  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, and OPM3 are registered marks of the Project Management Institute, Inc.

html tutorial navigation bar

Explore your training options in 10 minutes Get Started

  • Graduate Stories
  • Partner Spotlights
  • Bootcamp Prep
  • Bootcamp Admissions
  • University Bootcamps
  • Coding Tools
  • Software Engineering
  • Web Development
  • Data Science
  • Tech Guides
  • Tech Resources
  • Career Advice
  • Online Learning
  • Internships
  • Apprenticeships
  • Tech Salaries
  • Associate Degree
  • Bachelor's Degree
  • Master's Degree
  • University Admissions
  • Best Schools
  • Certifications
  • Bootcamp Financing
  • Higher Ed Financing
  • Scholarships
  • Financial Aid
  • Best Coding Bootcamps
  • Best Online Bootcamps
  • Best Web Design Bootcamps
  • Best Data Science Bootcamps
  • Best Technology Sales Bootcamps
  • Best Data Analytics Bootcamps
  • Best Cybersecurity Bootcamps
  • Best Digital Marketing Bootcamps
  • Los Angeles
  • San Francisco
  • Browse All Locations
  • Digital Marketing
  • Machine Learning
  • See All Subjects
  • Bootcamps 101
  • Full-Stack Development
  • Career Changes
  • View all Career Discussions
  • Mobile App Development
  • Cybersecurity
  • Product Management
  • UX/UI Design
  • What is a Coding Bootcamp?
  • Are Coding Bootcamps Worth It?
  • How to Choose a Coding Bootcamp
  • Best Online Coding Bootcamps and Courses
  • Best Free Bootcamps and Coding Training
  • Coding Bootcamp vs. Community College
  • Coding Bootcamp vs. Self-Learning
  • Bootcamps vs. Certifications: Compared
  • What Is a Coding Bootcamp Job Guarantee?
  • How to Pay for Coding Bootcamp
  • Ultimate Guide to Coding Bootcamp Loans
  • Best Coding Bootcamp Scholarships and Grants
  • Education Stipends for Coding Bootcamps
  • Get Your Coding Bootcamp Sponsored by Your Employer
  • GI Bill and Coding Bootcamps
  • Tech Intevriews
  • Our Enterprise Solution
  • Connect With Us
  • Publication
  • Reskill America
  • Partner With Us

Career Karma

  • Resource Center
  • Bachelor’s Degree
  • Master’s Degree

CSS Navigation Bar

Navigation bars are an important part of any web site. They make it easy for users to find pages on a web site, which increases the chance that a user is able to find the content that they are looking for on the site.

By default, navigation bars in HTML are plain. However, you can use CSS to style a navigation bar and make it both aesthetically pleasing and easier to view.

Find your bootcamp match

This tutorial will discuss, with examples, how to create a navigation bar in HTML and how to style a navigation bar using CSS.

Navigation Bar Structure

A navigation bar is a list of links in HTML. Before we can style a navigation bar using CSS, we need to define an HTML list with the links we want to include in our navigation bar.

To create our list of links, we are going to use the <ul> and <li> elements. The <ul> HTML element is used to create an unordered list—a list with bullet points—and the <li> element is used to add an item to our list.

Throughout this article, we are going to use this example to illustrate how to style our navigation bar: We have been asked by a local fishing club to create a website that displays information about their club. The club wants their site to have a navigation bar which makes it easy for users to explore the site.

We could use the following HTML code to create our navigation bar:

Our list contains four links, each of which point to different pages on our site. Right now, though, our navigation bar is just a list. We need to use CSS to style our list and turn it into a full navigation bar.

First, we are going to remove a few default settings for our navigation bar. The following CSS code is used to remove the bullet points, margins, and padding from our list. We don’t need these to create our navigation bar.

The list-style-type: none; property removes the bullet points, and the margin: 0 and padding: 0 properties remove the margin and padding for our navigation bar, respectively. We will use these styles in all of our examples below.

Here’s what our navigation bar looks like so far:

Screen Shot 2020 03 26 At 09.56.26

Right now, our navigation bar is plain, but we can use other HTML styles to make the element more interesting and visually appealing.

Vertical Navigation Bar

Often, you’ll want to create a navigation bar that appears vertically on a screen. This approach is common if you are creating a reference site whose navigation bar needs to contain a large number of values.

To create a vertical navigation bar, you should style the a elements inside the navigation bar. Suppose our fishing club wants each link to appear in green. We could accomplish this using the following code:

Our code returns:

Screen Shot 2020 03 26 At 10.01.18

Let’s break down our code:

  • The display: block property is used to allow the user to click around the link to trigger the link (so, the user doesn’t have to directly click the link).
  • The width: 50px property sets the width of each link to be 50px wide. By default, the width of a link takes up the entire space of its parent component.
  • The color: green property sets the color of the text in our navigation bar to green.

The fishing club has changed their mind and wants to have a navigation bar with a light gray background and green text. The club also wants each element in the navigation bar to turn gray if the user hovers over an item in the navigation bar. We could create this navigation bar using the following code:

Screen Shot 2020 03 26 At 10.05.35

Let’s break down our code. In our code, we used:

  • The background-color: lightgray; property to set the background color of the navigation bar to light gray.
  • The padding: 20px; property to set a padding of 20px around each link.
  • The color: green; property to make each link appear in green.
  • The text-decoration: none; property to remove the underlines from our links.
  • An a:hover tag to change the color of a link to gray when the user hovers their cursor over the link.

This is just one example of how to style a vertical navigation bar in CSS. You could use any CSS style to change the vertical navigation bar to meet your specific needs.

Center Links

When you’re designing a vertical navigation bar, you may decide that you want to center the links in the component. You can do so using the text-align: center; property.

Here’s an example of text-align: center; being used to center the links in a navigation bar:

Screen Shot 2020 03 26 At 10.10.14

We reuse the code from our earlier example in this illustration. However, in the above example we also used the text-align: center; property to center the text in our navigation bar.

Active Links

You may want to create an active class which you can use to tell the user which page they are on.

The fishing club has contacted us and asked if we can add a green background to a navigation item when a user is viewing a specific page on the website. So, if a user is viewing the “Home” page, the navigation item for “Home” should change.

Venus profile photo

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

We could use the following code to accomplish this task:

Screen Shot 2020 03 26 At 10.13.35

In our example, we applied the active class to the first <a> tag in our list. This allows us to show the user what page they are on in the navigation bar.

Fixed Vertical Navigation Bar

Vertical navigation bars often span the height of the page and are fixed to the side of the page. These navigation bars are often referred to as sticky , because they are stuck to a certain position on the page.

Suppose we wanted to create a navigation bar for the fishing club which sticks to the side of the page. We could use the following code, in addition to the code from our previous example, to do so:

Screen Shot 2020 03 26 At 10.16.55

In this example, we:

  • Use the height: 100% property to set the height of our navigation bar to be equal to the height of the page.
  • Set position to fixed , which makes our navigation bar stick to a certain position on the page.
  • Use the overflow: auto; property to enable scrolling in the sidebar if there is too much content on the page.

Our code returned a vertical navigation bar that is fixed to the side of our web page.

Horizontal Navigation Bar

There are two ways you can create a horizontal navigation bar in CSS. You can either assign the display: inline property to a list of links, or use the float: left property.

Inline Property

To create a horizontal navigation bar, you can set each <li> element to be displayed inline in your code. Here’s the code you would use to do so:

li { display: inline; }

This code removes the line breaks before and after each item, which means they will all be displayed on one line.

Float Property

Alternatively, you can float each of the <li> elements in a list to the left. Then, you can create a layout for each link in the list. Here’s the code you would use:

In this example, we use float: left to make all <li> elements in our list appear next to each other. Then, we use display: block to make the whole link area in our <a> tags clickable, rather than just the text. We also use padding: 10px to create a 10px padding around each link, which makes our links easier to read.

Now we know the basics of styling a horizontal navigation bar, we can start exploring a few examples.

Horizontal Navigation Bar Examples

The local fishing club has asked us to create a horizontal navigation bar so they can see how it would look in comparison to a vertical navigation bar.

The club wants the navigation bar to have a light gray background, and for each item in the list to turn dark gray when a user hovers over an element. We could use the following code to create this navigation bar:

Screen Shot 2020 03 26 At 10.26.36

Let’s break down our code. In our code, we have created a navigation bar with a light gray background. We used the float: left; technique to make our links appear horizontally. Then, we:

  • Created a 10px padding around each link
  • Removed the link underlines using the text-decoration: none 
  • Displayed each link using the block style (so the area around each link is clickable, in addition to the text contained within the link)
  • Set the color of the text in each navigation item to black.

We also used the a:hover style to set the background color of each item in our navigation bar to dark gray when the user is hovering over a link.

Align Links to the Right

By default, the links in our navigation bar appear at the left of the element. However, if we want to align a link to the right, we can do so using the float: right; property in our code.

Here’s the CSS code we would use to float a link to the right:

When we apply the floatRight class to the last <li> tag in our navigation bar, the following navigation bar is created:

Screen Shot 2020 03 26 At 10.34.04

In this example, the Join link—which is the last item in our navigation bar—has been aligned to the right of the navigation bar.

We can use the active class that we created earlier to create an active navigation link. 

Suppose we want to change the background color of each link to black, and the color of the link’s text to white when a user is on a certain page. We could use the following style to accomplish this task:

Screen Shot 2020 03 26 At 10.30.20

We have applied the active class to the first element in our list. As you can see, the Home link now has a green background and its text has changed to appear in white.

Fixed Horizontal Navigation Bar

Often, when you’re designing a horizontal navigation bar, you’ll want the navigation bar to stick to the top or the bottom of the page. You can accomplish this task using the position: fixed; CSS property.

The local fishing club would like to see the navigation bar presented at both the top and bottom of a web page. Here’s the code we would use to show the navigation bar at the top of the page:

This code fixes our navigation bar to the top of the page, and returns the following:

Screen Shot 2020 03 26 At 10.30.20 1

In our code, we used the position: fixed; and top: 0; properties to fix our navigation bar to the top of the page. If we wanted to fix our navigation bar to the bottom of the page, we could use this code:

Screen Shot 2020 03 26 At 10.38.18

You can see that, in this example, our navigation bar appears at the bottom of the page.

CSS can be used to create a styled navigation bar from a list of HTML links.

This tutorial discussed, with reference to examples, how to create a navigation bar in HTML, and how to style the navigation bar using CSS. Now you’re ready to start designing your own navigation bars with HTML and CSS like a professional!

About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication .

What's Next?

icon_10

Get matched with top bootcamps

Ask a question to our community, take our careers quiz.

James Gallagher

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Apply to top tech training programs in one click

How to Build a Responsive Navigation Bar with a Dropdown Menu using JavaScript

Navigation bars are essential components used a lot in websites and web apps. As a web developer, you will need to be able to customize them, either for a client project or a basic portfolio site.

In this guide, you'll learn how to build a navigation bar for yourself from scratch using just HTML, CSS, and JavaScript. You'll also learn how to make it accessible.

Here's a screenshot of what this navigation bar will look like:

navigation-bar-final-result

This design is inspired by Tran Mau Tri Tam's Minimal Navigation bar on Dribbble.

Step 1 – Add the HTML Markup

For brevity's sake, we'll be using an icon library called boxicons to import certain icons for this navbar. I highly recommend using inline SVGs instead.

To make use of this library, insert the snippet below in the head of your HTML file:

The markup is divided into three main parts:

  • A div element with a class of nav-start
  • Another div element with a class of nav-end
  • A button element with an id of hamburger

All these elements will be enclosed within a header tag. To explain this better, copy the markup below and I'll explain what's happening after.

For the nav-start, we have the following elements:

  • An <img> element for the logo wrapped with an anchor <a> tag.
  • A <nav> element with a class of menu which will contain all the navigation links. We'll define these links later using a combination of <ul> , li> and <a> tags.

The nav-end has the following elements:

  • A <form> element with a role of search that contains a search input and search icon.
  • A button element with a class of btn . We'll use this class to style the button.

Here's the resulting output:

markup-elements-broken-down-into-three-main-parts-1

Navigation menu

The navigation menu <nav> is where the navigation links will be. Replace the nav element you added earlier with this markup below:

Here you have a nav tag that contains a button and an unordered list of five li elements representing each navigation menu item: browse, discover, jobs, livestream, and about .

The button serves as a hamburger menu, and is a button with an id and aria-expanded set to "false". The aria-expanded attribute will enable us make this button more accessible to screen readers.

The first two list elements, browse and discover , are button elements and will be used to toggle their individual dropdown menu. The remaining elements Jobs, livestream , and about , are just regular links.

With the code so far, your result should look like this:

Navigation-markup-with-links-and-popup-buttons

Dropdown Element

Next up, let's define the dropdown element for each navigation button. Here's the markup for the first dropdown. Replace the first li element in your markup with this:

You can get the SVG icons here .

To breakdown this markup, we added the following:

  • A div element with an id of dropdown1 and class of dropdown .
  • Two ul elements.
  • A span element with a class of   dropdown-link-title for the header of each menu collection.
  • A collection of links defined using li and a tags. The links each have a class of dropdown-link .
  • Inside each anchor tag, an icon is added via the img tag.

Note: Since the icons added via the img tag are strictly declarative, I highly suggest you add them as SVG elements directly. I am only doing this to make the code more readable.

Here's the markup for the second dropdown element dropdown2 :

The final result should look like this:

popup1-and-popup2-markup-1

The full markup will be provided at the end of this tutorial.

Step 2 – Style the Navigation Bar

As always, we'll start by resetting the default margin and padding of every element on the page, add global variables, and some basic styling to a few elements.

Next, add some reusable styles.

Now that you've gotten this basic styling out of the way, you can focus on styling the core navigation bar itself.

Navigation menu styles

Here's the markup to style the navigation bar container:

Dropdown Menu Styles

In addition to styling the dropdown menu, it will be hidden using a combination of visibility and opacity properties. The idea is to show the menu only when the individual button has been clicked.

Later on, the menu can be toggled by reverting the visibility and opacity properties back to the default state using the active class. But we'll do this via JavaScript.

If you prefer to hide the menu completely, substitute the opacity and visibility properties with display: none; . Although this property is not animatable using transition in CSS.

Right menu styles

Next, add the styling for the search input, button, and profile image and then hide the hamburger button on desktop screens.

Here's what it should look like:

final-styling-output-of-navigation-bar-and-popup-menu

To finish up the styling, add the media query styling:

First, this arranges the elements, and most importantly, it targets the hamburger class and hides it. Now on tablet and mobile screens, the navigation bar is responsive and the hamburger button is visible.

This completes the navigation bar styling. Let's work on the functionality in the next section.

Step 3 – Add JavaScript Functionality

For the JavaScript functionality, we'll focus on the following categories:

  • Toggling the dropdown menu visibility
  • Closing the dropdown menu
  • Toggling the hamburger menu visibility
  • Toggling the aria-expanded attribute

First, select your classes using the DOM's querySelector method and store them in variables so they are reusable.

Next add the functions below in your code. I'll explain their uses a bit later.

Get dropdown menu ID

The next step is getting the dropdown menu ID. Since there are two dropdown menus, the value will be based on what dropdown button is clicked.

To get the ID, you'll utilize the dataset property and then store the value into its own variable.

To break this snippet down:

  • The forEach method loops through the collection of buttons
  • The addEventListener() method attaches a click event to each button
  • The currentTarget.dataset property fetches the current dropdown of the button clicked.
  • Each of the ids are used to target the corresponding dropdown element

What this means is that when the button with a dataset of   dropdown1 is clicked, the div element with an id of dropdown1 is logged to the console, and inversely for the dropdown2 button.

Toggle the dropdown menu

Toggling the menu is fairly easy now that you have the dropdown element ID stored into a variable called dropdownElement . By targeting this variable, you can toggle the active class on each dropdown element.

In addition to toggling the dropdown menu, we added a condition to check if the current dropdown element id matches with the active button. This makes sure only one dropdown element is expanded at a time.

Toggle aria-expanded property

The aria-expanded property allows assistive technologies to announce whether an interactive menu is expanded or collapsed. To toggle this property, insert this code inside the btn code block under e.stopPropagation() :

Now anytime the dropdown menu is visible, the aria-expanded property is set to true and when collapsed, it's set to false.

Collapse dropdown menu

So far the dropdown collapses only when the buttons are clicked. Other instances it should be collapsed include:

  • When the links inside the dropdown menu are clicked
  • When you hit the ESC key
  • When you click on the document body – essentially, outside of the dropdown container.

By calling the functions created earlier, closeDropdownMenu and setAriaExpandedFalse , the dropdown menu can be collapsed and the aria-expanded attribute set to false.

Toggle hamburger menu

To see the navigation bar on tablet and mobile screens, attach the toggleHamburger function as a callback on the hamburger button and then call the function inside the links code block.

This will essentially toggle a different class called show that controls showing the navigation bar or hiding it, and update the aria-expanded attribute accordingly.

Note that to truly make the hamburger menu accessible, you would need to make it automatically close when it loses focus (either by a change in keyboard focus or a mouse click).

Here's the final output:

Add More Dropdown Menus

You can add more dropdown menus by simply replacing any of the list items with a link to the one with a button and dropdown menu. In other for it to work, make sure you update the following:

  • The dropdown ID according to how many menus you need. For example a third menu will have an id of dropdown3
  • The button will have its data-dropdown value set to dropdown3

Here's an example that converts the Jobs link into a dropdown menu.

Here's the final result:

additional-dropdown-menu

Following this process, you can add as many dropdown menus as you want.

And with this, you’ve successfully built a responsive navigation bar with dropdown menus using just HTML, CSS, and JavaScript. You also learned how to make the menu accessible using a few aria attributes including the aria-expanded property.

Here’s the codepen file to test this navigation bar in action:

Get code files from GitHub using this link

I sincerely hope you found this post interesting or useful. If you did, kindly share with your friends or subscribe to my blog so you won't miss any future postings. Thanks for reading.

GitHub | Twitter | Blog | LinkedIn

Software developer specializing in frontend development and open-source

If you read this far, thank the author to show them you care. Say Thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

CSS Tutorial

  • CSS Tutorial
  • CSS - Introduction
  • CSS - Syntax
  • CSS - Selectors
  • CSS - Inclusion
  • CSS - Measurement Units
  • CSS - Colors
  • CSS - Backgrounds
  • CSS - Fonts
  • CSS - Images
  • CSS - Links
  • CSS - Tables
  • CSS - Borders
  • CSS - Border Block
  • CSS - Border Inline
  • CSS - Margins
  • CSS - Lists
  • CSS - Padding
  • CSS - Cursor
  • CSS - Outlines
  • CSS - Dimension
  • CSS - Scrollbars
  • CSS - Inline Block
  • CSS - Dropdowns
  • CSS - Visibility
  • CSS - Overflow
  • CSS - Clearfix
  • CSS - Float
  • CSS - Arrows
  • CSS - Resize
  • CSS - Quotes
  • CSS - Order
  • CSS - Position
  • CSS - Hyphens
  • CSS - Hover
  • CSS - Display
  • CSS - Focus
  • CSS - Translate
  • CSS - Height
  • CSS - Hyphenate Character
  • CSS - Width
  • CSS - Opacity
  • CSS - Z-Index
  • CSS - Bottom
  • CSS - Navbar
  • CSS - Overlay
  • CSS - Forms
  • CSS - Align
  • CSS - Icons
  • CSS - Image Gallery
  • CSS - Comments
  • CSS - Loaders
  • CSS - Attr Selectors
  • CSS - Combinators
  • CSS - Box Model
  • CSS - Counters
  • CSS - Writing Mode
  • CSS - Unicode-bidi
  • CSS - min-content
  • CSS - Inset
  • CSS - Isolation
  • CSS - Overscroll
  • CSS - Justify Items
  • CSS - Justify Self
  • CSS - Tab Size
  • CSS - Pointer Events
  • CSS - Place Content
  • CSS - Place Items
  • CSS - Place Self
  • CSS - Max Block Size
  • CSS - Min Block Size
  • CSS - Mix Blend Mode
  • CSS - Max Inline Size
  • CSS - Min Inline Size
  • CSS - Offset
  • CSS - Accent Color
  • CSS - User Select
  • CSS Advanced
  • CSS - Grid Layout
  • CSS - Flexbox
  • CSS - Positioning
  • CSS - Layers
  • CSS - Pseudo Classes
  • CSS - Pseudo Elements
  • CSS - @ Rules
  • CSS - Text Effects
  • CSS - Media Types
  • CSS - Paged Media
  • CSS - Aural Media
  • CSS - Printing
  • CSS - Layouts
  • CSS - Validations
  • CSS - Image Sprites
  • CSS - Important
  • CSS - Data Types
  • CSS3 Tutorial
  • CSS3 - Tutorial
  • CSS - Rounded Corner
  • CSS - Border Images
  • CSS - Multi Background
  • CSS - Color
  • CSS - Gradients
  • CSS - Box Shadow
  • CSS - Box Decoration Break
  • CSS - Caret Color
  • CSS - Text Shadow
  • CSS - 2d transform
  • CSS - 3d transform
  • CSS - Transition
  • CSS - Animation
  • CSS - Multi columns
  • CSS - User Interface
  • CSS - Box Sizing
  • CSS - Tooltips
  • CSS - Buttons
  • CSS - Pagination
  • CSS - Variables
  • CSS - Media Queries
  • CSS - Functions
  • CSS - Math Functions
  • CSS - Masking
  • CSS - Shapes
  • CSS - Style Images
  • CSS - Specificity
  • CSS - Custom Properties
  • CSS Responsive
  • CSS RWD - Introduction
  • CSS RWD - Viewport
  • CSS RWD - Grid View
  • CSS RWD - Media Queries
  • CSS RWD - Images
  • CSS RWD - Videos
  • CSS RWD - Frameworks
  • CSS References
  • CSS - Questions and Answers
  • CSS - Quick Guide
  • CSS - References
  • CSS - Color References
  • CSS - Web browser References
  • CSS - Web safe fonts
  • CSS - Units
  • CSS - PX to EM converter
  • CSS - Color Chooser & Animation
  • CSS Resources
  • CSS - Useful Resources
  • CSS - Discussion
  • Selected Reading
  • UPSC IAS Exams Notes
  • Developer's Best Practices
  • Questions and Answers
  • Effective Resume Writing
  • HR Interview Questions
  • Computer Glossary

CSS - Navigation Bar

A navigation bar is a section of a graphical user interface (GUI) that helps users navigate through a website, app, or other software. It is essential for users to quickly and easily navigate to the content they are looking for.

The navigation bar can be horizontal or vertical, that contains links to important pages or features.

Navbars can also contain other elements, such as the logo of the website or app, search bar, or social media icons. Navbars can be styled using CSS to change their appearance.

CSS Horizontal Navbar

Following example shows a horizontal navigation bar, which is the most common type of navigation bar displayed across the top of a web page as shown below −

CSS Vertical Navbar

A vertical navigation bar is also known as a sidebar menu. It is typically positioned on the left or right side of the screen.

Here is an example −

CSS Dropdown Navbar

A dropdown navbar is a navigation bar with a drop-down menu that appears when a user hovers over a link. Dropdown menus are a way to show a list of related items in a small space.

CSS Fixed Navbar

A fixed navbar is a navigation bar that sticks to the top of the screen when the user scrolls down the page. To make a navbar fixed, you can use the position: fixed property.

CSS Sticky Navbar

You can use the position: sticky property to create a sticky navbar, which will stay at the top of the screen even when the user scrolls down the page.

Divider Lines for Navbar

You can also add a divider line between the links in the navbar using the border-right property as shown below −

Fixed Vertical Navbar

The following example demonstrates how the position: fixed property can be used to create a fixed vertical navbar, which ensures that the navbar stays on the left side of the screen, even when the user scrolls down the page.

  • CSS Frameworks
  • JS Frameworks
  • Web Development

Related Articles

  • Solve Coding Problems
  • How to create multicolored text in a web page using HTML and CSS ?
  • How to create Chess pattern background using HTML and CSS ?
  • How to create a Portfolio Gallery using HTML and CSS ?
  • HTML and CSS Templates
  • Design a Tribute Page using HTML and CSS
  • How to Create Text Color Animation using HTML and CSS ?
  • How to create text-reveal effect using HTML and CSS ?
  • Design an Event Webpage using HTML and CSS
  • How to Create a Transparent button using HTML and CSS ?
  • How to Add Image in Text Background using HTML and CSS ?
  • How to change the color of horizontal line (hr element) using CSS ?
  • How to create a smooth scrolling effect using CSS ?
  • Create a Tooltip Button Animation using HTML and CSS
  • Design a calendar using HTML and CSS
  • How to create a Responsive Inline Form using CSS ?
  • Design a web page using HTML and CSS
  • How to Set Color of Progress Bar using HTML and CSS ?
  • How to Draw a Semi-Circle using HTML and CSS ?
  • Design a Contact us Page using HTML and CSS

How to create a Horizontal Navigation Bar in HTML and CSS?

In this article, we will try to create a navigation bar horizontally. To understand this article, we need to know some basics of HTML and CSS.

  • First, create a <nav> element with <ul> and <li> for navigation links.
  • Use CSS flex for a horizontal layout, sticky positioning, and background styling.
  • Apply styling for text color, spacing, and alignment.
  • Add hover effects to enhance interactivity, like changing link colors.
  • Include optional elements (e.g., search bar) and style for consistency.
  • Consider media queries for responsiveness, and adjusting styles for different screen sizes.

Example: In this example, we will create a horizontal navigation bar using HTML and CSS.

Screenshot-2023-12-29-171431

Please Login to comment...

  • Web Technologies
  • Web Templates
  • pankaj_gupta_gfg
  • Apple Sports: New Sports App that Gives Real-time Scores, Stats, and More
  • PhonePe's Indus Appstore: A Game-Changer in India’s Digital Journey
  • 12th Chemistry 2024 Exam Postponed by CISCE, New Date Announced
  • Reliance-Backed Hanooman: The Indian ChatGPT and A Multimodal AI Powerhouse for Indic Languages
  • Dev Scripter 2024 - Biggest Technical Writing Event By GeeksforGeeks

Improve your Coding Skills with Practice

 alt=

What kind of Experience do you want to share?

  • PHP / MYSQL Tutorials
  • PHP Tutorials
  • HTML / CSS Tutorials
  • jQuery Tutorials
  • Other Tutorials
  • Web Hosting
  • PSD To HTML
  • PSD To WordPress
  • W3C Validation
  • Coming Soon HTML Template

Simple Navigation Bar with HTML / CSS

In this tutorial i am going to show you how to Simple Navigation Bar with HTML / CSS. The easiest ways is to use a simple unordered list as your HTML structure and then style it using CSS. With the right styling you can even achieve some creative effects Let’s get right into the code and build a simple menu.

The structure of the menu is just an unordered list with links inside each of the list items.

Nothing really exceptional to that list. You would naturally add real URLs to your web pages inside the href attribute. The only thing I added was a class of ‘nav’ just so we can refer to the menu later in css. The code as we have it now will look like:

The HTML only menu is certainly workable and I’ve used something as simple in sites before. What we’re after here is a little something more so let’s dress it up a little with some css.

Complete CSS code

The complete code for our simple menu is:

Here is how it looks after applying css style.

If you’re beginner in css, I would recommend you to start learning CSS here

  • HTML / CSS Tutorials (5)
  • HTML Tutorials (3)
  • jQuery Tutorials (2)
  • Other Tutorials (2)
  • PHP / MYSQL Tutorials (4)
  • PHP Tutorials (9)

PHP Turorials, HTML Tutorials, PSD to HTML Service, PSD to Wordpress Service, W3C Validation Service and Quality Web Hosting online.

  • Entries (RSS)
  • Comments (RSS)

How TO - Navbar with Icons

Learn how to create a responsive navigation menu with icons, using CSS.

Navigation Bar With Icons

Try it Yourself »

Create A Responsive Navbar with Icons

Step 1) add html:, step 2) add css:.

Tip: Go to our CSS Navbar Tutorial to learn more about navigation bars.

Tip: If you want to create a navigation bar that only contains icons, read our How To - Icon Bar Tutorial .

Get Certified

COLOR PICKER

colorpicker

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

[email protected]

Top Tutorials

Top references, top examples, get certified.

COMMENTS

  1. CSS Navigation Bar

    About Horizontal Home News Contact About Home News Contact About Navigation Bars Having easy-to-use navigation is important for any web site. With CSS you can transform boring HTML menus into good-looking navigation bars. Navigation Bar = List of Links A navigation bar needs standard HTML as a base.

  2. How To Create a Top Navigation Bar

    Create A Top Navigation Bar Step 1) Add HTML: Example <div class="topnav"> <a class="active" href="#home"> Home </a> <a href="#news"> News </a> <a href="#contact"> Contact </a> <a href="#about"> About </a> </div> Step 2) Add CSS: Example /* Add a black background color to the top navigation */ .topnav { background-color: #333; overflow: hidden; }

  3. How to Build a Responsive Navigation Bar Using HTML and CSS

    1. Simple It should be clear and easy to read. Instead of cluttering the navbar with links to every page, you should go for the broader categories of your site. Afterward, you can add sub-menus as a dropdown, if necessary. 2. Noticeable A simple responsive navigation bar shouldn't be boring at all.

  4. Learn How to Build Responsive Navigation Bar with HTML, CSS, and

    Step 1 (HTML structure) Create the complete HTML structure. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Navigation Bar</title> </head> <body> </body> </html> Remember, all the content of a web page is enclosed within the <body> element.

  5. How to Build a Navigation Bar

    Navigation Bars are mostly made up of <ul> lists that are horizontally arranged and styled. While styling the navigation bars, it's common to remove the extra spacing created by the <ul> and <li> tags as well as the bullet points that are automatically inserted: list-style-type: none; margin: 0px; padding: 0px; Example:

  6. Creating a Responsive Navbar with HTML, CSS, and JavaScript

    In this tutorial, we'll create a responsive navbar that works on both mobile and desktop, using nothing but HTML, CSS, and JavaScript. That's right—no CSS frameworks needed! We'll also ensure that it remains accessible to users of assistive technologies. Skip table of contents Table of Contents What We're Building Responsive Navbar HTML

  7. Navigation Bar

    To call the navbar, you will need to call <nav class="navbar"> (the class is called "navbar"). <li>, called lists, are sections of the navigation bar. <a href="link">, which are links to the other location (s), go inside the list. For example: <li> <a href="link"> Link One </a> </li> Exercise

  8. How To Create a Responsive HTML Navigation Bar?

    In this HTML Navigation Bar article, we focus on navigating between web pages using the navigation bar. We will also add a little bit of CSS to make the webpage look and feel good. In this article, you will get to learn to code and work on an HTML web application along with us.

  9. CSS Navigation Bar: The Complete Guide

    This tutorial will discuss, with examples, how to create a navigation bar in HTML and how to style a navigation bar using CSS. Navigation Bar Structure. A navigation bar is a list of links in HTML. Before we can style a navigation bar using CSS, we need to define an HTML list with the links we want to include in our navigation bar.

  10. How to Build a Responsive Navigation Bar with a Dropdown Menu using

    Step 1 - Add the HTML Markup For brevity's sake, we'll be using an icon library called boxicons to import certain icons for this navbar. I highly recommend using inline SVGs instead. To make use of this library, insert the snippet below in the head of your HTML file:

  11. How To Create a Responsive Navbar Using HTML & CSS

    #navbar #responsivenavbar #css In this tutorial, we will be building a responsive navbar using HTML and CSS(navigation bar in html and css). This navbar will...

  12. Navbar CSS Tutorial: 3 Ways to Create a Navigation Bar with Flexbox

    This free design and web development course will use Flexbox and basic HTML to create 3 different navbar designs. You'll see some examples of how Flexbox pro...

  13. How to Create A Navigation Bar using HTML and CSS

    Learn how to create a navigation bar using HTML and CSS only.create a simple navigation bar in just 3 minutes.Source Code: https://drive.google.com/file/d/1t...

  14. CSS

    CSS Navigation Bar. A navigation bar is a section of a graphical user interface (GUI) that helps users navigate through a website, app, or other software. It is essential for users to quickly and easily navigate to the content they are looking for. The navigation bar can be horizontal or vertical, that contains links to important pages or features.

  15. How to create a Horizontal Navigation Bar in HTML and CSS?

    Include optional elements (e.g., search bar) and style for consistency. Consider media queries for responsiveness, and adjusting styles for different screen sizes. Example: In this example, we will create a horizontal navigation bar using HTML and CSS.

  16. Simple Navigation Bar with HTML / CSS

    </ul> Nothing really exceptional to that list. You would naturally add real URLs to your web pages inside the href attribute. The only thing I added was a class of 'nav' just so we can refer to the menu later in css. The code as we have it now will look like:

  17. W3.CSS Navigation

    </div> Try It Yourself » Responsive Navigation The w3-mobile class makes any bar elements responsive (horizontal on large screens and vertical on small). Medium and large screens: Home Link 1 Link 2 Small screens: Home Link 1 Link 2 Example <div class="w3-bar w3-black"> <a href="#" class="w3-bar-item w3-button w3-mobile"> Home </a>

  18. Create a Simple Navigation Bar Using HTML and CSS

    Navigation Bar Using HTML & CSS | HTML & CSS Tutorial | Navigation Bar Design | Navigation Bar | html css website | website navigation bar | Website Header Design Using...

  19. Responsive Navigation Bar Tutorial: HTML, CSS, JavaScript

    08:28. Add menu and close icons to the navigation bar using SVG files, adjust their size and color with CSS, and use JavaScript to make the menu icon open the sidebar. 📝. 10:24. Call the function show sidebar, create a script tag, define the function, select the sidebar element, and display it using CSS selectors, change display property to ...

  20. How To Create a Responsive Top Navigation Menu

    Responsive Navigation Bar Resize the browser window to see how the responsive navigation menu works: Home News Contact About Try it Yourself » Create A Responsive Topnav Step 1) Add HTML: Example <!-- Load an icon library to show a hamburger menu (bars) on small screens -->

  21. CSS Navigation Bar

    Example explained: list-style-type: none; - Removes the bullets. A navigation bar does not need list markers; Set margin: 0; and padding: 0; to remove browser default settings; The code in the example above is the standard code used in both vertical, and horizontal navigation bars, which you will learn more about in the next chapters.

  22. How To Create a Responsive Navigation Menu with Icons

    Create A Responsive Navbar with Icons Step 1) Add HTML: Example <!-- Load an icon library --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7./css/font-awesome.min.css"> <div class="navbar"> <a class="active" href="#"><i class="fa fa-fw fa-home"></i> Home </a>