HTML <nav> Element

Publish in HTML Tutorial el 25/05/2025 13:51

The <nav> Element: Navigation for Your Website

The HTML <nav> element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. This is the semantic container for major navigation blocks like menus, tables of contents, or indexes.

Key characteristics of <nav>:

Semantic HTML5 element specifically for navigation
Typically contains a list of links (but can contain other content)
Not necessary for all links - use for major navigation blocks
Improves accessibility and SEO when used properly

Basic Syntax

Here's the basic structure of a <nav> element:

Examples of <nav> Usage

Example 1: Basic Horizontal Navigation

A simple horizontal navigation menu with inline styling:

Play Code

<nav style="background: #f8f9fa; padding: 1rem;">
  <a href="#home" style="margin-right: 1rem;">Home</a>
  <a href="#news" style="margin-right: 1rem;">News</a>
  <a href="#contact" style="margin-right: 1rem;">Contact</a>
  <a href="#about">About</a>
</nav>

Example 2: Vertical Navigation Menu

A vertical navigation menu with list items:

Play Code

<nav style="width: 200px;">
  <ul style="list-style: none; padding: 0;">
    <li style="padding: 0.5rem; background: #e9ecef;"><a href="#dashboard">Dashboard</a></li>
    <li style="padding: 0.5rem;"><a href="#profile">Profile</a></li>
    <li style="padding: 0.5rem; background: #e9ecef;"><a href="#messages">Messages</a></li>
    <li style="padding: 0.5rem;"><a href="#settings">Settings</a></li>
  </ul>
</nav>

Example 3: Navigation with Dropdown (JavaScript)

A navigation menu with JavaScript-powered dropdown functionality:

Play Code

<nav id="dropdownNav" style="background: #343a40; padding: 1rem;">
  <a href="#home" style="color: white; margin-right: 1rem;">Home</a>
  <div style="display: inline-block; position: relative;">
    <a href="#services" style="color: white; margin-right: 1rem;" 
       onmouseover="document.getElementById('servicesDropdown').style.display='block'">Services</a>
    <div id="servicesDropdown" style="display: none; position: absolute; background: white; padding: 1rem;"
         onmouseout="this.style.display='none'">
      <a href="#web" style="display: block; color: black;">Web Design</a>
      <a href="#seo" style="display: block; color: black;">SEO</a>
      <a href="#hosting" style="display: block; color: black;">Hosting</a>
    </div>
  </div>
  <a href="#contact" style="color: white;">Contact</a>
</nav>

Example 4: Responsive Navigation with JavaScript Toggle

A responsive navigation that collapses on small screens with a toggle button:

Play Code

<nav style="background: #007bff; padding: 1rem;">
  <button onclick="toggleMenu()" style="background: none; border: none; color: white; font-size: 1.5rem;">☰</button>
  <div id="mobileNav" style="display: none;">
    <a href="#home" style="color: white; display: block; padding: 0.5rem;">Home</a>
    <a href="#about" style="color: white; display: block; padding: 0.5rem;">About</a>
    <a href="#services" style="color: white; display: block; padding: 0.5rem;">Services</a>
    <a href="#contact" style="color: white; display: block; padding: 0.5rem;">Contact</a>
  </div>
</nav>

<script>
function toggleMenu() {
  const menu = document.getElementById('mobileNav');
  menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
}
</script>

Example 5: Breadcrumb Navigation

A semantic breadcrumb navigation to show the user's location in the site hierarchy:

Play Code

<nav aria-label="Breadcrumb">
  <ol style="list-style: none; padding: 0; display: flex;">
    <li style="margin-right: 0.5rem;"><a href="/">Home</a></li>
    <li style="margin-right: 0.5rem;">></li>
    <li style="margin-right: 0.5rem;"><a href="/products">Products</a></li>
    <li style="margin-right: 0.5rem;">></li>
    <li>Current Page</li>
  </ol>
</nav>

Best Practices and Tips

Semantic Use: Only use <nav> for major navigation blocks, not for all groups of links.
Accessibility: Add ARIA labels when you have multiple navigation sections (e.g., aria-label="Main navigation").
Mobile First: Design your navigation to work well on mobile devices first.
Skip Links: Consider adding "skip to content" links for better accessibility.
Current Page: Visually indicate the current page in the navigation.