Sidebar

Pages with "layout": "dashboard" in src/data/pages.json render inside DashboardLayout (src/layouts/dashboard-layout.tsx): the sidebar, the navbar, the page in <main className="content"> and the footer.

<LayoutProvider>
  <div className="wrapper">
    <Sidebar />

    <div className="main">
      <Navbar />

      <main className="content reveal-cards">
        <div className="container-fluid p-0">{children}</div>
      </main>

      <Footer />
    </div>
  </div>
</LayoutProvider>

MenuCopy Anchor Link

The sidebar menu is data: navigation in src/data/navigation.ts, a list of sections with a header and items. Add a page by adding an item with its route and a Lucide icon from lucide-react:

import { ChartNoAxesColumn } from "lucide-react";

export const navigation: NavSection[] = [
  {
    header: "Pages",
    items: [
      // ...
      { title: "Reports", href: "/reports", icon: ChartNoAxesColumn },
    ],
  },
];

The free version's menu has no badges or sub-menus.

SidebarCopy Anchor Link

Sidebar (src/components/sidebar/sidebar.tsx) holds the brand, the menu (SidebarNav) and the call-to-action box at the bottom, in a SimpleBar scroll area. From the lg breakpoint (992px) up it is a column of the layout. Below lg it is an offcanvas sheet over the page (the Offcanvas component with responsive="lg"): the navbar toggle opens it, and a link, Escape or the backdrop closes it.

The navbar toggle and the sheet share their state through LayoutProvider (src/contexts/layout-context.tsx). A component can read it with useLayout(): sheetOpen, setSheetOpen, toggleSidebar and expanded.

From lg up, the toggle hides and shows the sidebar in the free version. In AdminKit PRO it switches between the full and the compact (icon-only) sidebar, data-sidebar-layout="default" or "compact" on <body>, and stores the choice as adminkit_config_sidebarLayout; the head script applies it before the page is painted. AdminKit PRO can also put the sidebar on the right (data-sidebar-position="right"), and the sheet then opens from the right. See Theming.

NavbarCopy Anchor Link

Navbar (src/components/navbar/navbar.tsx) is the top bar: the sidebar toggle, a search field, and on the right the notifications, messages, the color mode toggle and the user menu. AdminKit PRO adds the mega menus, the language menu and a fullscreen button. Each menu is a component in src/components/navbar/ built on the Dropdown component, with demo content to replace with your own.

FooterCopy Anchor Link

Footer (src/components/ui/footer.tsx) shows the copyright and a list of links. Change the links there; the year comes from site.year in src/lib/site.ts.