Horje
How to Create a Navigation Bar with CSS Flexbox?

The navigation bar is a crucial aspect of modern web design. We can create a responsive navigation bar using CSS Flexbox, which provides a flexible and efficient way to layout elements, making it an excellent choice for creating navigation bars.

Below are different possible ways for creating different types of Navbar:

Table of Content

Basic Horizontal Navigation Bar

Using this approach we can create a straightforward horizontal navigation bar where all the links are laid out in a row. Flexbox makes it easy to distribute the space between the links evenly. These are used for simple websites where a basic, horizontal navigation is required without any complex alignment.

Syntax:

.navbar {  
    display: flex;
    background-color: #333;
}
.navbar a {  
   color: white;  
   padding: 14px 20px;  
   text-decoration: none;  
   text-align: center;
}

Example: This demonstrates a basic horizontal navigation bar using HTML , CSS , featuring links to home, Services and Contact sections, styled with a dark background and white text.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <style>
        .navbar {
            display: flex;
            background-color: #333;
        }

        .navbar a {
            color: white;
            padding: 14px 20px;
            text-decoration: none;
            text-align: center;
        }
    </style>
    <title>Basic Horizontal Navigation Bar</title>
</head>

<body>
    <div class="navbar">
        <a href="#home">Home</a>
        <a href="#services">Services</a>
        <a href="#contact">Contact</a>
    </div>
</body>

</html>

Output:

basic-horizontal

Basic Horizontal Navigation Bar

This approach centers the navigation links within the navigation bar. By using the justify-content: center property, we can align the links to the center of the container. It is used for websites where we want to focus the user’s attention on the navigation links by placing them in the center of the page.

Syntax:

.navbar {  
display: flex;  
justify-content: center;  
background-color: #333;
}
.navbar a {  
color: white;  
padding: 14px 20px;  
text-decoration: none;  
text-align: center;
}

Example: This demonstrates a basic centered navigation bar using HTML , CSS , featuring links to home, Services and Contact sections, styled with a dark background and white text.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .navbar {
            display: flex;
            justify-content: center;
            background-color: #333;
        }

        .navbar a {
            color: white;
            padding: 14px 20px;
            text-decoration: none;
            text-align: center;
        }
    </style>
    <title>Centered Navigation Links</title>
</head>

<body>
    <div class="navbar">
        <a href="#home">Home</a>
        <a href="#services">Services</a>
        <a href="#contact">Contact</a>
    </div>
</body>

</html>

Output:

centred_navigation

Centered Navigation Links

In this approach, the navigation links are aligned to the right side of the navigation bar. By applying margin-left: auto to the last link or a wrapping div, the links move to the right. These are generally used in corporate or professional websites where a right-aligned navigation bar is preferred for a clean, organized look.

Syntax:

.navbar {  
display: flex;  
background-color: #333;
}
.navbar a {  
color: white;  
padding: 14px 20px;  
text-decoration: none;  
text-align: center;
}
.navbar .right {  
margin-left: auto;
}

Example: This demonstrates a basic right aligned navigation bar using HTML , CSS , featuring links to home, Services and Contact sections, styled with a dark background and white text.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .navbar {
            display: flex;
            background-color: #333;
        }

        .navbar a {
            color: white;
            padding: 14px 20px;
            text-decoration: none;
            text-align: center;
        }

        .navbar .right {
            margin-left: auto;
        }
    </style>
    <title>Right-Aligned Navigation Links</title>
</head>

<body>
    <div class="navbar">
        <a href="#home">Home</a>
        <a href="#services">Services</a>
        <a href="#contact">Contact</a>
        <a href="#login" class="right">Login</a>
    </div>
</body>

</html>

Output:

Image Loading

Right-Aligned Navigation Links

Vertical Navigation Bar

A vertical navigation bar is created by changing the direction of the flex container to column. This arranges the links vertically instead of horizontally. It is ideal for sidebars or navigation menus that require vertical alignment, such as in dashboards or admin panels.

Syntax:

.navbar {  
display: flex;  
flex-direction: column;  
background-color: #333;  
height: 100vh;  
width: 200px;}
.navbar a {  
color: white;  
padding: 14px 20px;  
text-decoration: none;  
text-align: left;
}

Example: This demonstrates a basic left aligned navigation bar using HTML , CSS , featuring links to home, Services and Contact sections, styled with a dark background and white text.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .navbar {
            display: flex;
            flex-direction: column;
            background-color: #333;
            height: 100vh;
            width: 200px;
        }

        .navbar a {
            color: white;
            padding: 14px 20px;
            text-decoration: none;
            text-align: left;
        }
    </style>
    <title>Vertical Navigation Bar</title>
</head>

<body>
    <div class="navbar">
        <a href="#home">Home</a>
        <a href="#services">Services</a>
        <a href="#contact">Contact</a>
    </div>
</body>

</html>

Output:

Image Loading

Vertical Navigation Bar

Responsive Navigation Bar

This approach ensures the navigation bar is compatible to different screen sizes. By using media queries, we can change the layout of the navbar based on the screen width, ensuring a good user experience on both desktop and mobile devices. These are important for modern websites that need to be accessible and functional on a variety of devices and screen sizes.

Syntax:

.navbar {  
display: flex;  
flex-wrap: wrap;  
background-color: #333;
}
.navbar a {  
color: white;  
padding: 14px 20px;  
text-decoration: none;  
text-align: center;  
flex: 1 1 auto;
}
@media (max-width: 600px) { 
 .navbar a {    
flex: 100%;  
   }
}

Example: This demonstrates a responsive navigation bar using HTML , CSS , featuring links to home, Services and Contact sections, styled with a dark background and white text.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0">
    <style>
        .navbar {
            display: flex;
            flex-wrap: wrap;
            background-color: #333;
        }

        .navbar a {
            color: white;
            padding: 14px 20px;
            text-decoration: none;
            text-align: center;
            flex: 1 1 auto;
        }

        @media (max-width: 600px) {
            .navbar a {
                flex: 100%;
            }
        }
    </style>
    <title>Responsive Navigation Bar</title>
</head>

<body>
    <div class="navbar">
        <a href="#home">Home</a>
        <a href="#services">Services</a>
        <a href="#contact">Contact</a>
    </div>
</body>

</html>

Output:



 


Reffered: https://www.geeksforgeeks.org

CSS

Related
How to Prevent Flexbox Shrinking in CSS? How to Prevent Flexbox Shrinking in CSS?
Understanding Fluid Layouts in Web Design, How to Use it? Understanding Fluid Layouts in Web Design, How to Use it?
How to Stretch Elements to Fit the Whole Height of the Browser Window Using CSS? How to Stretch Elements to Fit the Whole Height of the Browser Window Using CSS?
How to Make One Flex Item Full-Width in CSS Flexbox? How to Make One Flex Item Full-Width in CSS Flexbox?
How to Add Transition on Hover Using CSS? How to Add Transition on Hover Using CSS?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 55



 

Horje