Home » All Lessons » Navigation in an Unordered List

LESSON 6.3

Navigation in an Unordered List

Build a clean horizontal nav bar from a simple list

Learn how to structure a navigation menu using an HTML unordered list and transform it from a bulleted vertical list into a clean horizontal nav bar with CSS.

💡 The Concept

A website navigation menu is fundamentally a list of links. An unordered list is the right HTML structure for this because it signals to browsers, screen readers, and search engines that the links belong together as a group. CSS then handles the visual presentation. This lesson covers the HTML structure and basic styling. Navigation is not truly complete without hover and active states, which are covered in the next lesson: CSS Pseudo-Classes for Navigation.

Here is the basic HTML structure for a navigation menu:

<nav>
   <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="menu.html">Menu</a></li>
      <li><a href="directions.html">Directions</a></li>
      <li><a href="contact.html">Contact</a></li>
   </ul>
</nav>

When you first preview this in the browser, you get a bulleted vertical list of blue underlined links. Here is the CSS that transforms it into a horizontal navigation bar:

nav ul {
   list-style-type: none;    /* removes the bullets */
}
nav a {
   text-decoration: none;    /* removes the underlines */
   padding-right: 10px;      /* spaces the links apart */
}
nav li {
   display: inline;          /* places items side by side */
}

The exercise below walks through each of these steps one at a time so you can see the effect of each change.

🎬 Video Demonstration

This video walks through building a vertical and horizontal navigation menu using an unordered list.

Exercise: Try It Yourself

Step 1. Open JSFiddle.

Step 2. Convert the starting code below to a proper ul / li structure. Add <ul> and <li> tags around the links and run it in JSFiddle.

<nav>
  <a href="index.html">Home</a>
  <a href="menu.html">Menu</a>
  <a href="directions.html">Directions</a>
  <a href="contact.html">Contact</a>
</nav>

JSFiddle showing the HTML for a navigation — The raw HTML navigation: a bulleted vertical list of links.

At this stage it does not look like a menu — it looks like a bulleted list of links.

Step 3. Use list-style-type: none on the ul to remove the bullets, and text-decoration: none on the anchor tags to remove the underlines:

nav ul {
   list-style-type: none;
}
nav a {
   text-decoration: none;
}

JSFiddle demonstrating how to remove the bullets from a list — Bullets and underlines removed.

This is what a vertical navigation looks like — bullets and underlines removed, but the links still stack vertically.

Step 4. By default, li elements are block-level, so each one sits on its own line. Set display: inline to place them side by side, and add right padding to space them out:

nav li {
   display: inline;
}
nav a {
   padding-right: 10px;
}

JSFiddle demonstrating how to make a horizontal navigation — The list items now sit side by side in a horizontal row.

Now it looks like a navigation bar.

Save this JSFiddle. We have more work to do on this navigation. In the next lesson, we will add pseudo-class styling to make the links respond to hover and click.

💡 If you are making a website template: Convert the navigation in your website template from plain links to an unordered list. See the full website template guide for reference.

❓ Frequently Asked Questions

Why put the navigation links in a ul instead of just using plain anchor tags?

Plain anchor tags in a row work visually, but they carry no semantic meaning — the browser, screen reader, and search engine just see a collection of unrelated links. Wrapping them in a ul inside a nav element tells those tools that the links are a navigation group. Screen readers will announce how many items are in the list, which helps users who cannot see the visual layout. Search engines also use this structure to better understand your site.

Why use a nav element around the list?

The nav element is a semantic landmark that specifically marks a block of navigation links. A div would work visually, but nav communicates purpose. Screen readers use landmarks to let users jump directly to navigation without reading through other content first. You do not need nav around every group of links — just the main navigation menus on the page.

What is the difference between display: inline and display: inline-block?

Both place elements side by side, but inline-block lets you set top and bottom padding and a specific width, while inline does not. For simple horizontal navigation, display: inline works fine. If you need to give each nav item a consistent height, background color, or vertical padding — like styled buttons — inline-block gives you more control. A later lesson will also cover using flexbox on the ul itself, which is a more modern approach to horizontal layouts.

Does the navigation have to be horizontal?

No. Vertical navigation is common for sidebar menus and mobile layouts. The unstyled list is already vertical — that is the default. You only add display: inline when you want a horizontal bar. Many sites use horizontal navigation on desktop and switch to vertical (or a hamburger menu) on mobile using media queries. That technique is covered in later lessons.

★ Key Takeaways

Navigation menus are really just styled lists. This lesson showed you how to take an unordered list and turn it into a horizontal navigation bar using CSS. Next, you will add CSS pseudo-classes to your navigation to create hover and active states. Those states make navigation feel interactive and polished.

Next Lesson: CSS Pseudo-Classes for Navigation

← Back to Links and Navigation Lessons

← Back to All Lessons

Google Ads

The costs of this website are partially offset by revenue from Google Ads.