Navegação.

Componentes para orientar deslocamento, identidade e fechamento institucional em sites, apps e temas externos.

Classes

Classes públicas disponíveis em `@carvalhorafael/proenem-css/patterns`.

ClasseTipoUso
pen-navbarComponente

Barra superior com marca, links de navegação e área de ações.

pen-brand-logoElemento

Link de marca usado na navbar e em superfícies institucionais.

pen-navbar__linksParte

Agrupamento central de links primários.

pen-navbar__linkElemento

Link de navegação dentro da navbar.

pen-navbar__link--activeEstado

Estado ativo do link; também recebe `aria-current="page"` pelo renderer.

pen-navbar__actionsParte

Agrupamento de ações à direita da navbar.

pen-navbar__actionElemento

Link de ação com área de toque maior.

pen-navbar__action--primaryVariante

Ação principal da barra.

pen-navbar__action--secondaryVariante

Ação secundária da barra.

Navbar básica

Use quando a superfície precisa de marca e links principais, sem ação dedicada.

renderNavbar({
  homeHref: "#",
  logoLabel: "ProEnem",
  links: [
    { href: "#produto", label: "Produto", active: true },
    { href: "#planos", label: "Planos" },
    { href: "#conteudos", label: "Conteúdos" },
  ],
});

Navbar com ações

Use ações à direita para entradas como autenticação, cadastro ou contato.

renderNavbar({
  homeHref: "#",
  logoLabel: "ProEnem",
  links: [
    { href: "#produto", label: "Produto", active: true },
    { href: "#planos", label: "Planos" },
    { href: "#conteudos", label: "Conteúdos" },
  ],
  actions: [
    { href: "#login", label: "Entrar", variant: "secondary" },
    { href: "#inicio", label: "Comece grátis", variant: "primary" },
  ],
});

Navbar com ação única

O campo `action` segue suportado para consumidores que precisam de apenas uma ação.

renderNavbar({
  homeHref: "#",
  logoLabel: "ProEnem",
  links: [
    { href: "#sobre", label: "Sobre" },
    { href: "#recursos", label: "Recursos", active: true },
  ],
  action: { href: "#contato", label: "Fale conosco" },
});