Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to create a navigation bar with left-aligned and right-aligned links with CSS?
To create a navigation bar with left-aligned and right-aligned links with CSS, you should have a basic understanding of CSS flexbox. First, we will create the structure of navigation bar having five links using HTML, then we will use CSS to design the navigation bar and align the links on the left and right sides using flexbox properties.
Syntax
nav {
display: flex;
justify-content: space-between;
}
.left-links {
flex: 1;
}
.right-links {
display: flex;
}
Method 1: Using Flexbox with Space-Between
This method uses flexbox with justify-content: space-between to automatically distribute links to opposite ends of the navigation bar −
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
nav {
display: flex;
justify-content: space-between;
background-color: #2c3e50;
padding: 0 20px;
height: 60px;
align-items: center;
}
.left-links, .right-links {
display: flex;
}
.nav-link {
color: white;
text-decoration: none;
padding: 10px 15px;
margin: 0 5px;
border-radius: 4px;
transition: background-color 0.3s;
}
.nav-link:hover {
background-color: #34495e;
}
</style>
</head>
<body>
<nav>
<div class="left-links">
<a href="/index.htm" class="nav-link">Home</a>
<a href="/courses.htm" class="nav-link">Courses</a>
<a href="/tutorials.htm" class="nav-link">Tutorials</a>
</div>
<div class="right-links">
<a href="/login.htm" class="nav-link">Login</a>
<a href="/signup.htm" class="nav-link">Sign Up</a>
</div>
</nav>
<div style="padding: 20px;">
<h1>Navigation Bar Demo</h1>
<p>The navigation bar above shows left-aligned and right-aligned links.</p>
</div>
</body>
</html>
A dark blue navigation bar appears with "Home", "Courses", "Tutorials" aligned to the left and "Login", "Sign Up" aligned to the right. The links have hover effects and are properly spaced.
Method 2: Using Flex-Grow Property
This alternative method uses the flex-grow property to push right-aligned links to the end −
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
nav {
display: flex;
background: linear-gradient(45deg, #667eea, #764ba2);
padding: 15px 30px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.left-section {
display: flex;
flex-grow: 1;
}
.right-section {
display: flex;
}
.nav-item {
color: white;
text-decoration: none;
padding: 12px 18px;
margin: 0 3px;
border-radius: 25px;
font-weight: 500;
transition: all 0.3s ease;
}
.nav-item:hover {
background-color: rgba(255,255,255,0.2);
transform: translateY(-2px);
}
</style>
</head>
<body>
<nav>
<div class="left-section">
<a href="/home.htm" class="nav-item">Home</a>
<a href="/about.htm" class="nav-item">About</a>
<a href="/services.htm" class="nav-item">Services</a>
</div>
<div class="right-section">
<a href="/contact.htm" class="nav-item">Contact</a>
<a href="/help.htm" class="nav-item">Help</a>
</div>
</nav>
<div style="padding: 30px; text-align: center;">
<h1>Flex-Grow Navigation Example</h1>
<p>This navigation uses flex-grow to automatically space the links.</p>
</div>
</body>
</html>
A gradient navigation bar with rounded link buttons appears. Left links ("Home", "About", "Services") are grouped on the left, while right links ("Contact", "Help") are positioned on the right with smooth hover animations.
Key Differences
| Method | Property Used | Best For |
|---|---|---|
| Space-Between | justify-content: space-between |
Simple two-group layouts |
| Flex-Grow | flex-grow: 1 |
More complex layouts with multiple sections |
Conclusion
Both flexbox methods effectively create navigation bars with left and right-aligned links. The space-between approach is simpler for basic layouts, while flex-grow offers more control for complex designs.
Updated on: 2026-03-15T14:17:46+05:30
12K+ Views
Advertisements