CSS Navigation Bar - Navbar
The Navigation Bar (navbar) is the main navigation component of every website. A good navbar must be clear, responsive, and consistent across all pages. CSS allows for various navbar styles: horizontal with Flexbox, vertical sidebar, fixed/sticky navbar, and responsive hamburger menu.
Main components of a navbar:
- Brand/Logo — The website's identity
- Navigation Links — Links to other pages
- Actions — Action buttons (login, search, etc.)
- Active state — Indicator for the current page
- Responsive — Adaptation for mobile
Code Example
Comprehensive Navbar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Navigation Bar</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, sans-serif;
background: #f0f2f5;
color: #334155;
}
h2 {
margin-bottom: 15px;
color: #1a1a2e;
}
.section {
margin-bottom: 40px;
}
/* ===== TOP NAVBAR ===== */
.top-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 30px;
height: 64px;
background: white;
box-shadow: 0 2px 10px rgba(0,0,0,0.06);
border-radius: 12px;
margin: 20px;
}
.nav-brand {
font-size: 22px;
font-weight: 800;
color: #1a1a2e;
text-decoration: none;
letter-spacing: -0.5px;
}
.nav-brand span {
color: #667eea;
}
.nav-links {
display: flex;
list-style: none;
gap: 4px;
}
.nav-links a {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
color: #475569;
text-decoration: none;
border-radius: 8px;
font-weight: 500;
font-size: 14px;
transition: all 0.3s;
}
.nav-links a:hover {
background: #f1f5f9;
color: #667eea;
}
.nav-links a.active {
background: #eef2ff;
color: #667eea;
}
.nav-links a .nav-icon {
font-size: 16px;
}
.nav-links .has-dropdown {
position: relative;
}
.nav-links .has-dropdown > a::after {
content: '▾';
font-size: 10px;
transition: transform 0.3s;
}
.nav-links .has-dropdown:hover > a::after {
transform: rotate(180deg);
}
.nav-dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
background: white;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0,0,0,0.12);
min-width: 220px;
padding: 8px;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: all 0.3s;
z-index: 100;
}
.nav-links .has-dropdown:hover .nav-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-dropdown a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
color: #475569;
text-decoration: none;
border-radius: 8px;
font-size: 14px;
transition: all 0.2s;
}
.nav-dropdown a:hover {
background: #f1f5f9;
color: #667eea;
}
.nav-actions {
display: flex;
align-items: center;
gap: 12px;
}
.nav-search {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: #f1f5f9;
border-radius: 8px;
border: none;
color: #94a3b8;
font-size: 14px;
cursor: pointer;
transition: all 0.3s;
}
.nav-search:hover {
background: #e2e8f0;
}
.nav-search kbd {
background: white;
padding: 2px 6px;
border-radius: 4px;
font-size: 11px;
border: 1px solid #e2e8f0;
}
.btn-login {
padding: 8px 18px;
background: transparent;
color: #475569;
border: 1.5px solid #e2e8f0;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.3s;
}
.btn-login:hover {
border-color: #667eea;
color: #667eea;
}
.btn-signup {
padding: 8px 18px;
background: #667eea;
color: white;
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: background 0.3s;
}
.btn-signup:hover {
background: #5a67d8;
}
/* ===== STICKY NAVBAR ===== */
.sticky-wrapper {
position: relative;
height: 400px;
overflow: auto;
border: 2px solid #e2e8f0;
border-radius: 12px;
margin: 20px;
}
.sticky-nav {
position: sticky;
top: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 30px;
height: 56px;
background: rgba(255,255,255,0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid #e2e8f0;
z-index: 10;
}
.sticky-nav .nav-brand {
font-size: 18px;
}
.sticky-nav .nav-links a {
padding: 6px 14px;
font-size: 13px;
}
.sticky-content {
padding: 30px;
}
.sticky-content p {
line-height: 1.8;
color: #475569;
margin-bottom: 15px;
}
/* ===== SIDEBAR NAV ===== */
.sidebar-layout {
display: flex;
min-height: 400px;
border: 2px solid #e2e8f0;
border-radius: 12px;
overflow: hidden;
margin: 20px;
}
.sidebar-nav {
width: 260px;
background: #1e293b;
color: white;
padding: 20px 0;
flex-shrink: 0;
}
.sidebar-brand {
padding: 0 20px 20px;
font-size: 20px;
font-weight: 800;
border-bottom: 1px solid rgba(255,255,255,0.1);
margin-bottom: 10px;
}
.sidebar-brand span {
color: #818cf8;
}
.sidebar-section-title {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
color: #64748b;
padding: 15px 20px 8px;
font-weight: 600;
}
.sidebar-links {
list-style: none;
}
.sidebar-links a {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 20px;
color: #cbd5e1;
text-decoration: none;
font-size: 14px;
transition: all 0.3s;
border-left: 3px solid transparent;
}
.sidebar-links a:hover {
background: rgba(255,255,255,0.05);
color: white;
}
.sidebar-links a.active {
background: rgba(102,126,234,0.15);
color: #818cf8;
border-left-color: #818cf8;
}
.sidebar-links .icon {
width: 20px;
text-align: center;
}
.sidebar-links .badge {
margin-left: auto;
background: #667eea;
color: white;
padding: 2px 8px;
border-radius: 10px;
font-size: 11px;
font-weight: bold;
}
.sidebar-content {
flex: 1;
padding: 30px;
background: #f8fafc;
}
/* ===== MEGA MENU ===== */
.mega-nav {
background: white;
padding: 0 30px;
box-shadow: 0 2px 10px rgba(0,0,0,0.06);
border-radius: 12px;
margin: 20px;
}
.mega-nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
}
.mega-nav .nav-brand {
font-size: 20px;
}
.mega-nav .nav-links {
gap: 2px;
}
.mega-nav .mega-item {
position: relative;
}
.mega-menu {
position: absolute;
top: calc(100% + 15px);
left: 50%;
transform: translateX(-50%);
background: white;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0,0,0,0.15);
padding: 30px;
opacity: 0;
visibility: hidden;
transform: translateX(-50%) translateY(-10px);
transition: all 0.3s;
z-index: 100;
min-width: 600px;
}
.mega-item:hover .mega-menu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.mega-menu-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.mega-menu-col h4 {
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #94a3b8;
margin-bottom: 12px;
}
.mega-menu-col a {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
color: #475569;
text-decoration: none;
border-radius: 8px;
font-size: 14px;
transition: all 0.2s;
}
.mega-menu-col a:hover {
background: #f1f5f9;
color: #667eea;
}
.mega-menu-col .mega-icon {
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.mega-menu-col .mega-desc {
font-size: 12px;
color: #94a3b8;
}
.mega-menu-footer {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #e2e8f0;
display: flex;
justify-content: space-between;
align-items: center;
}
.mega-menu-footer a {
color: #667eea;
text-decoration: none;
font-weight: 600;
font-size: 14px;
display: flex;
align-items: center;
gap: 6px;
}
.mega-menu-footer a::after {
content: '→';
}
</style>
</head>
<body>
<!-- Top Navbar -->
<div class="section">
<h2>Top Navbar</h2>
<nav class="top-nav">
<a href="#" class="nav-brand">Skill<span>Versitas</span></a>
<ul class="nav-links">
<li><a href="#" class="active"><span class="nav-icon">🏠</span> Home</a></li>
<li><a href="#"><span class="nav-icon">📚</span> Kursus</a></li>
<li class="has-dropdown">
<a href="#">Kategori</a>
<div class="nav-dropdown">
<a href="#">💻 Technology</a>
<a href="#">🎨 Desain</a>
<a href="#">📈 Bisnis</a>
<a href="#">📸 Photos & Videos</a>
</div>
</li>
<li><a href="#"><span class="nav-icon">👥</span> Komunitas</a></li>
</ul>
<div class="nav-actions">
<button class="nav-search">🔍 Search... <kbd>⌘K</kbd></button>
<button class="btn-login">Log In</button>
<button class="btn-signup">Sign Up</button>
</div>
</nav>
</div>
<!-- Sticky Navbar -->
<div class="section">
<h2>Sticky Navbar</h2>
<div class="sticky-wrapper">
<nav class="sticky-nav">
<a href="#" class="nav-brand">SkillVersitas</a>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">Kursus</a></li>
<li><a href="#">Tentang</a></li>
</ul>
</nav>
<div class="sticky-content">
<p>Scroll down to see the navbar become sticky. The navbar stays at the top as you scroll the page.</p>
<p>This is long page content. A sticky navbar is very useful for navigation that is always accessible, even when the user scrolls down.</p>
<p>Usage example: documentation site, blog, e-commerce product page.</p>
<p>The navbar uses <code>position: sticky</code> and <code>backdrop-filter: blur(10px)</code> for a glassmorphism effect.</p>
<p>Content is added so that the page can be scrolled.</p>
<p>Scroll even further to see this sticky navbar effect.</p>
<p>Each paragraph helps make the page long enough for scrolling.</p>
<p>Sticky navbars are a very common pattern on modern websites.</p>
<p>Users can always access the navigation without having to scroll back up.</p>
</div>
</div>
</div>
<!-- Sidebar Navigation -->
<div class="section">
<h2>Sidebar Navigation</h2>
<div class="sidebar-layout">
<nav class="sidebar-nav">
<div class="sidebar-brand">Skill<span>Versitas</span></div>
<div class="sidebar-section-title">Main Menu</div>
<ul class="sidebar-links">
<li><a href="#" class="active"><span class="icon">📊</span> Dashboard</a></li>
<li><a href="#"><span class="icon">📚</span> Kursus Saya <span class="badge">12</span></a></li>
<li><a href="#"><span class="icon">📝</span> Assignments</a></li>
<li><a href="#"><span class="icon">🏆</span> Sertifikat</a></li>
</ul>
<div class="sidebar-section-title">Komunitas</div>
<ul class="sidebar-links">
<li><a href="#"><span class="icon">💬</span> Forum</a></li>
<li><a href="#"><span class="icon">👥</span> Study Group <span class="badge">3</span></a></li>
<li><a href="#"><span class="icon">📅</span> Event</a></li>
</ul>
<div class="sidebar-section-title">Account</div>
<ul class="sidebar-links">
<li><a href="#"><span class="icon">👤</span> Profile</a></li>
<li><a href="#"><span class="icon">⚙️</span> Settings</a></li>
<li><a href="#"><span class="icon">🚪</span> Log Out</a></li>
</ul>
</nav>
<div class="sidebar-content">
<h3 style="margin-bottom: 15px;">Dashboard</h3>
<p style="color: #64748b;">Welcome to your dashboard. The sidebar navigation uses a vertical Flexbox with active state indicator berupa border-left.</p>
</div>
</div>
</div>
<!-- Mega Menu -->
<div class="section">
<h2>Mega Menu</h2>
<nav class="mega-nav">
<div class="mega-nav-inner">
<a href="#" class="nav-brand">Skill<span>Versitas</span></a>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li class="mega-item">
<a href="#">Kursus</a>
<div class="mega-menu">
<div class="mega-menu-grid">
<div class="mega-menu-col">
<h4>Technology</h4>
<a href="#">
<span class="mega-icon" style="background:#dbeafe;">💻</span>
<div>
<div>Web Development</div>
<div class="mega-desc">HTML, CSS, JavaScript</div>
</div>
</a>
<a href="#">
<span class="mega-icon" style="background:#dcfce7;">📱</span>
<div>
<div>Mobile Development</div>
<div class="mega-desc">Flutter, React Native</div>
</div>
</a>
<a href="#">
<span class="mega-icon" style="background:#fef3c7;">🤖</span>
<div>
<div>AI & Machine Learning</div>
<div class="mega-desc">Python, TensorFlow</div>
</div>
</a>
</div>
<div class="mega-menu-col">
<h4>Desain</h4>
<a href="#">
<span class="mega-icon" style="background:#fce7f3;">🎨</span>
<div>
<div>UI/UX Design</div>
<div class="mega-desc">Figma, Adobe XD</div>
</div>
</a>
<a href="#">
<span class="mega-icon" style="background:#f3e8ff;">✏️</span>
<div>
<div>Graphic Design</div>
<div class="mega-desc">Photoshop, Illustrator</div>
</div>
</a>
<a href="#">
<span class="mega-icon" style="background:#ccfbf1;">🎬</span>
<div>
<div>Motion Design</div>
<div class="mega-desc">After Effects</div>
</div>
</a>
</div>
<div class="mega-menu-col">
<h4>Bisnis</h4>
<a href="#">
<span class="mega-icon" style="background:#eef2ff;">📈</span>
<div>
<div>Digital Marketing</div>
<div class="mega-desc">SEO, Ads, Social Media</div>
</div>
</a>
<a href="#">
<span class="mega-icon" style="background:#fef2f2;">💰</span>
<div>
<div>Finance</div>
<div class="mega-desc">Investasi, Accounting</div>
</div>
</a>
<a href="#">
<span class="mega-icon" style="background:#f0fdf4;">🚀</span>
<div>
<div>Startup</div>
<div class="mega-desc">Pitch, Strategy</div>
</div>
</a>
</div>
</div>
<div class="mega-menu-footer">
<a href="#">View All Courses</a>
</div>
</div>
</li>
<li><a href="#">Mentor</a></li>
<li><a href="#">Blog</a></li>
</ul>
<div class="nav-actions">
<button class="btn-login">Log In</button>
<button class="btn-signup">Sign Up</button>
</div>
</div>
</nav>
</div>
</body>
</html>
Code Explanation
Horizontal Nav with Flexbox
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-links {
display: flex;
list-style: none;
gap: 4px;
}
justify-content: space-between separates the brand, links, and actions into three sections.
Active Link Styling
.nav-links a.active {
background: #eef2ff;
color: #667eea;
font-weight: 600;
}
The active state indicates the current page. Usually done with a different background color or a border indicator.
Fixed/Sticky Navbar
/* Fixed — always on top, content below it */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
}
/* Sticky — floats while scrolling, stays in its normal position if not yet scrolled */
.navbar {
position: sticky;
top: 0;
z-index: 100;
}
Difference:
- fixed — Always on top; the content must be offset (padding-top on the body)
- sticky — Only "sticks" when scrolled; it does not change the layout flow
Responsive Hamburger Menu Concept
/* Hide the hamburger on desktop */
.hamburger { display: none; }
/* Hide the nav links on mobile */
.nav-links {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
flex-direction: column;
padding: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
/* Show the hamburger on mobile */
@media (max-width: 768px) {
.hamburger { display: block; }
.nav-links.open { display: flex; }
}
Dropdown in Nav
.nav-item {
position: relative;
}
.nav-dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
opacity: 0;
visibility: hidden;
transition: all 0.3s;
}
.nav-item:hover .nav-dropdown {
opacity: 1;
visibility: visible;
}
Sidebar Nav
.sidebar {
width: 260px;
background: #1e293b;
padding: 20px 0;
}
.sidebar a {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 20px;
color: #cbd5e1;
border-left: 3px solid transparent;
transition: all 0.3s;
}
.sidebar a.active {
background: rgba(102,126,234,0.15);
color: #818cf8;
border-left-color: #818cf8;
}
Everyday Use Cases
1. Mobile-Responsive Navbar
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
.mobile-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
height: 60px;
background: white;
box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.mobile-nav .brand {
font-size: 20px;
font-weight: 800;
color: #1a1a2e;
text-decoration: none;
}
.mobile-nav .brand span { color: #667eea; }
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
background: none;
border: none;
padding: 5px;
}
.hamburger span {
display: block;
width: 24px;
height: 2px;
background: #1e293b;
border-radius: 2px;
transition: all 0.3s;
}
.mobile-nav .links {
display: flex;
list-style: none;
gap: 4px;
}
.mobile-nav .links a {
text-decoration: none;
color: #475569;
padding: 8px 16px;
border-radius: 8px;
font-weight: 500;
font-size: 14px;
transition: all 0.3s;
}
.mobile-nav .links a:hover {
background: #f1f5f9;
color: #667eea;
}
.mobile-nav .links a.active {
background: #eef2ff;
color: #667eea;
}
.mobile-nav .mobile-actions {
display: flex;
gap: 10px;
align-items: center;
}
.mobile-nav .btn-primary {
padding: 8px 18px;
background: #667eea;
color: white;
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
}
@media (max-width: 768px) {
.hamburger { display: flex; }
.mobile-nav .links { display: none; }
.mobile-nav .btn-primary { display: none; }
.mobile-nav .links.mobile-open {
display: flex;
flex-direction: column;
position: absolute;
top: 60px;
left: 0;
right: 0;
background: white;
padding: 10px 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
z-index: 100;
}
}
</style>
</head>
<body>
<nav class="mobile-nav">
<a href="#" class="brand">Skill<span>Versitas</span></a>
<ul class="links">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Kursus</a></li>
<li><a href="#">Tentang</a></li>
<li><a href="#">Kontak</a></li>
</ul>
<div class="mobile-actions">
<button class="btn-primary">Sign Up</button>
<button class="hamburger" onclick="this.closest('.mobile-nav').querySelector('.links').classList.toggle('mobile-open')">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
</body>
</html>
2. Bottom Tab Navigation (Mobile)
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Segoe UI', Tahoma, sans-serif;
background: #f0f2f5;
padding-bottom: 80px;
}
.content {
padding: 20px;
}
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
background: white;
border-top: 1px solid #e2e8f0;
padding: 8px 0;
padding-bottom: max(8px, env(safe-area-inset-bottom));
z-index: 100;
}
.bottom-nav a {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
text-decoration: none;
color: #94a3b8;
font-size: 11px;
padding: 6px;
transition: color 0.3s;
}
.bottom-nav a.active {
color: #667eea;
}
.bottom-nav a .icon {
font-size: 22px;
}
.bottom-nav a.active .icon {
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="content">
<h2 style="margin-bottom: 15px;">Home Page</h2>
<p style="color: #64748b;">This is page content. The bottom navigation stays at the bottom of the screen like a mobile app.</p>
</div>
<nav class="bottom-nav">
<a href="#" class="active"><span class="icon">🏠</span> Home</a>
<a href="#"><span class="icon">🔍</span> Search</a>
<a href="#"><span class="icon">📚</span> Kursus</a>
<a href="#"><span class="icon">💬</span> Chat</a>
<a href="#"><span class="icon">👤</span> Profile</a>
</nav>
</body>
</html>
Conclusion
CSS Navigation Bar covers various navigation styles for different needs. Key points:
- Flexbox — The foundation for horizontal navbars and item alignment
position: sticky— A navbar that sticks when scrollingposition: fixed— A navbar that is always on top (requires an offset)- Sidebar — Vertical navigation with an active indicator
- Mega menu — Multi-column dropdown using a grid layout
- Responsive — Hamburger menu for mobile, sidebar toggle
Each navbar style has its own use case. Choose the one that fits your website's needs.