Skillversitas

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.

.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; }
}
.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 {
  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:

  1. Flexbox — The foundation for horizontal navbars and item alignment
  2. position: sticky — A navbar that sticks when scrolling
  3. position: fixed — A navbar that is always on top (requires an offset)
  4. Sidebar — Vertical navigation with an active indicator
  5. Mega menu — Multi-column dropdown using a grid layout
  6. Responsive — Hamburger menu for mobile, sidebar toggle

Each navbar style has its own use case. Choose the one that fits your website's needs.