Navegação
03 de agosto de 2026

Dark Navbar v1

Menu suspenso para destacar recursos ou ferramentas principais da sua aplicação.

Voltar as coleções
<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>

Pré-requisitos do projeto

Para reproduzir este componente em seu ambiente de desenvolvimento, certifique-se de ter:

  • Tailwind CSS: Instalação ativa do Tailwind CSS v3 ou v4 no projeto.
  • Biblioteca de ícones: Este exemplo utiliza a CDN do Iconify para fins de demonstração (verifique a caixa de script de incorporação acima para colar no cabeçalho do seu HTML).
  • Tipografia personalizada: Caso deseje utilizar a mesma fonte da demonstração, inclua o link do Google Fonts correspondente no seu projeto.

Como integrar

  1. Copie o HTML limpo na caixa de código principal.
  2. Cole a estrutura dentro do container ou layout desejado na sua aplicação.
  3. Se o componente utilizar classes de desfoque (backdrop-blur) ou transparência, garanta que o elemento pai tenha um fundo contrastante para o efeito visual funcionar corretamente.

Tipografia e uso de fontes do seu projeto

Este componente foi construído para se adaptar ao design system da sua aplicação:

  • Fontes do seu projeto: Se você já possui uma família tipográfica configurada no seu Tailwind CSS, basta substituir as classes temporárias de fonte por font-sans, font-serif ou font-mono no container principal. O elemento herdará automaticamente a tipografia padrão da sua marca.
  • Fontes específicas: Caso queira usar uma fonte diferente apenas para este bloco, adicione a classe utilitária do Tailwind correspondente (ex: font-['Plus_Jakarta_Sans']) ou declare o nome da fonte na sua configuração.

O que você pode personalizar

  • Cores e temas: Altere as classes utilitárias do Tailwind (como bg-zinc-950, text-white, border-zinc-800) para adaptar as cores à paleta da sua marca.
  • Ícones: Substitua o atributo icon das tags de ícone por qualquer outro nome de ícone compatível com o Iconify.

Boas práticas para produção

Aviso:

As dependências via CDN (como o script externo do Iconify e links diretos do Google Fonts) incluídas na caixa de incorporação servem para testes rápidos e demonstração no playground. O carregamento de arquivos externos via CDN pode impactar negativamente a velocidade de carregamento da sua página (Core Web Vitals) e causar oscilações visuais (CLS).

Para um projeto em produção profissional, recomendamos:

  1. Hospedar fontes localmente: Baixe os arquivos de fonte (formato .woff2) e inclua-os diretamente no seu bundle ou utilize ferramentas automatizadas como o @nuxt/fonts ou Fontsource. Isso reduz requisições HTTP externas e evita o bloqueio de renderização do texto.
  2. Pacote interno de ícones: Em vez de carregar o script CDN do Iconify, instale a biblioteca de ícones diretamente no seu gerenciador de pacotes (ex: npm i @iconify/vue, @unplugin-icons ou bibliotecas nativas como Lucide / Phosphor Icons). Dessa forma, apenas os ícones efetivamente utilizados serão incluídos no seu bundle final.
Voltar as coleções
Compartilhar