How to Create a Navigation Bar with CSS Flexbox?

Last Updated : 31 Jul, 2024

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
Centered Navigation Links
Right-Aligned Navigation Links
Vertical Navigation Bar
Responsive 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:

right-aligned — Right-Aligned Navigation Links

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:

vertical_navigation — Vertical 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.