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>