componente · @solu30/ui-kit/navigation
ContextualSidebar
El componente, montado
Cargando el componente del paquete instalado…
Cargando el chunk del paquete instalado…
De dónde se importa
import { ContextualSidebar } from '@solu30/ui-kit/navigation'Props
| Prop | Requerida | Tipo | Qué hace |
|---|---|---|---|
| sections | sí | ContextualSidebarSection[] | L1 sections with their items |
| activeItemId | opcional | string | ID of the currently active L1 item — auto-opens the containing section |
| activeSubItems | opcional | ContextualSidebarItem[] | When provided (non-empty), replaces the L1 view with an L2 sub-panel. The consumer controls which items to show. |
| subPanelLabel | opcional | string | Header label shown at the top of the L2 sub-panel |
| onSubPanelBack | opcional | () => void | Called when the user clicks "back" from the L2 sub-panel |
| onNavigate | sí | (item: ContextualSidebarItem) => void | Navigation callback — called with the clicked item; consumer does the push |
| resolveIcon | opcional | (name: string) => ReactNode | Maps string icon names to ReactNodes. Used when `item.icon` is a string (e.g. "IconClipboard"). Falls back to null when not provided or name not found. |
| collapsed | opcional | boolean | Controlled collapsed (icon-only) state |
| onCollapsedChange | opcional | (collapsed: boolean) => void | Called when the collapse toggle is clicked |
| header | opcional | ReactNode | { | Sidebar header. Pass a ReactNode for full control, or `{ title, subtitle? }` for default layout. |
| title | sí | string | — |
| subtitle | opcional | string | — |
| headerHeightClass | opcional | string | Overrides the header row height (default `h-14` = 56px). Pass a Tailwind height class (e.g. `"h-16"`) so the sidebar header can be aligned with the consumer's content header band. |
| backTo | opcional | ContextualSidebarBackTo | Optional "back" affordance rendered at the top of the sidebar body (below the header, above the sections). Shown only within internal/nested sections — the consumer passes it when it applies. Collapses to icon-only when the rail is collapsed. |
| footer | opcional | ReactNode | Footer slot (user menu, settings link, etc.) |
| className | opcional | string | Extra class names on the root aside element |
| subPanelAlwaysExpanded | opcional | boolean | When true, the L2 sub-panel renders readable labels even if the rail is collapsed (items get isCollapsed=false, back-button shows its label). ADR-077. |
| collapsedMode | opcional | ContextualSidebarCollapsedMode | Collapsed-rail mode. Default 'items' (current behavior). ADR-077. |
| onSectionActivate | opcional | (section: ContextualSidebarSection) => void | Called when a section icon is clicked in collapsedMode="sections". Consumer drives the drill-in (e.g. set activeSubItems to the section items). ADR-077. |
| openState | opcional | ContextualSidebarOpenState | Controlled open/closed state for enhanced sections/groups (`content`). Uncontrolled when omitted — internal state seeded from `defaultOpenState`. ADR-027 addendum v2. |
| defaultOpenState | opcional | ContextualSidebarOpenState | Initial open/closed state when uncontrolled. ADR-027 addendum v2. |
| onOpenStateChange | opcional | (next: ContextualSidebarOpenState) => void | Called on every open/closed change (controlled mode: the ONLY way state changes — the component never mutates internally). ADR-027 addendum v2. |
| decorativeGlow | opcional | boolean | When `false`, removes the `drop-shadow-[0_0_6px_currentColor]` glow from the accented icons (active leaf item, section header with an active child) — the accent color itself is untouched, only the halo. Default `true` = current behavior, byte-identical for any consumer that omits this prop. ADR-027 addendum v5. |
| sectionBadgeRollup | opcional | boolean | When `true`, a CLOSED collapsible section shows, on its own header, the SUM of the numeric badges of the items it hides — with the most severe tone among them (`error` > `warning` > `info` > `accent` > default > `success`). Same treatment on the collapsed rail in `collapsedMode="sections"`, where the bubble sits on the section icon. Without this, a counter placed on a leaf only exists once the user opens the accordion that hides it — i.e. it never warns the person who is not already looking there. Text badges (`badge: "New"`) never participate: a roll-up is a count. Default `false` = current behavior, byte-identical for any consumer that omits this prop. ADR-027 addendum v6. |
Ejemplo del paquete
<ContextualSidebar
sections={LUIGI_SECTIONS}
activeItemId={activeId}
onNavigate={(item) => router.push(item.href ?? "/")}
header={{ title: "Luigi" }}
/>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.