Pharos
Navegar componentes
← Componentes

TopNav

NavigationExemplo
TopNav é uma barra de navegação horizontal para navegação em nível de produto em headers de aplicação. Use TopNav para 5 ou menos itens de navegação sempre visíveis, ou navegação mínima emparelhada com busca e controles. Para hierarquias de navegação complexas, use uma sidebar; para filtrar conteúdo, use tabs ou filter buttons em vez disso.
Importação
import {TopNav} from '@pharos-ds/core/TopNav';

Exemplos

Área interativa

Código
import {TopNav} from '@pharos-ds/core/TopNav';

<TopNav />

Boas práticas

  • Faça: Inclua um logo e nome de produto no slot heading para identificar claramente a aplicação.
  • Faça: Limite itens de navegação primária a 5 ou menos para escaneamento rápido e carga cognitiva mínima.
  • Evite: Evite usar TopNav para filtrar conteúdo de página; use Tabs ou controles de filtro em vez disso.
  • Evite: Evite hierarquias de navegação profundamente aninhadas; mantenha menus em um nível de profundidade.

Props

PropTipoPadrãoDescrição
headingReactNode—Conteúdo do slot heading (logo, brand): posicionado na borda esquerda da nav bar.
startContentReactNode—Slot startContent para itens de navegação ou breadcrumbs: posicionado após o heading, alinhado à esquerda.
childrenReactNode—Alias para startContent. Prefira startContent ao compor com heading, centerContent ou endContent; children mantém o padrão comum React de nav-item de descartar itens silenciosamente.
centerContentReactNode—Slot centerContent (tabs, search bar, navegação primária): quando fornecido, alterna o layout para um CSS grid de três colunas para centralização horizontal verdadeira.
endContentReactNode—Slot endContent para busca, ícones ou perfil de usuário: posicionado na borda direita.
labelstring'Top navigation'Label acessível para o landmark de navegação, aplicado como aria-label no elemento <nav>.
xstyleStyleXStyles—Estilos StyleX para customização de layout (margens, posicionamento, dimensionamento). Deve ser um valor stylex.create(): não um objeto de estilo inline como style={{}}.
Pacote: @pharos-ds/core · Import: @pharos-ds/core/TopNav
TopNav · Pharos