Configuration
There is no config file — you configure the dashboard through props on <DashboardLayout>. It is the single entry point that mounts the color-mode, sidebar, command-palette and link providers, then renders the topbar, sidebar and footer around your page content.
The DashboardLayout shell
Mount it once, typically in a route-group layout, and pass your menu plus any layout flags:
// app/(dashboard)/layout.tsx
import { DashboardLayout } from '@adminlte/react'
import { menuItems } from '@/lib/menu'
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<DashboardLayout
menuItems={menuItems}
fixedHeader
fixedSidebar
sidebarMini
colorModeToggle
initialColorMode="auto"
user={{ name: 'Jane Doe', image: '/avatar.jpg', role: 'Admin' }}
>
{children}
</DashboardLayout>
)
}DashboardLayout props
| Prop | Type | Default | Purpose |
|---|---|---|---|
menuItems | MenuNode[] | — | Sidebar menu tree (required). See Menu. |
logo | ReactNode | <b>Admin</b>LTE | Brand markup or an image src string. |
logoHref | string | / | Link target for the sidebar brand. |
user | TopbarUser | — | { name, image, role?, memberSince? } for the topbar user menu. |
sidebarTheme | 'light' | 'dark' | dark | Sidebar color scheme. |
sidebarBreakpoint | 'sm'…'xxl' | lg | Where the sidebar collapses to off-canvas. |
sidebarMini | boolean | false | Icon-only mini sidebar when collapsed. |
fixedHeader | boolean | false | Fixed topbar. |
fixedSidebar | boolean | false | Fixed (scroll-independent) sidebar. |
fixedFooter | boolean | false | Fixed footer. |
colorModeToggle | boolean | true | Show the light/dark toggle in the topbar. |
initialColorMode | 'light' | 'dark' | 'auto' | auto | Starting color mode before persistence kicks in. |
dir | 'ltr' | 'rtl' | — | Document direction (sets it on <html>). |
enableSidebarPersistence | boolean | false | Persist the collapsed state to localStorage. |
linkComponent | LinkComponent | plain <a> | Router link adapter for client-side nav (see below). |
topbarStart / topbarEnd | ReactNode | — | Custom nav items injected into the topbar. |
footer | ReactNode | — | Custom footer content. |
docsHref / docsLabel | string | — | Optional sidebar footer link. |
Client-side navigation with linkComponent
By default the sidebar renders plain <a> tags (full-page navigation). To get instant client-side routing, inject your framework's link via linkComponent — an adapter that accepts href plus the usual anchor props and renders an <a>:
'use client'
import Link from 'next/link'
import type { LinkComponent } from '@adminlte/react'
export const NavLink: LinkComponent = ({ href, children, ...rest }) => (
<Link href={href} {...rest}>{children}</Link>
)
// then: <DashboardLayout linkComponent={NavLink} … />DashboardLayout nests four providers for you — ColorModeProvider, SidebarProvider, CommandPaletteProvider and LinkProvider. You normally never mount them yourself; consume them via useColorModeContext(), useSidebarContext() and useCommandPalette() in your client components.