HTML <nav>

23rd February 2020 | Christopher Pisani

The HTML element <nav> is used to hold a group of navigation links within the current document or another document in the same website. A navigation menu, table of contents or indexes are good examples to be used within this element.

Side menu example using the element <nav>

<!DOCTYPE HTML>
<html>
<head>
    <title>Title of the document</title>
</head>

<body>
    <style>
        header {
            width:100%;
            text-align:center;
        }
        nav {
            float:left;
            width:120px;
            border-right:1px solid lightgrey;
            border-bottom:1px solid lightgrey;
        }
        main {
            float:left;
            width:calc(100% - 161px);
            padding:0 20px;
        }
        .webLink {
            width:100%;
            padding:20px 0;
            text-align:center;
           float:left;
        }
    </style>
    <header>
        <h1> Example Website</h1>
       <hr>
    </header>
    <nav>
        <a class="webLink" href="#">Electrical</a>
        <a class="webLink" href="#">Plumbing</a>
        <a class="webLink" href="#">Garden</a>
    </nav>
    <main>
        <h2>Example page in website</h2>
        <p>
            This paragraph is, for example, purposes only.
        </p>
    </main>
</body>

</html>

Breadcrumps example of a navigation menu within the <nav> element

<style>
nav ol {
    list-style-type: none;
    padding-left: 0;
}

.breadcrumps {
    display: inline-block;
}

.breadcrumps a::after {
    display: inline-block;
    color: #000;
    content: '>';
    font-size: 80%;
    font-weight: bold;
    padding: 0 3px;
}
</style>

<h1>Breadcrumps example</h1>
<hr>

<nav>
    <ol>
        <li class="breadcrumps"><a href="#">Products</a></li>
        <li class="breadcrumps"><a href="#">Electrical</a></li>
        <li class="breadcrumps">Soffit Lamps</li>
    </ol>
</nav>

<hr>

<h2>Product Details:</h2>
<p>
    This paragraph is, for example, purposes only.
</p>

Available Attributes

No specific attributes are assigned for this element, other than the standard global attributes.