Navigation
August 03, 2026

Dark Navbar v1

Dropdown menu to highlight key features or tools of your application.

Back to collections
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,700&display=swap" rel="stylesheet">
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<body class="bg-black text-zinc-100 min-h-screen flex items-center justify-center p-8 antialiased selection:bg-zinc-800">

    <nav class="relative flex items-center gap-2 p-2 rounded-2xl bg-zinc-950/90 backdrop-blur-2xl border border-zinc-800/80 shadow-[0_25px_60px_-15px_rgba(0,0,0,1)] -mt-48">

        <a href="#" class="flex items-center gap-2 px-4 py-2.5 rounded-xl text-zinc-400 hover:text-white hover:bg-zinc-900 transition-all duration-200"> 
        <iconify-icon icon="ph:squares-four-bold" class="text-lg text-zinc-400"></iconify-icon>
        <span class="text-sm font-medium">Overview</span>
        </a>

        <div class="relative group">
        <button class="flex items-center gap-2 px-4 py-2.5 rounded-xl text-white bg-zinc-900 border border-zinc-800 shadow-sm transition-all duration-200 group-hover:bg-zinc-800">
            <iconify-icon icon="ph:sparkle-fill" class="text-lg text-white rotate-12"></iconify-icon>
            <span class="text-sm font-medium">Recursos</span>
            <iconify-icon icon="ph:caret-down-bold" class="text-xs text-zinc-400 transition-transform duration-200 group-hover:rotate-180"></iconify-icon>
        </button>

        <div class="absolute left-1/2 -translate-x-1/2 top-full pt-3 opacity-0 scale-95 pointer-events-none invisible group-hover:opacity-100 group-hover:scale-100 group-hover:pointer-events-auto group-hover:visible transition-all duration-200 ease-out z-50">

            <div class="w-80 p-2 rounded-2xl bg-zinc-950/95 backdrop-blur-2xl border border-zinc-800/90 shadow-2xl shadow-black relative overflow-hidden">
    
            <div class="absolute -top-10 left-1/2 -translate-x-1/2 w-32 h-16 bg-white/10 blur-2xl pointer-events-none"></div>

            <div class="relative space-y-1">
                <a href="#" class="group/item flex items-start gap-3 p-2.5 rounded-xl bg-zinc-900/60 hover:bg-zinc-900 border border-zinc-800/60 hover:border-zinc-700 transition-all duration-150">
                <div class="flex items-center justify-center w-9 h-9 rounded-lg bg-zinc-800 border border-zinc-700 text-white group-hover/item:scale-110 group-hover/item:bg-white group-hover/item:text-black transition-all duration-200">
                    <iconify-icon icon="ph:cpu-duotone" class="text-lg"></iconify-icon>
                </div>
                <div class="flex-1">
                    <div class="flex items-center justify-between">
                    <span class="text-xs font-semibold text-zinc-100 group-hover/item:text-white">AI Engine</span>
                    <span class="px-1.5 py-0.5 text-[10px] font-mono font-medium rounded-md bg-zinc-800 text-zinc-300 border border-zinc-700">v2.4</span>
                    </div>
                    <p class="text-[11px] text-zinc-400 mt-0.5">Modelos generativos de alta performance.</p>
                </div>
                </a>

                <a href="#" class="group/item flex items-start gap-3 p-2.5 rounded-xl hover:bg-zinc-900 border border-transparent hover:border-zinc-800 transition-all duration-150">
                <div class="flex items-center justify-center w-9 h-9 rounded-lg bg-zinc-900 border border-zinc-800 text-zinc-400 group-hover/item:scale-110 group-hover/item:bg-white group-hover/item:text-black transition-all duration-200">
                    <iconify-icon icon="ph:palette-duotone" class="text-lg"></iconify-icon>
                </div>
                <div class="flex-1">
                    <div class="flex items-center justify-between">
                    <span class="text-xs font-semibold text-zinc-300 group-hover/item:text-white">Design System</span>
                    </div>
                    <p class="text-[11px] text-zinc-400 mt-0.5">Tokens e variáveis monocromáticas.</p>
                </div>
                </a>
            </div>

            <div class="mt-2 pt-3 border-t border-zinc-900 px-2.5 py-1 flex items-center justify-between text-[11px] text-zinc-500">
                <span>Atalho rápido</span>
                <kbd class="px-1.5 py-0.5 rounded bg-zinc-900 border border-zinc-800 font-mono text-[10px] text-zinc-300">⌘ + K</kbd>
            </div>

            </div>
        </div>
        </div>

        <div class="h-4 w-[1px] bg-zinc-800 mx-1"></div>

        <a href="#" class="group flex items-center gap-2 px-4 py-2.5 rounded-xl bg-white text-zinc-950 text-xs font-semibold hover:bg-zinc-200 transition-all duration-200 shadow-lg shadow-white/5">
            <iconify-icon icon="ph:lightning-fill" class="text-zinc-950 text-lg group-hover:scale-125 transition-transform"></iconify-icon>
            <span>Deploy</span>
        </a>

    </nav>

</body>

Project prerequisites

To replicate this component in your development environment, make sure you have:

  • Tailwind CSS: An active installation of Tailwind CSS v3 or v4 in your project.
  • Icon library: This example uses the Iconify CDN for demonstration purposes (check the embed script box above to paste into your HTML head).
  • Custom typography: If you want to use the same font as the demo, include the corresponding Google Fonts link in your project.

How to integrate

  1. Copy the clean HTML from the main code box.
  2. Paste the structure inside the desired container or layout in your application.
  3. If the component uses blur (backdrop-blur) or transparency classes, ensure the parent element has a contrasting background for the visual effect to work properly.

Typography and font usage in your project

This component was built to adapt to your application's design system:

  • Your project's fonts: If you already have a font family configured in your Tailwind CSS, simply replace the temporary font classes with font-sans, font-serif, or font-mono on the main container. The element will automatically inherit your brand's default typography.
  • Specific fonts: If you want to use a different font just for this block, add the corresponding Tailwind utility class (e.g., font-['Plus_Jakarta_Sans']) or declare the font name in your config.

What you can customize

  • Colors and themes: Change the Tailwind utility classes (such as bg-zinc-950, text-white, border-zinc-800) to adapt the colors to your brand palette.
  • Icons: Replace the icon attribute on icon tags with any other Iconify-compatible icon name.

Production best practices

Warning:

The CDN dependencies (such as the external Iconify script and direct Google Fonts links) included in the embed box are meant for quick testing and playground demonstrations. Loading external files via CDN can negatively impact your page load speed (Core Web Vitals) and cause layout shifts (CLS).

For a professional production project, we recommend:

  1. Host fonts locally: Download the font files (.woff2 format) and include them directly in your bundle, or use automated tools like @nuxt/fonts or Fontsource. This reduces external HTTP requests and prevents render-blocking text.
  2. Internal icon package: Instead of loading the Iconify CDN script, install the icon library directly via your package manager (e.g., npm i @iconify/vue, @unplugin-icons, or native libraries like Lucide / Phosphor Icons). That way, only the icons actually used will be included in your final bundle.
Back to collections
Share this