devsnips
Search docs, APIs, guides…

Component

Split Navbar

Dark-themed split navigation with logo on left, centered links, and user actions on right. Perfect for SaaS dashboards.

  • Component
  • Tailwind
  • HTML
  • MIT

What it does

Capabilities

  • Dark theme with slate colors
  • Hover dropdown menu
  • Notification bell icon
  • User avatar

Preview

Live component

Interactive preview
Open preview
9:41 100%
devsnips.site/library/tailwind/components/navigation/split-navbar/
fluid · no fixed width 100%
No dependencies Production-ready

Install

Add to your project

terminal
npx devsnips add Tailwind/Components/Navigation/split-navbar
registry path: Tailwind/Components/Navigation/split-navbar

Source

Implementation

code.html 
<nav class="bg-slate-900">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <!-- Left: Logo -->
      <div class="flex-shrink-0">
        <a href="#" class="flex items-center gap-2">
          <svg class="w-8 h-8 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
          </svg>
          <span class="text-white text-xl font-bold">Lumina</span>
        </a>
      </div>

      <!-- Center: Main Navigation -->
      <div class="hidden md:flex items-center space-x-1">
        <a href="#" class="px-4 py-2 text-white/90 hover:text-white hover:bg-white/10 rounded-lg transition-colors font-medium">Dashboard</a>
        <a href="#" class="px-4 py-2 text-white/70 hover:text-white hover:bg-white/10 rounded-lg transition-colors">Analytics</a>
        <a href="#" class="px-4 py-2 text-white/70 hover:text-white hover:bg-white/10 rounded-lg transition-colors">Reports</a>
        
        <!-- Dropdown -->
        <div class="relative group">
          <button class="flex items-center gap-1 px-4 py-2 text-white/70 hover:text-white hover:bg-white/10 rounded-lg transition-colors">
            More
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
            </svg>
          </button>
          <div class="absolute left-0 mt-2 w-48 bg-slate-800 rounded-xl shadow-xl border border-slate-700 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all transform origin-top-left">
            <div class="p-2">
              <a href="#" class="block px-4 py-2 text-white/80 hover:text-white hover:bg-slate-700 rounded-lg transition-colors">Settings</a>
              <a href="#" class="block px-4 py-2 text-white/80 hover:text-white hover:bg-slate-700 rounded-lg transition-colors">Integrations</a>
              <a href="#" class="block px-4 py-2 text-white/80 hover:text-white hover:bg-slate-700 rounded-lg transition-colors">Support</a>
            </div>
          </div>
        </div>
      </div>

      <!-- Right: Actions -->
      <div class="hidden md:flex items-center gap-3">
        <button class="p-2 text-white/70 hover:text-white transition-colors">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
          </svg>
        </button>
        <div class="w-8 h-8 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-full flex items-center justify-center">
          <span class="text-white text-sm font-medium">JD</span>
        </div>
      </div>

      <!-- Mobile Menu Button -->
      <div class="md:hidden">
        <button class="text-white/80 hover:text-white p-2">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile Menu -->
  <div class="md:hidden hidden border-t border-slate-800" id="mobile-menu">
    <div class="px-4 py-4 space-y-2">
      <a href="#" class="block px-4 py-2 text-white bg-white/10 rounded-lg">Dashboard</a>
      <a href="#" class="block px-4 py-2 text-white/80 hover:bg-white/10 rounded-lg">Analytics</a>
      <a href="#" class="block px-4 py-2 text-white/80 hover:bg-white/10 rounded-lg">Reports</a>
      <a href="#" class="block px-4 py-2 text-white/80 hover:bg-white/10 rounded-lg">Settings</a>
      <a href="#" class="block px-4 py-2 text-white/80 hover:bg-white/10 rounded-lg">Integrations</a>
    </div>
  </div>
</nav>
71 lines UTF-8 · LF · Spaces: 2
DevSnips AI ready Claude · Cursor · Windsurf

Agent skill & Model Context Protocol

Pass this component straight into your AI workflow. DevSnips exposes each resource as a structured, addressable registry entry, so your agent installs the real files instead of approximating them.

devsnips://components/navigation/split-navbar
Prompt instruction 
I want to use this DevSnips resource in production:

Page:
https://devsnips.site/library/tailwind/components/navigation/split-navbar/

Install: npx devsnips add
Tailwind/Components/Navigation/split-navbar

This is the Split Navbar — Dark-themed split navigation with logo on left, centered links, and user actions on right. Perfect for SaaS dashboards.

Use this DevSnips resource as the starting point for my project.
Adapt it to my project's stack and conventions, fix any issues,
and make it production-ready while preserving its intended design
and behavior.

Paste into ChatGPT, Claude or your agent — it already carries the page URL and the exact install path.

Resource URI
devsnips://components/navigation/split-navbar