Create A Bottom Navigation Menu using HTML and CSS

Last Updated : 26 Dec, 2023

This article will show you how to create a bottom navigation menu using HTML and CSS. The navigation menu is an essential component in modern web design. It allows users to navigate through a website easily.

Here, we use HTML to create the structure of the Bottom Navigation menu, and CSS add styles to the elements.

Example 1: In this example, we will create a simple responsive bottom navigation menu.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">

    <title>
        Bottom Navigation with HTML and CSS
    </title>

    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

    <style>
        body {
            margin: 0;
            font-family: 'Arial', sans-serif;
        }

        .container {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .bottom-nav {
            background-color: #4b8b01;
            display: flex;
            justify-content: space-around;
            align-items: center;
            position: fixed;
            bottom: 0;
            width: 100%;
        }

        .bottom-nav a {
            color: #fff;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
        }

        .bottom-nav a:hover {
            background-color: #2a93d5;
        }

        @media screen and (max-width: 600px) {
            .bottom-nav {
                flex-direction: column;
                align-items: stretch;
            }

            .bottom-nav a {
                flex: 1;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <nav class="bottom-nav">
            <a href="#home">Home</a>
            <a href="#courses">Courses</a>
            <a href="#jobs">Jobs</a>
            <a href="#news">News</a>
            <a href="#contact">Contact</a>
            <a href="#about">About</a>
        </nav>
    </div>
</body>

</html>

Output:

Example 2: In this example, we will create a bottom navigation menu with icons.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    
    <title>
        Bottom Navigation with Icons
    </title>
    
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

    <style>
        body {
            margin: 0;
            font-family: 'Arial', sans-serif;
        }

        .container {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .bottom-nav {
            background-color: #4b8b01;
            display: flex;
            justify-content: space-around;
            align-items: center;
            position: fixed;
            bottom: 0;
            width: 100%;
        }

        .bottom-nav a {
            color: #fff;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
        }

        .bottom-nav a:hover {
            background-color: #2a93d5;
        }

        .bottom-nav a .icon {
            margin-right: 8px;
        }
    </style>
</head>

<body>
    <div class="container">
        <nav class="bottom-nav">
            <a href="#home">
                <i class="fas fa-home icon"></i>Home
            </a>
            <a href="#courses">
                <i class="fas fa-graduation-cap icon"></i>Courses
            </a>
            <a href="#jobs">
                <i class="fas fa-briefcase icon"></i>Jobs
            </a>
            <a href="#news">
                <i class="fas fa-newspaper icon"></i>News
            </a>
            <a href="#contact">
                <i class="fas fa-envelope icon"></i>Contact
            </a>
            <a href="#about">
                <i class="fas fa-info-circle icon"></i>About
            </a>
        </nav>
    </div>
</body>

</html>

Output:

vkash8574

Improve

Article Tags :

Create A Bottom Navigation Menu using HTML and CSS

Similar Reads

Thank You!

What kind of Experience do you want to share?