Navegar componentes

SideNavItem

MiscExemplo

Item de navegação com ícone, estado selecionado, end content opcional e suporte a aninhamento via children.

Importação

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

Exemplos

isSelected

isDisabled

Badge no fim

Código

import {SideNav, SideNavItem} from '@pharos-ds/core/SideNav';

<SideNav
  isSelected
  isDisabled={false}
  hasEndContent
 />

Prop	Tipo	Padrão	Descrição
`label` *	`string`	—	Rótulo do item.
`as`	`LinkComponentType`	—	Componente de link personalizado.
`icon`	`IconType`	—	Ícone exibido no variant outline (não selecionado). Veja `pharos docs icons` para nomes semânticos válidos.
`selectedIcon`	`IconType`	—	Ícone exibido quando o item está selecionado (variant filled). Veja `pharos docs icons` para nomes semânticos válidos.
`isSelected`	`boolean`	`false`	Marca este item como a página atual.
`isDisabled`	`boolean`	`false`	Estado desabilitado.
`href`	`string`	—	URL de navegação.
`onClick`	`(e: MouseEvent) => void`	—	Handler de clique.
`endContent`	`ReactNode`	—	Conteúdo do lado direito como badges ou contagens.
`children`	`ReactNode`	—	Subitens para aninhamento.
`collapsible`	`boolean \| { defaultIsCollapsed?: boolean, isCollapsed?: boolean, onCollapsedChange?: (isCollapsed: boolean) => void }`	`false`	Habilita comportamento de colapsar para itens com children. Passe true para modo não controlado (começa expandido) ou um objeto para modo controlado.

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