Menu & Sidebar

The sidebar is driven entirely by a typed MenuNode[] array you pass to DashboardLayout's menuItems prop. Active state is computed automatically from the current route, and the same tree feeds the ⌘K command palette for free.

The menu data model

A menu is an array of MenuNode — a discriminated union of three node types, keyed by type:

Type	Shape	Renders as
`'header'`	`{ type, text }`	A non-clickable section label.
`'item'`	`{ type, text, href, icon?, iconColor?, badge?, badgeColor?, target? }`	A clickable link.
`'group'`	`{ type, text, icon?, iconColor?, badge?, badgeColor?, children }`	A collapsible treeview of nested nodes.

A real menu example

// lib/menu.ts
import type { MenuNode } from '@adminlte/react'

export const menuItems: MenuNode[] = [
  {
    type: 'group',
    text: 'Dashboard',
    icon: 'bi bi-speedometer',
    children: [
      { type: 'item', text: 'Dashboard v1', href: '/', icon: 'bi bi-circle' },
      { type: 'item', text: 'Dashboard v2', href: '/index2', icon: 'bi bi-circle' },
    ],
  },
  { type: 'header', text: 'MANAGEMENT' },
  {
    type: 'item',
    text: 'Users',
    href: '/users',
    icon: 'bi bi-people',
    badge: 'new',
    badgeColor: 'success',
  },
  {
    type: 'item',
    text: 'Documentation',
    href: 'https://adminlte.io',
    icon: 'bi bi-book',
    target: '_blank',
  },
]

Item fields

Field	Type	Purpose
`text`	`string`	The visible label.
`href`	`string`	Target URL (items only). Use `#` for placeholders.
`icon`	`string`	Bootstrap Icons class, e.g. `bi bi-people`.
`iconColor`	`BootstrapTheme`	Optional themed icon color.
`badge`	`string \| number`	A small badge after the label.
`badgeColor`	`BootstrapTheme`	Badge color (primary, success, danger, …).
`target`	`'_blank' \| '_self'`	Link target, e.g. for external links.
`children`	`MenuNode[]`	Nested nodes (groups only) — rendered as a collapsible treeview.

Active-state detection

The sidebar uses next/navigation to read the current pathname and marks items active automatically:

A leaf item is active when its href matches the current path.
A group opens and highlights when any descendant is active.
Placeholder links (href: '#') are never marked active.

Because detection relies on the Next router, the active sidebar requires Next.js. Inject a linkComponent (see Configuration) for client-side navigation between menu items.

The command palette is built from the menu

Every navigable menu entry is searchable in the ⌘K palette with no extra work — DashboardLayout flattens the menu into commands automatically. You can also call the helper directly:

import { flattenMenuToCommands } from '@adminlte/react'
import type { CommandItem } from '@adminlte/react'

const commands: CommandItem[] = flattenMenuToCommands(menuItems)
// [{ label, href, icon?, section? }, …] — section is the nearest header/group text

flattenMenuToCommands skips placeholder links (href === '#') and de-duplicates by href. It lives outside the client palette module so Server Components can call it during server render.

AdminLTE 4 · React port Edit on GitHub