# React Bootstrap Sidebar

Add pages to the React Bootstrap sidebar of AdminKit, see how it slides over the page on small screens, and find the navbar and footer around it.

The sidebar holds the menu of your app: a link to every dashboard page, grouped under headers. On large screens it is a column next to the page. On small screens it is a sheet that slides in over the page when you press the toggle in the navbar.

In [AdminKit for React](/react/), free and PRO, the sidebar is a React component on Bootstrap's markup. You don't write the menu as markup. It is a list of data, so adding a page to it means adding one item.

Pages with `"layout": "dashboard"` in `src/data/pages.json` render inside `DashboardLayout`, in `src/layouts/dashboard-layout.tsx`. It 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

To add a page to the menu, add an item to `navigation` in `src/data/navigation.ts`. The list is made of sections, each with a header and its items. Give the new item its title, 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 |

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

## 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 it also has the user block with the account menu (`SidebarUser`). The component is in `src/components/sidebar/sidebar.tsx`.

How the sidebar shows depends on the width of the screen. From the lg breakpoint (992px) up, it is a column of the layout. Below lg, it is an offcanvas sheet: a panel that slides in over the page. That is the [Offcanvas](/react/docs/components/offcanvas/) component with `responsive="lg"`. The navbar toggle opens the sheet, and a link, Escape or the backdrop closes it.

The toggle and the sheet have to agree on whether the sheet is open. They share that state through `LayoutProvider`, in `src/contexts/layout-context.tsx`. A component can read it with `useLayout()`, which gives `sheetOpen`, `setSheetOpen`, `toggleSidebar` and `expanded`. The free version adds `collapsed`, which is true while the sidebar is hidden.

On large screens the toggle does something else. From lg up, in the free version, it hides and shows the sidebar. In AdminKit PRO it switches between the full sidebar and the compact one, which shows only the icons. The choice is `data-sidebar-layout="default"` or `"compact"` on `<body>`, and it is stored as `adminkit_config_sidebarLayout`. The [head script](/react/docs/customization/dark-mode/#light-dark-and-auto) applies it before the page is painted.

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

## Navbar

`Navbar` is the top bar. It holds the sidebar toggle, and on the right the notifications, messages, the [color mode](/react/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.

Each menu is a component in `src/components/navbar/`, built on the [Dropdown](/react/docs/components/dropdowns/) component. The menus come with demo content for you to replace. The bar itself is in `src/components/navbar/navbar.tsx`. See [Navbar](/react/docs/navigation/navbar/) for the details.

## Footer

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

## Related

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

---

Canonical HTML page: https://adminkit.io/react/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