Simple Navbar

Brand
HomeAboutContact
<nav class="simple-nav">
  <div class="nav-brand">Brand</div>
  <div class="nav-links">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </div>
</nav>

CTA Navbar

Logo
FeaturesPricing
<nav class="cta-nav">
  <div class="nav-brand">Logo</div>
  <div class="nav-links">
    <a href="#">Features</a>
    <a href="#">Pricing</a>
    <button class="btn-primary btn-sm">Sign Up</button>
  </div>
</nav>
Ad Slot — Mid Content (Responsive In-Article)
💡

What Is This?

🛠️

How to Use

  1. Browse the collection of navigation components
  2. Preview each design with interactive elements
  3. Copy HTML and CSS for any navigation pattern
  4. Adapt the design to your project's branding
  5. Combine patterns for complex navigation systems
🎯

Use Cases

Ad Slot — Bottom (300×250 Rectangle)