Saltar al contenido
El Muestrario

componente · @solu30/ui-kit/navigation

AppLayout

El componente, montado

Cargando el componente del paquete instalado…

Cargando el chunk del paquete instalado…

De dónde se importa

import { AppLayout } from '@solu30/ui-kit/navigation'

Props

13 props declaradas en los tipos de la versión instalada.
PropRequeridaTipoQué hace
sidebarGroupsopcionalSidebarNavGroup[]Navigation groups for the sidebar (primary API — prefer this over `sidebarItems`).
sidebarItemsopcionalSidebarNavItem[]Flat nav items shorthand — automatically wrapped in a single group. Ignored when `sidebarGroups` is provided.
activeItemopcionalstringCurrently active sidebar item id.
onItemChangeopcional(itemId: string) => voidCalled when the user clicks a sidebar nav item.
sidebarHeaderopcionalAppLayoutSidebarHeader | ReactNodeSidebar header displayed above the nav groups (title + optional subtitle). Accepts either a plain object `{ title, subtitle? }` or any ReactNode.
sidebarFooteropcionalReactNodeContent rendered at the bottom of the sidebar, below nav items (footer slot). Typical use: user menu, app version, or supplementary actions.
backToopcionalAppLayoutBackTo"Back to main menu" affordance. When provided, renders a back button above the sidebar nav — the heart of multi-context navigation (e.g. "back to platform" from inside a tenant sub-app). Supports both callback (SPA/router) and href (cross-host) navigation. @example backTo={{ label: "Volver al menú principal", onBack: () => router.push("/") }} backTo={{ label: "Volver a la plataforma", href: "https://platform.example.com" }}
headerPropsopcionalHeaderBarPropsProps forwarded to HeaderBar. When omitted, no header is rendered.
useMobileTabNavigationopcionalbooleanWhen `true` (default), mobile layout renders horizontal scrollable tabs instead of the sidebar overlay.
contentClassNameopcionalstringAdditional CSS class names applied to the content area wrapper.
classNameopcionalstringAdditional CSS class names applied to the root layout wrapper.
sidebarPropsopcionalOmit<SidebarNavigationProps, "groups" | "items" | "activeItemId" | "onItemClick" | "header" | "footer">Additional props forwarded to SidebarNavigation (e.g. `defaultCollapsed`). `groups`, `items`, `activeItemId`, `onItemClick`, `header`, `footer` are controlled by AppLayout and will be overridden if supplied here.
childrensíReactNodePage content

Ejemplo del paquete

backTo={{ label: "Volver al menú principal", onBack: () => router.push("/") }}
backTo={{ label: "Volver a la plataforma", href: "https://platform.example.com" }}
/
backTo?: AppLayoutBackTo;
/**
Props forwarded to HeaderBar. When omitted, no header is rendered.
/
headerProps?: HeaderBarProps;
/**
When `true` (default), mobile layout renders horizontal scrollable tabs
instead of the sidebar overlay.
/
useMobileTabNavigation?: boolean;
/**
Additional CSS class names applied to the content area wrapper.
/
contentClassName?: string;
/**
Additional CSS class names applied to the root layout wrapper.
/
className?: string;
/**
Additional props forwarded to SidebarNavigation (e.g. `defaultCollapsed`).
`groups`, `items`, `activeItemId`, `onItemClick`, `header`, `footer`
are controlled by AppLayout and will be overridden if supplied here.
/
sidebarProps?: Omit<SidebarNavigationProps, "groups" | "items" | "activeItemId" | "onItemClick" | "header" | "footer">;
/** Page content */
children: ReactNode;
}
declare const appLayoutVariants: tailwind_variants.TVReturnType<{
[key: string]: {
[key: string]: tailwind_merge.ClassNameValue | {
content?: tailwind_merge.ClassNameValue;
root?: tailwind_merge.ClassNameValue;
header?: tailwind_merge.ClassNameValue;
sidebarInner?: tailwind_merge.ClassNameValue;
contentCol?: tailwind_merge.ClassNameValue;
backChevron?: tailwind_merge.ClassNameValue;
backLabel?: tailwind_merge.ClassNameValue;
backButton?: tailwind_merge.ClassNameValue;
};
};
} | {
[x: string]: {
[x: string]: tailwind_merge.ClassNameValue | {
content?: tailwind_merge.ClassNameValue;
root?: tailwind_merge.ClassNameValue;
header?: tailwind_merge.ClassNameValue;
sidebarInner?: tailwind_merge.ClassNameValue;
contentCol?: tailwind_merge.ClassNameValue;
backChevron?: tailwind_merge.ClassNameValue;
backLabel?: tailwind_merge.ClassNameValue;
backButton?: tailwind_merge.ClassNameValue;
};
};
} | {}, {
root: string;
sidebarInner: string;
contentCol: string;
header: string;
content: string;
backButton: string[];
backChevron: string;
backLabel: string;
}, undefined, {
[key: string]: {
[key: string]: tailwind_merge.ClassNameValue | {
content?: tailwind_merge.ClassNameValue;
root?: tailwind_merge.ClassNameValue;
header?: tailwind_merge.ClassNameValue;
sidebarInner?: tailwind_merge.ClassNameValue;
contentCol?: tailwind_merge.ClassNameValue;
backChevron?: tailwind_merge.ClassNameValue;
backLabel?: tailwind_merge.ClassNameValue;
backButton?: tailwind_merge.ClassNameValue;
};
};
} | {}, {
root: string;
sidebarInner: string;
contentCol: string;
header: string;
content: string;
backButton: string[];
backChevron: string;
backLabel: string;
}, tailwind_variants.TVReturnType<unknown, {
root: string;
sidebarInner: string;
contentCol: string;
header: string;
content: string;
backButton: string[];
backChevron: string;
backLabel: string;
}, undefined, unknown, unknown, undefined>>;
type AppLayoutVariantProps = VariantProps<typeof appLayoutVariants>;
/**
AppLayout — standard CMP application shell.
Composes SidebarNavigation, HeaderBar, and MobileTabNavigation into a
responsive full-height layout. Provides a first-class "back to main menu"
affordance (`backTo` prop) for multi-context navigation (e.g. inside a
tenant sub-app, returning to the platform shell).
ADR-070: new public export — additive, no breaking changes.
<AppLayout
sidebarGroups={navGroups}
activeItem={activeTab}
onItemChange={setActiveTab}
sidebarHeader={{ title: "Empresa ACME", subtitle: "Panel de gestión" }}
backTo={{ label: "Volver al menú principal", onBack: () => router.push("/platform") }}
headerProps={{ title: "Dashboard", subtitle: "Vista general" }}
>
{renderContent()}
</AppLayout>

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.