<navbar> tag

What is the Nav Element?

The <nav>...</nav> element is used to define a section of a webpage that contains important navigation links. These links help users move between different pages or sections of a website.

You can use the class="navbar" attribute in the <nav> element to identify and style the navigation bar using CSS. The name navbar is a class name, not a separate HTML element.

Syntax

<nav>
    Navigation Links
</nav>

Basic Structure of a Nav Element

<nav>
    <a href="/">Home</a>
    <a href="/html/">HTML</a>
    <a href="/css/">CSS</a>
</nav>

Example: Website Navigation Bar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Website Navigation</title>

    <!-- Defines the styles for the navigation bar and its links. -->
    <style>
        /* Styles the navigation bar. */
        .navbar {
            background-color: #134e4a;
            padding: 15px;
            text-align: center;
        }

        /* Styles the navigation links. */
        .navbar a {
            color: white;
            margin: 10px;
            text-decoration: none;
        }

        /* Changes the link color when the mouse hovers over it. */
        .navbar a:hover {
            color: #ff6666;
        }
    </style>
</head>

<body>

    <!-- Contains links to important website pages. -->
    <nav class="navbar" id="navbar">
        <a href="/">Home</a>
        <a href="/html/">HTML</a>
        <a href="/css/">CSS</a>
        <a href="/javascript/">JavaScript</a>
    </nav>

</body>
</html>

Type of Navigation Bars

Websites use different navigation patterns to help users find pages and move around a website. Below are six common navigation patterns with examples showing how to create them using HTML and CSS.

1. Horizontal Navigation Bar

A horizontal navigation bar displays links in a horizontal line. You can create it using the <nav> element and anchor (<a>) elements.

How to Create a Horizontal Navigation Bar Step by Step

Follow these steps to create a horizontal navigation bar using HTML and CSS.

1. First, add the <nav> element to create a navigation section.
2. Next, add <a> elements inside it to create links such as Home, HTML, CSS, and JavaScript.
3. Then, use the href attribute to set the destination of each link.
4. Next, use CSS to add a background color, space between links, and text colors.
5. Finally, save the file and open it in a browser to see the horizontal navigation bar.

Example:

<!-- The nav element groups the website navigation links. -->
<nav style="background-color:#134e4a; padding:15px; text-align:center;">

    <!-- The href attribute specifies the destination of each link. -->
    <a href="/" style="color:white; margin:10px; text-decoration:none;">Home</a>

    <a href="/html/tutorial" style="color:white; margin:10px; text-decoration:none;">HTML</a>

    <a href="/css/tutorial" style="color:white; margin:10px; text-decoration:none;">CSS</a>

    <a href="/javascript/tutorial" style="color:white; margin:10px; text-decoration:none;">JavaScript</a>

</nav>

Output:

Explanation:

• <nav> groups the navigation links.
• background-color sets the background color.
• padding adds space inside the navigation bar.
• text-align:center centers the links.
• text-decoration:none removes the underline from the links.

2.Vertical Navigation

A vertical navigation menu displays links one below another. You can use the display:block CSS property to place each link on a separate line.

Example:

<!-- Creates a container for the vertical navigation links. -->
<nav style="background-color:#f0f7f6; padding:12px; width:200px;">

    <!-- display:block places each link on a separate line. -->
    <a href="/" style="display:block; padding:10px; color:#134e4a; text-decoration:none;">Home</a>

    <a href="/html/tutorial" style="display:block; padding:10px; color:#134e4a; text-decoration:none;">HTML Tutorial</a>

    <a href="/css/tutorial" style="display:block; padding:10px; color:#134e4a; text-decoration:none;">CSS Tutorial</a>

    <a href="/javascript/tutorial" style="display:block; padding:10px; color:#134e4a; text-decoration:none;">JavaScript Tutorial</a>

</nav>

Output:

Explanation:

• width:200px sets the width of the navigation container.
• display:block makes each link occupy its own line.
• padding:10px adds space around each link.
• color:#134e4a sets the link text color.

3.Dropdown Navigation

A dropdown menu displays additional navigation links when a user clicks a menu item. You can create a simple dropdown using the <details>, <summary>, and <a> elements with CSS.

Example:

<!-- CSS styles for the dropdown menu. -->
<style>
    /* Keeps the dropdown menu positioned relative to its container. */
    .dropdown {
        position:relative;
        display:inline-block;
    }

    /* Styles the clickable dropdown heading. */
    .dropdown summary {
        background-color:#134e4a;
        color:white;
        padding:12px;
        cursor:pointer;
        list-style:none;
    }

    /* Hides the dropdown links until the menu is opened. */
    .dropdown-menu {
        display:none;
        position:absolute;
        top:100%;
        left:0;
        min-width:180px;
        background-color:white;
        border:1px solid #ccc;
        z-index:10;
    }

    /* Displays the links when the details element is open. */
    .dropdown[open] .dropdown-menu {
        display:block;
    }

    /* Displays each dropdown link on a separate line. */
    .dropdown-menu a {
        display:block;
        padding:10px;
        color:#134e4a;
        text-decoration:none;
    }

    /* Changes the background color when a user hovers over a link. */
    .dropdown-menu a:hover {
        background-color:#fff7c2;
    }
</style>

<!-- Groups the dropdown menu inside the navigation section. -->
<nav aria-label="HTML tutorials">

    <!-- The details element opens and closes when clicked. -->
    <details class="dropdown">

        <!-- Clicking this heading opens or closes the menu. -->
        <summary>HTML Tutorials ▼</summary>

        <!-- Contains the links displayed in the dropdown menu. -->
        <div class="dropdown-menu">

            <a href="/html/links">HTML Links</a>

            <a href="/html/ordered-list">HTML Lists</a>

            <a href="/html/email-link">HTML Email Links</a>

        </div>

    </details>

</nav>

Output:

Explanation:

• <details> creates a section that can open and close.
• <summary> provides the clickable heading.
• class="dropdown-menu" identifies the container holding the dropdown links.
• position:absolute positions the menu below the heading.
• .dropdown[open] selects the dropdown when it is open.

4.Breadcrumb Navigation

Breadcrumb navigation shows users the path from the homepage to the current page. You can create it using links and separator symbols.

Example:

<!-- Shows the user's location within the website. -->
<nav aria-label="Breadcrumb">

    <!-- Link to the homepage. -->
    <a href="/">Home</a>

    <!-- Separates the breadcrumb items. -->
    <span aria-hidden="true"> &gt; </span>

    <!-- Link to the HTML tutorial section. -->
    <a href="/html/tutorial">HTML</a>

    <!-- Separates the section from the current page. -->
    <span aria-hidden="true"> &gt; </span>

    <!-- Identifies the current page; it is not a link. -->
    <span aria-current="page">Links</span>

</nav>

Output:

Explanation:

• <nav> groups the breadcrumb items.
• href specifies the destination of each link.
• > displays the greater-than symbol (>) as a separator.
• aria-current="page" identifies the current page for assistive technology.

5. Footer Navigation

Footer navigation displays useful links in the footer area of a webpage. You can create it by placing a <nav> element inside the <footer> element.

Example:

<!-- The footer contains the website's bottom content. -->
<footer style="background-color:#2c3e50; color:white; padding:20px; text-align:center;">

    <!-- Displays the website name. -->
    <h3>TutorialNest</h3>

    <!-- Groups important links in the footer. -->
    <nav aria-label="Footer navigation">

        <!-- Links to important website pages. -->
        <a href="/privacy-policy" style="color:white; margin:10px; text-decoration:none;">Privacy Policy</a>

        <a href="/terms" style="color:white; margin:10px; text-decoration:none;">Terms</a>

        <a href="/contact" style="color:white; margin:10px; text-decoration:none;">Contact Us</a>

    </nav>

    <!-- Displays copyright information. -->
    <p>&copy; 2026 TutorialNest. All rights reserved.</p>

</footer>

Output:

Explanation:

• <footer> defines the footer content.
• <nav> groups the footer navigation links.
• aria-label="Footer navigation" gives the navigation section an accessible name.
• © displays the copyright symbol (©).

6. Pagination Navigation

Pagination navigation helps users move between different pages of articles, search results, or other content. You can create it using anchor elements for page numbers and navigation controls.

Example:

<!-- Groups the pagination links. -->
<nav aria-label="Pagination">

    <!-- Goes to the previous page. This example assumes page 2 is current. -->
    <a href="?page=1">Previous</a>

    <!-- Links to page 1. -->
    <a href="?page=1">1</a>

    <!-- Marks page 2 as the current page. -->
    <a href="?page=2" aria-current="page">2</a>

    <!-- Links to page 3. -->
    <a href="?page=3">3</a>

    <!-- Goes to the next page. -->
    <a href="?page=3">Next</a>

</nav>

Output:

Explanation:

• ?page=1 is an example of a URL query string that identifies page 1.
• Previous and Next help users move between pages.
• aria-current="page" identifies the currently selected page.
• Your website must support these page URLs for pagination to work correctly.