Uranus Design System

NavigationMenu é a navegação horizontal pensada para headers de site e apps — cada item do topo pode abrir um painel rico embaixo com links, descrições e ícones. Use-o para estruturas de navegação amplas ou com dezenas de destinos. Para menus de ações (não de navegação) prefira DropdownMenu.

'use client';

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from '@uranus-workspace/design-system';

const produtos = [
  {
    title: 'Design System',
    href: '#design-system',
    description: 'Biblioteca oficial de componentes da Uranus para web.',
  },
  {
    title: 'Insights',
    href: '#insights',
    description: 'Dashboards e relatórios em tempo real para times de produto.',
  },
  {
    title: 'Automações',
    href: '#automacoes',
    description: 'Fluxos sem código para conectar ferramentas internas.',
  },
];

const recursos = [
  {
    title: 'Documentação',
    href: '#docs',
    description: 'Guias, referências e exemplos prontos para copiar.',
  },
  {
    title: 'Changelog',
    href: '#changelog',
    description: 'Todas as novidades, correções e releases recentes.',
  },
];

export default function NavigationMenuDefault() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Produtos</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid w-[320px] gap-2 p-3">
              {produtos.map((item) => (
                <li key={item.href}>
                  <NavigationMenuLink asChild>
                    <a
                      className="block rounded-md p-3 text-sm leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent"
                      href={item.href}
                    >
                      <div className="font-medium">{item.title}</div>
                      <p className="mt-1 line-clamp-2 text-xs text-muted-foreground">
                        {item.description}
                      </p>
                    </a>
                  </NavigationMenuLink>
                </li>
              ))}
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Recursos</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid w-[320px] gap-2 p-3">
              {recursos.map((item) => (
                <li key={item.href}>
                  <NavigationMenuLink asChild>
                    <a
                      className="block rounded-md p-3 text-sm leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent"
                      href={item.href}
                    >
                      <div className="font-medium">{item.title}</div>
                      <p className="mt-1 line-clamp-2 text-xs text-muted-foreground">
                        {item.description}
                      </p>
                    </a>
                  </NavigationMenuLink>
                </li>
              ))}
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink className={navigationMenuTriggerStyle()} href="#precos">
            Preços
          </NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

Anatomia

NavigationMenu — raiz que inclui automaticamente o NavigationMenuViewport para animar os painéis.
NavigationMenuList — a lista horizontal dos itens de topo.
NavigationMenuItem — um item da lista. Pode ter trigger + content ou ser um link direto.
NavigationMenuTrigger — botão que abre o painel. Mostra um ChevronDown animado.
NavigationMenuContent — o painel que aparece abaixo do trigger, com animação de slide lateral entre menus vizinhos.
NavigationMenuLink — link, focável e anunciado como tal. Use asChild para renderizar um <a> do Next.js.
navigationMenuTriggerStyle — helper para aplicar o visual de trigger a um link que não tem submenu.

Uso

import Link from 'next/link';
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from '@uranus-workspace/design-system';

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Produtos</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul className="grid w-[320px] gap-2 p-3">
          <li>
            <NavigationMenuLink asChild>
              <Link href="/design-system">Design System</Link>
            </NavigationMenuLink>
          </li>
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink className={navigationMenuTriggerStyle()} href="/precos">
        Preços
      </NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Faça

Mantenha o número de itens de topo entre três e sete — mais que isso empurra o usuário para uma busca ou um menu hierárquico.
Dentro do NavigationMenuContent, agrupe links por tarefa com descrições curtas ao lado do rótulo.
Para destinos sem submenu, use um NavigationMenuLink com navigationMenuTriggerStyle() para manter o visual alinhado.

Não faça

Não use NavigationMenu para ações — ele é para navegação. Ações vão em DropdownMenu ou em um botão explícito.
Não coloque formulários dentro do painel — ele é um container de navegação, não de interação.
Não esconda o ChevronDown do trigger — ele comunica que há mais conteúdo abaixo.

Acessibilidade

Construído sobre Radix NavigationMenu — segue o padrão WAI-ARIA Disclosure Navigation.
Teclado: Tab move entre triggers e links; Enter/Espaço abrem o painel; Setas esquerda/direita navegam entre os menus de topo; Esc fecha e devolve o foco ao trigger.
Cada painel é anunciado como uma região colapsável via aria-expanded.
NavigationMenuLink é um link semântico (<a> por baixo). Use sempre asChild em volta de um <Link> do Next para preservar prefetch e navegação client-side.

NavigationMenu

Anatomia

Uso

Faça

Não faça

Acessibilidade

On this page