Navegar componentes

TopNavItem

MiscExemplo

Item de link de navegação para uso no startContent do TopNav: renderiza como anchor com estados de hover e selected.

Importação

import {TopNavItem} from '@pharos-ds/core/TopNavItem';

Exemplos

isSelected

isDisabled

Código

import {TopNavItem} from '@pharos-ds/core/TopNavItem';

<TopNavItem
  isSelected={false}
  isDisabled={false}
 />

Prop	Tipo	Padrão	Descrição
`label` *	`string`	—	Rótulo acessível do item de nav. Renderizado como texto visível por padrão. Quando isIconOnly é true, usado como aria-label.
`href`	`string`	—	URL alvo de navegação.
`isSelected`	`boolean`	`false`	Se este item de nav está atualmente selecionado. Define aria-current="page" e aplica estilos destacados.
`isDisabled`	`boolean`	`false`	Se o item de nav está desabilitado. Define aria-disabled, remove href/target para que o item não navegue e impede interação.
`isIconOnly`	`boolean`	`false`	Renderiza o item como elemento quadrado somente com ícone. Quando true, label vira o aria-label e o texto visível é oculto. Requer icon definido.
`icon`	`ReactNode`	—	Ícone opcional exibido antes do rótulo.
`children`	`ReactNode`	—	Conteúdo customizado a renderizar no lugar do texto do rótulo.
`as`	`LinkComponentType`	—	Componente customizado a renderizar em vez de <a>. Sobrescreve o padrão em nível de provider definido por LinkProvider. Deve aceitar props href, className, style e children.

Pacote: @pharos-ds/core · Import: @pharos-ds/core/TopNavItem