Navbar Components

A minimal navbar with a brand name on the left and links on the right.

<nav class="navbar-simple">
  <span class="brand">UIverse</span>
  <div class="links">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </div>
</nav>

.navbar-simple {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  background: #fff;
  border-bottom: 1px solid #ebebeb;
}
.navbar-simple .brand { font-weight: 700; font-size: 18px; }
.navbar-simple .links a {
  margin-left: 20px;
  text-decoration: none;
  color: #555;
  font-size: 14px;
  transition: color 0.2s;
}
.navbar-simple .links a:hover { color: #eb6835; }

A symmetrical navbar with links flanking the brand name in the center.

<nav class="navbar-center">
  <a href="#">Home</a>
  <a href="#">Features</a>
  <span class="brand">UIverse</span>
  <a href="#">Docs</a>
  <a href="#">Pricing</a>
</nav>

.navbar-center {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  padding: 14px 24px;
  background: #fff;
  border-bottom: 1px solid #ebebeb;
}
.navbar-center .brand { font-weight: 800; font-size: 18px; color: #eb6835; }
.navbar-center a { text-decoration: none; color: #555; font-size: 14px; }
.navbar-center a:hover { color: #eb6835; }

A full-featured navbar with brand, links, and dual action buttons.

<nav class="navbar-btn">
  <span class="brand">UIverse</span>
  <div class="links">
    <a href="#">Features</a>
    <a href="#">Pricing</a>
  </div>
  <div class="actions">
    <button class="outline">Sign In</button>
    <button class="primary">Get Started</button>
  </div>
</nav>

.navbar-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  background: #fff;
  border-bottom: 1px solid #ebebeb;
}
.navbar-btn .primary {
  background: #eb6835; color: #fff;
  border: none; padding: 8px 18px;
  border-radius: 8px; cursor: pointer;
}
.navbar-btn .outline {
  background: transparent; color: #555;
  border: 1px solid #ddd; padding: 8px 18px;
  border-radius: 8px; cursor: pointer;
  margin-right: 8px;
}

A sleek dark-themed navbar with an accent CTA button — great for SaaS and dev tools.

<nav class="navbar-dark">
  <span class="brand">⬡ UIverse</span>
  <div class="links">
    <a href="#">Home</a>
    <a href="#">Docs</a>
    <a href="#">Blog</a>
  </div>
  <button>Launch App</button>
</nav>

.navbar-dark {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  background: #0f0f12;
  border-bottom: 1px solid #222;
}
.navbar-dark .brand { color: #fff; font-weight: 700; }
.navbar-dark .links a { color: #888; margin-left: 20px; text-decoration: none; }
.navbar-dark .links a:hover { color: #fff; }
.navbar-dark button {
  background: #eb6835; color: #fff;
  border: none; padding: 8px 18px;
  border-radius: 8px; cursor: pointer;
}

A frosted-glass navbar with backdrop blur — perfect for image or gradient hero sections.

<nav class="navbar-glass">
  <span class="brand">UIverse</span>
  <div class="links">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Work</a>
  </div>
  <button>Contact</button>
</nav>

.navbar-glass {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.navbar-glass .brand { color: #fff; font-weight: 700; }
.navbar-glass .links a { color: rgba(255,255,255,0.8); margin-left: 18px; text-decoration: none; }
.navbar-glass button {
  background: rgba(255,255,255,0.2);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
  padding: 7px 18px;
  border-radius: 8px;
  cursor: pointer;
  backdrop-filter: blur(6px);
}

A navbar with an integrated search input — ideal for documentation or component libraries.

<nav class="navbar-search">
  <span class="brand">UIverse</span>
  <div class="search-group">
    <i class="fa-solid fa-magnifying-glass"></i>
    <input type="text" placeholder="Search docs...">
  </div>
  <a href="#">Get Started →</a>
</nav>

.navbar-search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background: #fff;
  border-bottom: 1px solid #ebebeb;
}
.navbar-search .search-group {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 8px 14px;
  flex: 0 1 280px;
}
.navbar-search .search-group input {
  border: none; outline: none; background: transparent; font-size: 14px;
}

A three-section navbar — brand left, main links center, utility links right.

<nav class="navbar-split">
  <span class="brand">UIverse</span>
  <div class="links">
    <a href="#">Dashboard</a>
    <a href="#">Projects</a>
  </div>
  <div class="meta">
    <a href="#">Help</a>
    <span class="badge">New</span>
  </div>
</nav>

.navbar-split {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background: #fff;
  border-bottom: 1px solid #ebebeb;
}
.navbar-split .links { display: flex; gap: 20px; }
.navbar-split .meta { display: flex; align-items: center; gap: 12px; }
.navbar-split .badge {
  background: rgba(235,104,53,0.1);
  color: #eb6835;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

A bold gradient navbar — eye-catching and modern for landing pages.

<nav class="navbar-gradient">
  <span class="brand">⬡ UIverse</span>
  <div class="links">
    <a href="#">Home</a>
    <a href="#">Work</a>
    <a href="#">Blog</a>
  </div>
  <button>Sign Up Free</button>
</nav>

.navbar-gradient {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  background: linear-gradient(90deg, #eb6835 0%, #6c5ce7 100%);
}
.navbar-gradient .brand { color: #fff; font-weight: 800; }
.navbar-gradient .links a { color: rgba(255,255,255,0.85); margin-left: 20px; text-decoration: none; }
.navbar-gradient button {
  background: #fff;
  color: #eb6835;
  border: none;
  padding: 8px 18px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}

A compact floating navbar with rounded pill styling and elevated depth.

<nav class="floating-navbar">...</nav>

A product-focused navbar with menu affordance and compact metadata chip.

<nav class="mega-navbar">...</nav>

A utility navbar with alerts, profile access, and dashboard-friendly spacing.

<nav class="notification-navbar">...</nav>

A storefront navbar with fast search treatment and visible cart state.

<nav class="store-navbar">...</nav>

A glassy icon dock navbar suited to mobile products and compact apps.

<nav class="dock-navbar">...</nav>