HTML

The <nav> provides navigation links for users to visit by clicking on a link.

HTML <nav> tag


HTML nav represents a section and provides navigation links for resources.

nav is generally placed at the top portion of a page as a horizontal navigation, but vertical navigation can also be placed anywhere in the page.

Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.

Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML Nav Example</title>
    <style>
        nav {
            display: flex;
            flex-wrap: wrap;
        }
        nav a {
            text-decoration: none;
            display: block;
            padding: 15px 25px;
            text-align: center;
            background-color: #9a9a9a;
            color: #000;
            margin: 0;
            font-family: sans-serif;
        }
        nav a:hover {
            background-color: #00f;
            color: #ffffff;
        }
    </style>
</head>
<body>
    <h1>HTML Nav Example</h1>
    <nav>
        <a href="https://www.w3context.com/html/">HTML</a>
        <a href="https://www.w3context.com/css/">CSS</a>
        <a href="https://www.w3context.com/js/">JavaScript</a>
        <a href="https://www.w3context.com/bs5/">BootStrap5</a>
        <a href="https://www.w3context.com/jquery/">jQuery</a>
    </nav>
</body>
</html>
Try it Now »

Click on the "Try it Now" button to see how it works.


Sample Code

Copy each file contents and paste it to your own project and run to see the final output

Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML Nav tag Dropdown Example</title>
    <style>
        nav ul ul {
            display: none;
        }
        nav ul li:hover>ul {
            display: block;
        }
        nav ul:after {
            content: "";
            clear: both;
            display: block;
        }
        nav ul li {
            float: left;
            position: relative;
            list-style-type: none;
        }
        nav ul li:hover {
            background: rgba(0, 0, 255, 0.67);
        }
        nav ul li:hover a {
            color: #fff;
        }
        nav ul li a {
            display: block;
            padding: 20px 30px;
            color: #ffffff;
            text-decoration: none;
            background-color: #3a3a3a;
            font-family: sans-serif;
        }
        nav ul li a:hover {
            color: #ffffff;
            background-color: rgba(0, 0, 255, 0.67);

        }
        nav ul ul {
            background: #5f6975;
            padding: 0;
            position: absolute;
            top: 100%;
        }
        nav ul ul li {
            float: none;
            position: relative;
        }
        nav ul ul li a {
            padding: 15px 10px;
            color: #ffffff;
            /*text-transform: uppercase;*/
        }
        nav ul ul li a:hover {
            background: rgba(0, 0, 255, 0.67);
        }
    </style>
</head>
<body>
    <h1>HTML Nav tag Dropdown Example</h1>
    <nav>
        <ul>
            <li>
                <a href="https://www.w3context.com/">Home</a>
            </li>
            <li>
                <a href="https://www.w3context.com/html/">HTML</a>
                <ul>
                    <li>
                        <a href="https://www.w3context.com/html/">HTML Bacis</a>
                    </li>
                    <li>
                        <a href="https://www.w3context.com/html/">HTML Example</a>
                    </li>
                    <li>
                        <a href="https://www.w3context.com/html/">HTML Quizes</a>
                    </li>
                    <li>
                        <a href="https://www.w3context.com/html/">HTML Exercises</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="https://www.w3context.com/css/">CSS</a>
                <ul>
                    <li>
                        <a href="https://www.w3context.com/css/">CSS Bacis</a>
                    </li>
                    <li>
                        <a href="https://www.w3context.com/css/">CSS Example</a>
                    </li>
                    <li>
                        <a href="https://www.w3context.com/css/">CSS Quizes</a>
                    </li>
                    <li>
                        <a href="https://www.w3context.com/css/">CSS Exercises</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="https://www.w3context.com/js/">JavaScript</a>
                <ul>
                    <li>
                        <a href="https://www.w3context.com/js/">JavaScript Bacis</a>
                    </li>
                    <li>
                        <a href="https://www.w3context.com/js/">JavaScript Example</a>
                    </li>
                    <li>
                        <a href="https://www.w3context.com/js/">JavaScript Quizes</a>
                    </li>
                    <li>
                        <a href="https://www.w3context.com/js/">JavaScript Exercises</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="https://www.w3context.com/jquery/">jQuery</a>
                <ul>
                    <li>
                        <a href="https://www.w3context.com/jquery/">jQuery Bacis</a>
                    </li>
                    <li>
                        <a href="https://www.w3context.com/jquery/">jQuery Example</a>
                    </li>
                    <li>
                        <a href="https://www.w3context.com/jquery/">jQuery Quizes</a>
                    </li>
                    <li>
                        <a href="https://www.w3context.com/jquery/">jQuery Exercises</a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</body>
</html>
Try it Now »

Click on the "Try it Now" button to see how it works.