Navegar componentes

TopNavHeading

MiscExemplo

Heading de produto/suite/conta para o slot heading do TopNav. Suporta lógica inteligente de boundary de interação: logo, texto do heading, superheading/subheading com links independentes e um popover de menu opcional com indicador chevron automático.

Importação

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

Exemplos

Área interativa

Supertítulo

Subtítulo

Código

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

<TopNavHeading
  showSuperheading
  showSubheading={false}
 />

Props

Prop	Tipo	Padrão	Descrição
`logo`	`ReactNode`	—	Elemento de logo a exibir antes do texto do heading. Pode ser uma imagem, NavIcon ou qualquer ReactNode.
`heading`	`string`	—	Nome do produto/app exibido como texto principal do heading.
`headingHref`	`string`	—	Link para o texto do heading (ex.: home do produto). Quando não há menu e este é o único href, todo o heading se torna um link clicável.
`href`	`string`	—	Deprecated: use headingHref em vez disso. URL para navegar quando clicado.
`superheading`	`string`	—	Texto acima do heading (ex.: nome da suite). Renderizado em estilo secondary menor.
`superheadingHref`	`string`	—	Link para o texto do superheading (ex.: home da suite). Quando fornecido junto com um menu, renderiza como link inline independente.
`subheading`	`string`	—	Texto abaixo do heading (ex.: contexto de conta). Renderizado em estilo secondary menor.
`subheadingHref`	`string`	—	Link para o texto do subheading. Quando fornecido junto com um menu, renderiza como link inline independente.
`headerEndContent`	`ReactNode`	—	Conteúdo renderizado na extremidade final da linha do heading (ex.: badge ou indicador de status).
`menu`	`ReactNode`	—	Conteúdo de menu exibido em um dropdown popover. Quando fornecido, um indicador chevron aparece automaticamente. O boundary de interação é determinado pela presença de hrefs: sem hrefs significa que todo o header é o trigger; com hrefs, links são independentes e a área do chevron é o trigger.
`as`	`LinkComponentType`	—	Componente customizado a renderizar em vez de <a>. Substitui o padrão de nível de provider definido por LinkProvider. Deve aceitar props href, className, style e children.
`xstyle`	`StyleXStyles`	—	Estilos StyleX para customização de layout. Deve ser um valor stylex.create().

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