componente · @solu30/ui-kit/navigation
SidebarNavigation
El componente, montado
Cargando el componente del paquete instalado…
Cargando el chunk del paquete instalado…
De dónde se importa
import { SidebarNavigation } from '@solu30/ui-kit/navigation'Props
| Prop | Requerida | Tipo | Qué hace |
|---|---|---|---|
| groups | opcional | SidebarNavGroup[] | Navigation groups containing items (primary API). Provide either `groups` or `items`, not both. |
| items | opcional | SidebarNavItem[] | Flat items shorthand — automatically wrapped in a single unlabeled group. Provide either `items` or `groups`, not both. |
| activeItemId | opcional | string | ID of the currently active item |
| collapsed | opcional | boolean | Whether the sidebar is collapsed (icons only) — controlled mode |
| defaultCollapsed | opcional | boolean | Initial collapsed state for uncontrolled mode (ignored when `collapsed` is provided) |
| onCollapsedChange | opcional | (collapsed: boolean) => void | Callback when collapsed state changes |
| header | opcional | ReactNode | { | Header slot (logo/brand area). Accepts either a ReactNode or a plain object `{ title, subtitle? }` for a default header layout. |
| title | sí | string | — |
| subtitle | opcional | string | — |
| footer | opcional | ReactNode | Footer slot (user menu area) |
| onItemClick | opcional | (item: SidebarNavItem) => void | Callback when a nav item is clicked |
| className | opcional | string | Additional class names |
| mobileOpen | opcional | boolean | Whether the mobile drawer is open |
| onMobileOpenChange | opcional | (open: boolean) => void | Callback when mobile drawer state changes |
| appearance | opcional | "boxed" | "plain" | Visual style variant for items. (ADR-079) - "boxed" (default): current behavior — icon in a rounded box bg, padded items. All existing consumers use this implicitly. Zero breaking change. - "plain": compact list style — icon rendered loose (no background box), reduced vertical padding, items tighter together. Active state is subtle (text-primary + very light bg tint). Enables `childGroups` section headers. ADR-003: both variants use only cmpPreset tokens. |
Ejemplo del paquete
<SidebarNavigation
groups={[
{
label: 'Main',
items: [
{ id: 'dashboard', label: 'Dashboard', href: '/', icon: HomeIcon },
{ id: 'orders', label: 'Orders', href: '/orders', icon: BoxIcon, badge: 5 },
],
},
]}
activeItemId="dashboard"
header={<Logo />}
footer={<UserMenu />}
/>Del @example del JSDoc de @solu30/ui-kit, sin editar. Cuatro de los 69 ejemplos del paquete traen pegada la firma cruda del .d.ts —el mismo defecto del extractor que se come las descripciones—, y por eso la caja tiene tope de alto: el ejemplo de verdad suele estar al final.