Navegação
03 de agosto de 2026

Essential Menu

Duas opções minimalistas de menus flutuantes feitos puramente com HTML e Tailwind CSS.

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-zinc-950 text-zinc-100 min-h-screen flex flex-col items-center justify-center gap-14 p-12 antialiased selection:bg-zinc-800">

    <!-- Menu 1 -->
    <nav class="bg-zinc-900/80 backdrop-blur-md border border-zinc-800/80 rounded-2xl p-2 shadow-2xl flex items-center gap-1 sm:gap-2">

        <a href="#" class="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-zinc-800 text-white font-medium text-sm transition-all duration-200 shadow-sm">
        <iconify-icon icon="lucide:home" class="text-lg text-emerald-400"></iconify-icon>
        <span>Início</span>
        </a>

        <a href="#" class="flex items-center gap-2 px-4 py-2.5 rounded-xl text-zinc-400 hover:text-white hover:bg-zinc-800/50 transition-all duration-200 group">
        <iconify-icon icon="lucide:folder-git-2" class="text-lg transition-transform duration-200 group-hover:scale-110"></iconify-icon>
        <span class="text-sm font-medium">Projetos</span>
        </a>

        <a href="#" class="flex items-center gap-2 px-4 py-2.5 rounded-xl text-zinc-400 hover:text-white hover:bg-zinc-800/50 transition-all duration-200 group">
        <iconify-icon icon="lucide:layout-grid" class="text-lg transition-transform duration-200 group-hover:scale-110"></iconify-icon>
        <span class="text-sm font-medium">Serviços</span>
        </a>

        <a href="#" class="relative flex items-center gap-2 px-4 py-2.5 rounded-xl text-zinc-400 hover:text-white hover:bg-zinc-800/50 transition-all duration-200 group">
        <iconify-icon icon="lucide:message-square" class="text-lg transition-transform duration-200 group-hover:scale-110"></iconify-icon>
        <span class="text-sm font-medium">Contato</span>
        <span class="absolute top-2 right-2 w-2 h-2 bg-emerald-500 rounded-full ring-4 ring-zinc-900"></span>
        </a>

        <div class="h-5 w-px bg-zinc-800 my-auto mx-1"></div>

        <a href="#" class="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-white text-zinc-900 hover:bg-zinc-200 font-medium text-sm transition-all duration-200 shadow-sm">
        <iconify-icon icon="lucide:user" class="text-lg"></iconify-icon>
        <span>Perfil</span>
        </a>

    </nav>


    <!-- Menu 2 -->
    <nav class="bg-black/90 backdrop-blur-xl border border-zinc-800 rounded-full p-1.5 shadow-2xl flex items-center gap-1">

        <a href="#" class="flex items-center gap-2 px-4 py-2 rounded-full bg-white text-black font-semibold text-sm transition-all duration-200 shadow-sm">
        <iconify-icon icon="lucide:home" class="text-lg"></iconify-icon>
        <span>Início</span>
        </a>

        <a href="#" class="flex items-center gap-2 px-4 py-2 rounded-full text-zinc-400 hover:text-zinc-100 hover:bg-zinc-900 transition-all duration-200">
        <iconify-icon icon="lucide:folder-git-2" class="text-lg"></iconify-icon>
        <span class="text-sm font-medium">Projetos</span>
        </a>

        <a href="#" class="flex items-center gap-2 px-4 py-2 rounded-full text-zinc-400 hover:text-zinc-100 hover:bg-zinc-900 transition-all duration-200">
        <iconify-icon icon="lucide:layout-grid" class="text-lg"></iconify-icon>
        <span class="text-sm font-medium">Serviços</span>
        </a>

        <a href="#" class="relative flex items-center gap-2 px-4 py-2 rounded-full text-zinc-400 hover:text-zinc-100 hover:bg-zinc-900 transition-all duration-200">
        <iconify-icon icon="lucide:message-square" class="text-lg"></iconify-icon>
        <span class="text-sm font-medium">Contato</span>
        <span class="w-1.5 h-1.5 bg-white rounded-full"></span>
        </a>

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

        <a href="#" class="flex items-center gap-2 px-4 py-2 rounded-full text-zinc-300 hover:text-white hover:bg-zinc-800/80 transition-all duration-200">
        <iconify-icon icon="lucide:user" class="text-lg"></iconify-icon>
        <span class="text-sm font-medium">Perfil</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