# Next.js Sidebar Layout

One Next.js sidebar layout frames every AdminKit dashboard page: the sidebar, navbar and footer stay put as you navigate, and the menu is plain data.

Every dashboard page in [AdminKit for Next.js](/nextjs/), free and PRO, sits in the same frame: the sidebar with the menu, the navbar on top and the footer below. You only write the page in the middle.

That frame is an App Router layout. A layout wraps the pages of its folder and stays on screen while you move between them. Only the page inside it changes. Here, `src/app/(dashboard)/layout.tsx` wraps every page of the `(dashboard)` route group in `DashboardLayout`. A route group is a folder in brackets: it gives pages a shared layout without adding its name to their URLs.

`DashboardLayout`, in `src/layouts/dashboard-layout.tsx`, puts the sidebar, the navbar, the page in `<main class="content">` and the footer together:

```tsx title="src/layouts/dashboard-layout.tsx"
<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>
```

## Menu

The menu is not markup but data: `navigation` in `src/data/navigation.ts`. It is a list of sections, each with a header and items. When you add a page, add an item for it with its route and a [Lucide](https://lucide.dev/icons/) icon from `lucide-react`:

```ts title="src/data/navigation.ts"
import { ChartNoAxesColumn } from "lucide-react";

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

| Field | Type | Description |
| --- | --- | --- |
| `title` | `string` | The label |
| `href` | `string` | The route; the item is active when it is the current route |
| `icon` | `LucideIcon` | The icon before the label of a top-level item |
| `badge` (PRO) | `true \| string` | `true` for the PRO badge, or the text of a light badge |
| `children` (PRO) | `NavItem[]` | A sub-menu that opens and closes; it opens by itself when one of its items is the current route |

In the free version, items have `title`, `href` and `icon`.

## Sidebar

`Sidebar` holds the brand, the menu (`SidebarNav`) and the call-to-action box at the bottom, in a scroll area made with SimpleBar. In AdminKit PRO there is also the user block with the account menu (`SidebarUser`). `SidebarNav` links with `next/link`. It reads the current route with `usePathname()` and marks that item as active.

`Sidebar` is a client component, a file that starts with `"use client"`. Server components render once, at build time, and have no state. The sidebar needs to follow the current route and the toggle, so it runs in the browser too. Its code is in `src/components/sidebar/sidebar.tsx`.

On wide screens, from the lg breakpoint (992px) up, the sidebar is a column of the layout. Below lg it becomes an offcanvas sheet, a panel that slides in over the page. That is the [Offcanvas](/nextjs/docs/components/offcanvas/) component with `responsive="lg"`. The navbar toggle opens it, and a link, Escape or the backdrop closes it.

The toggle sits in the navbar and the sheet in the sidebar, so they share their state through `LayoutProvider`, in `src/contexts/layout-context.tsx`. A client component can read it with `useLayout()`: `sheetOpen`, `setSheetOpen`, `toggleSidebar` and `expanded`, plus `collapsed` in the free version.

From lg up the toggle has another job. In the free version it hides and shows the sidebar. In AdminKit PRO it switches between the full sidebar and the compact, icon-only one: `data-sidebar-layout="default"` or `"compact"` on `<body>`. The choice is stored as `adminkit_config_sidebarLayout`, and the [head script](/nextjs/docs/customization/dark-mode/#light-dark-and-auto) applies it before the page is painted.

In AdminKit PRO the sidebar can also sit on the right, with `data-sidebar-position="right"`. The sheet then opens from the right. See [Theming](/nextjs/docs/customization/theming/#sidebar-colors-layout-and-sidebar-position).

## Navbar

The top bar is `Navbar`. It has the sidebar toggle, and on the right the notifications, messages, the [color mode](/nextjs/docs/customization/dark-mode/#toggle) toggle and the user menu. AdminKit PRO adds a search field, the mega menus, the language menu and a fullscreen button.

Every menu is its own component in `src/components/navbar/`, built on the [Dropdown](/nextjs/docs/components/dropdowns/) component. Their demo content is there for you to replace. The bar is in `src/components/navbar/navbar.tsx`, and [Navbar](/nextjs/docs/navigation/navbar/) covers it in detail.

## Footer

The footer shows the copyright and a list of links. Edit the links in `Footer`, in `src/components/ui/footer.tsx`. The year comes from `site.year` in `src/lib/site.ts`.

## Related

- [React Bootstrap sidebar](/react/docs/layout/sidebar/): the same layout in AdminKit for React (Vite)
- [Navbar](/nextjs/docs/navigation/navbar/): the top bar and its menus
- [Settings panel](/nextjs/docs/customization/theming/#settings-panel): the sidebar colors, layout and position in AdminKit PRO
- [Analytics dashboard demo](https://nextjs-demo.adminkit.io/)

---

Canonical HTML page: https://adminkit.io/nextjs/docs/layout/sidebar/

Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/bootstrap/docs/ · Questions: support@adminkit.io