Skip to content
Related Articles

Related Articles

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

View Discussion
Improve Article
Save Article
  • 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>


Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!