How to create navigation bar using <div> tag in HTML ?

Last Updated : 09 Feb, 2022

In this article, we will know to create the navigation bar using the <div> tag in HTML. The Navbar is a navigation header that contains the links to navigate to the different pages or sections of the site that helps to make the website interactive. The navbar is an important & fundamental component for any site format, as it represents the multiple data in an organized manner & allows to quickly access the most useful resources. The navbar can be implemented most commonly in the sidebar or header of the page or can be aligned either horizontally, vertically, fixed, or dynamic.

Syntax:

<div class="navbar">
   <div class="brand">
      <h3>GeeksforGeeks</h3>
    </div>
    <div class="menu">
       <a href="#">Tutorials</a>
       <a href="#">Student</a>
    </div>
</div>

Approach: We will create a div section & give a class name as navbar. Then we make two more div’s under the navbar-defined div, First child div is named brand class for logo, and the other child div defined menu for navigation. We have used the display flex property in the parent div navbar to align in inline. Then we make another parent div class that defines the body for more content.

Example: This example describes the navigation bar using HTML <div> tag.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width,  
                   initial-scale=1.0"> 
    <style> 
        * { 
            margin: 0; 
            padding: 0; 
        } 
  
        .navbar { 
            display: flex; 
            background-color: #0eb358; 
            font-size: 2rem; 
            height: 2.5rem; 
        } 
  
        .menu { 
            margin: 0 3rem; 
            justify-content: space-around; 
            font-family: 'Franklin Gothic Medium', 
                'Arial Narrow', 
                Arial, sans-serif; 
        } 
  
        .body { 
            display: flex; 
            background-color: aquamarine; 
        } 
  
        h3 { 
            color: #fff; 
        } 
  
        h4 { 
            font-size: 1.5rem; 
            padding: 0 1rem; 
            font-family: Arial, Helvetica, sans-serif; 
        } 
  
        p { 
            font-size: 1rem; 
            padding: 0 1rem; 
            font-family: cursive; 
        } 
  
        a { 
            text-decoration: none; 
            color: #fff; 
            padding: 0 4rem; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="navbar"> 
        <div class="brand"> 
            <h3>GeeksforGeeks</h3> 
        </div> 
        <div class="menu"> 
            <a href="#">Tutorials</a> 
            <a href="#">Student</a> 
            <a href="#">Jobs</a> 
            <a href="#">Courses</a> 
        </div> 
    </div> 
    <hr> 
    <div class="body"> 
        <div> 
            <h4>7 Best Tips To Speed Up Your Job</h4> 
            <p> 
                Hunting down a relevant job requires  
                proper techniques for showcasing your  
                potential to the employer. But with  
                the advent of COVID-19, it has become  
                a bit challenging and competitive to  
                reach out for your dream job. 
            </p> 
        </div> 
  
        <div> 
            <h4>Top 7 Game Development Trends For 2022</h4> 
            <p> 
                Estimating what the future scope of  
                game development will be till we reach  
                the year 2025 or any other? Yes, you  
                should because to date, there are more  
                than 3 billion users playing games online. 
            </p> 
        </div> 
    </div> 
</body> 
  
</html> 