Creating Navigation Menus in HTML


How to Create Navigation Menus in HTML

A navigation menu helps users move around your website. It's typically built using the <nav>, <ul>, <li>, and <a> tags.


1. Basic Horizontal Navigation Menu

<nav>
  <ul style="list-style: none; display: flex; gap: 15px;">
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

2. Vertical Navigation Menu

<nav>
  <ul style="list-style: none; padding: 0;">
    <li><a href="home.html">Home</a></li>
    <li><a href="blog.html">Blog</a></li>
    <li><a href="portfolio.html">Portfolio</a></li>
  </ul>
</nav>

3. Styled Navigation Menu with Background

<nav style="background-color: #333; padding: 10px;">
  <ul style="list-style: none; display: flex; gap: 20px; margin: 0; padding: 0;">
    <li><a href="home.html" style="color: white; text-decoration: none;">Home</a></li>
    <li><a href="about.html" style="color: white; text-decoration: none;">About</a></li>
    <li><a href="contact.html" style="color: white; text-decoration: none;">Contact</a></li>
  </ul>
</nav>

4. Using <nav> for Semantic HTML

Always wrap your menu in the <nav> tag for better accessibility and SEO.

<nav>
  <a href="index.html">Home</a> |
  <a href="about.html">About</a> |
  <a href="services.html">Services</a>
</nav>

Best Practices

  • Use the <nav> tag to define navigation sections
  • Use lists (<ul> and <li>) for structured menus
  • Style links for hover/focus states with CSS
  • Use semantic tags for SEO and screen readers
  • Keep navigation consistent across all pages
  • Make sure navigation is keyboard accessible
  • Use descriptive link text (avoid "click here")
  • Consider mobile responsiveness in your design
  • Highlight the current page in the navigation