NavigationMenu
Topo de site
import { NavigationMenu } from '@rivocode/ui'Quando usar
A navegação de topo de site, com painel por secao.
Não e Menu: aquele lista ações que se executam, este lista lugares para onde
ir, e o painel pode ter texto, imagem e várias colunas. O leitor de tela anuncia
os dois de formas diferentes, e trocar um pelo outro faz o menu de ações
prometer navegação que não existe.
Em tela de aplicação, Sidebar costuma servir melhor. Este e para página de
marketing e portal.
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Produtos</NavigationMenuTrigger>
<NavigationMenuContent>
<NavigationMenuLink href="/notas">Emissao de notas</NavigationMenuLink>
<NavigationMenuLink href="/cobranca">Cobranca</NavigationMenuLink>
</NavigationMenuContent>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
O painel e único e fica fora da lista: e ele que desliza de uma secao para a outra em vez de piscar entre paineis.
As partes
NavigationMenuViewport é o painel onde o conteúdo do item aberto aparece.
Fica fora dos itens, e não dentro de cada um: assim a troca entre dois menus
vizinhos anima de um para o outro em vez de fechar e abrir.
No React Native
Não porta, por decisão - idioma de mesa; navegação nativa é tab bar e drawer do router. Não é fila: não vai existir. A tabela de paridade diz o porquê de cada uma.
API
| Prop | Tipo |
|---|---|
actionsRef0.4.0A ref to imperative actions. | RefObject<NavigationMenuRootActions | null> |
closeDelay0.4.0How long to wait before closing the navigation popup. | number |
defaultValue0.4.0The uncontrolled value of the item that should be initially selected. | Value | null |
delay0.4.0How long to wait before opening the navigation popup. | number |
onOpenChangeComplete0.4.0Event handler called after any animations complete when the navigation menu is closed. | ((open: boolean) => void) |
onValueChange0.4.0Callback fired when the value changes. | ((value: Value | null, eventDetails: NavigationMenuRootChangeEventDetails) => void) |
orientation0.4.0The orientation of the navigation menu. | "horizontal" | "vertical" |
render0.4.0Allows you to replace the component's HTML element with a different tag, or compose it with another component. | ComponentRenderFn<HTMLProps, NavigationMenuRootState>ReactElement<unknown, stringJSXElementConstructor<any>> |
value0.4.0The controlled value of the navigation menu item that should be currently open. | Value | null |
Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.