devsnips
Search docs, APIs, guides…

Component

Basic Navbar

Clean horizontal navigation with essential links and actions. Perfect foundation for any marketing or product website.

  • Component
  • Tailwind
  • HTML
  • MIT

What it does

Capabilities

  • Hover states
  • Active link styling
  • CTA button

Preview

Live component

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

Install

Add to your project

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

Source

Implementation

code.html 
<nav class="bg-white border-b border-gray-200">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <!-- Logo -->
      <div class="flex-shrink-0">
        <a href="#" class="flex items-center gap-2">
          <div class="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center">
            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
            </svg>
          </div>
          <span class="text-xl font-bold text-gray-900">Nexus</span>
        </a>
      </div>

      <!-- Desktop Navigation -->
      <div class="hidden md:flex items-center space-x-8">
        <a href="#" class="text-gray-900 font-medium hover:text-indigo-600 transition-colors">Home</a>
        <a href="#" class="text-gray-600 hover:text-indigo-600 transition-colors">Products</a>
        <a href="#" class="text-gray-600 hover:text-indigo-600 transition-colors">Solutions</a>
        <a href="#" class="text-gray-600 hover:text-indigo-600 transition-colors">Pricing</a>
        <a href="#" class="text-gray-600 hover:text-indigo-600 transition-colors">Resources</a>
      </div>

      <!-- Actions -->
      <div class="flex items-center gap-4">
        <a href="#" class="text-gray-600 hover:text-gray-900 transition-colors hidden sm:block">Sign In</a>
        <a href="#" class="px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700 transition-colors">Get Started</a>
      </div>

      <!-- Mobile menu button -->
      <div class="md:hidden">
        <button type="button" class="text-gray-600 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 p-2" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <svg class="block 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" id="mobile-menu">
    <div class="px-4 pt-2 pb-4 space-y-1 border-t border-gray-200">
      <a href="#" class="block px-3 py-2 text-gray-900 font-medium rounded-lg hover:bg-gray-100">Home</a>
      <a href="#" class="block px-3 py-2 text-gray-600 rounded-lg hover:bg-gray-100">Products</a>
      <a href="#" class="block px-3 py-2 text-gray-600 rounded-lg hover:bg-gray-100">Solutions</a>
      <a href="#" class="block px-3 py-2 text-gray-600 rounded-lg hover:bg-gray-100">Pricing</a>
      <a href="#" class="block px-3 py-2 text-gray-600 rounded-lg hover:bg-gray-100">Resources</a>
      <div class="pt-4 flex flex-col gap-3">
        <a href="#" class="text-center py-2 text-gray-600 font-medium border border-gray-300 rounded-lg">Sign In</a>
        <a href="#" class="text-center py-2 bg-indigo-600 text-white font-medium rounded-lg">Get Started</a>
      </div>
    </div>
  </div>
</nav>
57 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/basic-navbar
Prompt instruction 
I want to use this DevSnips resource in production:

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

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

This is the Basic Navbar — Clean horizontal navigation with essential links and actions. Perfect foundation for any marketing or product website.

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/basic-navbar