Corporate Navbar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

<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 items-center gap-8">
        <a href="#" class="flex items-center gap-2">
          <div class="w-8 h-8 bg-blue-900 rounded 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="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
            </svg>
          </div>
          <span class="text-gray-900 font-semibold text-lg tracking-tight">Apex Corp</span>
        </a>

        <!-- Navigation Links -->
        <div class="hidden lg:flex items-center gap-1">
          <a href="#" class="px-3 py-2 text-gray-700 hover:text-blue-900 hover:bg-blue-50 rounded-md text-sm font-medium transition-colors">Overview</a>
          <a href="#" class="px-3 py-2 text-gray-500 hover:text-blue-900 hover:bg-blue-50 rounded-md text-sm transition-colors">Services</a>
          <a href="#" class="px-3 py-2 text-gray-500 hover:text-blue-900 hover:bg-blue-50 rounded-md text-sm transition-colors">Projects</a>
          <a href="#" class="px-3 py-2 text-gray-500 hover:text-blue-900 hover:bg-blue-50 rounded-md text-sm transition-colors">Clients</a>
          <a href="#" class="px-3 py-2 text-gray-500 hover:text-blue-900 hover:bg-blue-50 rounded-md text-sm transition-colors">Reports</a>
        </div>
      </div>

      <!-- Right Side -->
      <div class="flex items-center gap-4">
        <!-- Search -->
        <div class="hidden md:block relative">
          <input type="text" placeholder="Search..." class="w-48 lg:w-64 pl-9 pr-4 py-1.5 bg-gray-50 border border-gray-200 rounded-md text-sm focus:outline-none focus:border-blue-300 focus:bg-white transition-colors">
          <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
          </svg>
        </div>

        <!-- Help -->
        <button class="hidden md:flex items-center gap-1.5 px-3 py-1.5 text-gray-500 hover:text-gray-700 text-sm transition-colors" aria-label="Help">
          <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="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
          </svg>
          <span>Help</span>
        </button>

        <!-- Notifications -->
        <button class="relative p-2 text-gray-400 hover:text-gray-600 transition-colors" aria-label="Notifications">
          <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>
          <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
        </button>

        <!-- User Menu -->
        <div class="flex items-center gap-3 pl-4 border-l border-gray-200">
          <div class="hidden md:block text-right">
            <p class="text-sm font-medium text-gray-900">Robert Chen</p>
            <p class="text-xs text-gray-500">Administrator</p>
          </div>
          <div class="w-9 h-9 bg-gradient-to-br from-blue-500 to-blue-700 rounded-full flex items-center justify-center">
            <span class="text-white text-sm font-medium">RC</span>
          </div>
        </div>
      </div>

      <!-- Mobile Menu Button -->
      <button class="lg:hidden p-2 text-gray-500" aria-label="Menu">
        <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>
</nav>

1
2
3
4
5
6
7
8
9
10
11
12

# Corporate Navbar

Corporate website navbar.

## Usage
```bash
npx devsnips add Tailwind/Components/Navigation/corporate-navbar
```
Copy from `code.html`.

## File Structure
`code.html` · `preview.html` · `metadata.json` · `README.md`