Navigation
August 03, 2026

Essential Menu

Two minimalist options for floating menus built purely with HTML and Tailwind CSS.

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-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>

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