Navegar componentes

TopNavMegaMenu

MiscExemplo

Item de navegação que exibe um painel de mega menu em largura total no hover. Usa uma API de slots com props items e featured. TopNavMegaMenuItem se renderiza nos modos desktop e drawer mobile. Suporta drawer colapsável inline via contexto de render mode.

Importação

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

Exemplos

Área interativa

label

Código

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

<TopNavMegaMenu
  label="Plataforma"
 />

Props

Prop	Tipo	Padrão	Descrição
`label` *	`string`	—	Rótulo visível do botão trigger.
`items`	`ReactNode`	—	Slot de itens do menu: tipicamente componentes TopNavMegaMenuItem, mas aceita qualquer ReactNode.
`featured`	`ReactNode`	—	Slot de conteúdo em destaque: renderizado no painel direito no desktop, abaixo dos itens no drawer mobile.
`delay`	`number`	`150`	Atraso em milissegundos antes de exibir o menu no hover.
`hideDelay`	`number`	`250`	Atraso em milissegundos antes de ocultar o menu após o mouse sair.
`onOpenChange`	`(isOpen: boolean) => void`	—	Callback disparado quando o mega menu abre ou fecha. Útil para coordenar estilos do wrapper.

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