Navigation

Navigation is a set of actions that guides a user throughout the app or website, enabling them to interact with the product.

Top Navigation

This is an example of navigation bar at the top, usually placed in the header section of the web page.
Use the class top-nav in the <nav> tag and top-nav-links in the <ul> tag.


<nav class="top-nav">
    <h1>yourBrandName</h1>
    <ul class="top-nav-links">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
</nav>

Side Bar

This is an example of navigation bar on either the left or the right side of the web page, usually used to navigate through multiple pages.


<nav>
    <ul>
        <h1>Title</h1>
        <li><a href="#">Page1</a></li>
        <li><a href="#">Page2</a></li>
        <li><a href="#">Page3</a></li>
        <li><a href="#">Page4</a></li>
    </ul>
</nav>

Sub-navigation

Sub-navigation refers to the navigation UI that helps users access lower-level categories in the site's information architecture.

Use the class sub-navbar in the <nav> tag, subnav in the sub-menu container tags. Use class subnavbtn in the button tag and finally subnav-content in the menu list.


<nav class="sub-navbar">
    <button class="subnavbtn"><a href="#">Home</a></button>
    <div class="subnav">
        <button class="subnavbtn">About 
            <span class="material-icons material-icons-outlined">expand_more</span>
        </button>
        <ul class="subnav-content">
            <li><a href="#">Location</a></li>
            <li><a href="#">Team</a></li>
            <li><a href="#">Careers</a></li>
        </ul>
    </div>
    <div class="subnav">
        <button class="subnavbtn">Projects 
            <span class="material-icons material-icons-outlined">expand_more</span></button>
        <ul class="subnav-content">
            <li><a href="#">Project 1</a></li>
            <li><a href="#">Project 2</a></li>
            <li><a href="#">Project 3</a></li>
        </ul>
    </div>
</nav>

Hamburger

The hamburger menu, or the hamburger icon, is the button in websites and apps that typically opens up into a side menu or navigation drawer. Change the size of the screen to check the links change into a hamburger.

Use the class hamburger-navbar in the <nav> tag and both the id and class as ham-list in the <ul> tag.


<nav class="hamburger-navbar">
    <h1>yourBrandName</h1>                       
    <ul id="ham-list" class="ham-list">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
    <button class="hamburger-icon-btn">
        <span class="material-icons material-icons-outlined md-36">
            menu
        </span>
    </button>
</nav>

< Modals Ratings >