Skip to Content
ComponentsAtomsNavigation Menu

Navigation Menu

Atom

Navigation Menu leva a pessoa para outro destino. Ele não executa ação destrutiva.

Exemplos copiáveis

React

import * as React from "react"
 
type NavItem = { label: string; href: string; current?: boolean }
 
export function PulsoNavigationMenu({ items }: { items: NavItem[] }) {
  return (
    <nav aria-label="Navegação principal">
      <ul className="flex flex-wrap gap-2">
        {items.map((item) => (
          <li key={item.href}>
            <a aria-current={item.current ? "page" : undefined} href={item.href} className={[
              "inline-flex rounded-[var(--radius-sm)] px-3 py-2 text-sm font-medium",
              item.current ? "bg-[var(--primary-soft)] text-[var(--primary)]" : "text-[var(--fg-muted)] hover:bg-[var(--muted)] hover:text-[var(--fg)]",
            ].join(" ")}>{item.label}</a>
          </li>
        ))}
      </ul>
    </nav>
  )
}
<PulsoNavigationMenu items={[{ label: "Foundations", href: "/foundations", current: true }, { label: "Components", href: "/components" }]} />

Regras

  1. Navigation Menu navega; não confirma ação.
  2. Use aria-current para página ativa.
  3. Labels precisam ser curtos e previsíveis.
  4. Não esconda destinos essenciais atrás de hover apenas.
Last updated on
MenubarPopover