# React Bootstrap Navbar

Change the React Bootstrap navbar of AdminKit: the top bar with notifications, messages, color mode and user menus, each a small component you can edit.

The navbar is the bar at the top of every dashboard page. It holds the sidebar toggle, and on the right the menus for notifications, messages, the color mode and the user's account. It is in the free and PRO versions of [AdminKit for React](/react/).

Each menu is a small component of its own, built on the [Dropdown](/react/docs/components/dropdowns/) component, so it opens and closes without Bootstrap's JavaScript. The menus hold demo content, such as the notifications and messages in an array at the top of their file. Replace them with your data, or remove a menu from `navbar.tsx`.

`Navbar` is in `src/components/navbar/navbar.tsx`, and the menus are in the same folder. `DashboardLayout` renders it above the page (see [Sidebar](/react/docs/layout/sidebar/)).

## Example

Here is the notifications menu with two items. Like every menu, it is a `<li>` in the list on the right of the bar. Its file is `src/components/navbar/navbar-notifications.tsx`:

```html
<nav class="navbar navbar-expand navbar-light navbar-bg" aria-label="Top bar">
  <div class="navbar-collapse collapse">
    <ul class="navbar-nav navbar-align">
      <li class="nav-item dropdown">
        <a class="nav-icon dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
          <div class="position-relative">
            <span class="visually-hidden">Notifications</span>
            <i class="align-middle" data-lucide="bell"></i>
            <span class="indicator">2</span>
          </div>
        </a>
        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end py-0">
          <div class="dropdown-menu-header">2 New Notifications</div>
          <div class="list-group">
            <a href="#" class="list-group-item">
              <div class="row g-0 align-items-center">
                <div class="col-2"><i class="text-danger" data-lucide="circle-alert"></i></div>
                <div class="col-10">
                  <div class="text-dark">Payment failed</div>
                  <div class="text-body-secondary small mt-1">The card of Acme Inc. was declined.</div>
                  <div class="text-body-secondary small mt-1">30m ago</div>
                </div>
              </div>
            </a>
            <a href="#" class="list-group-item">
              <div class="row g-0 align-items-center">
                <div class="col-2"><i class="text-success" data-lucide="user-plus"></i></div>
                <div class="col-10">
                  <div class="text-dark">New member</div>
                  <div class="text-body-secondary small mt-1">Christina joined your team.</div>
                  <div class="text-body-secondary small mt-1">2h ago</div>
                </div>
              </div>
            </a>
          </div>
          <div class="dropdown-menu-footer">
            <a href="#" class="text-body-secondary">Show all notifications</a>
          </div>
        </div>
      </li>
    </ul>
  </div>
</nav>
```
```tsx code
import { Bell, CircleAlert, UserPlus } from "lucide-react";
import {
  Dropdown,
  DropdownMenu,
  DropdownToggle,
} from "@/components/bootstrap/dropdown";

const notifications = [
  {
    icon: <CircleAlert className="text-danger" />,
    title: "Payment failed",
    text: "The card of Acme Inc. was declined.",
    time: "30m ago",
  },
  {
    icon: <UserPlus className="text-success" />,
    title: "New member",
    text: "Christina joined your team.",
    time: "2h ago",
  },
];

export function NavbarNotifications() {
  return (
    <Dropdown as="li" className="nav-item dropdown" display="static">
      <DropdownToggle className="nav-icon dropdown-toggle">
        <div className="position-relative">
          <span className="visually-hidden">Notifications</span>
          <Bell className="align-middle" />
          <span className="indicator">{notifications.length}</span>
        </div>
      </DropdownToggle>
      <DropdownMenu className="dropdown-menu-lg dropdown-menu-end py-0">
        <div className="dropdown-menu-header">
          {notifications.length} New Notifications
        </div>
        <div className="list-group">
          {notifications.map((notification) => (
            <a href="#" className="list-group-item" key={notification.title}>
              <div className="row g-0 align-items-center">
                <div className="col-2">{notification.icon}</div>
                <div className="col-10">
                  <div className="text-dark">{notification.title}</div>
                  <div className="text-body-secondary small mt-1">{notification.text}</div>
                  <div className="text-body-secondary small mt-1">{notification.time}</div>
                </div>
              </div>
            </a>
          ))}
        </div>
        <div className="dropdown-menu-footer">
          <a href="#" className="text-body-secondary">Show all notifications</a>
        </div>
      </DropdownMenu>
    </Dropdown>
  );
}
```

In the template, the count (`4`) and the header ("4 New Notifications") are fixed text. Derive them from your data, as the example does.

## Parts

`navbar.tsx` puts the parts together. In the free version:

```tsx title="src/components/navbar/navbar.tsx"
<nav className="navbar navbar-expand navbar-light navbar-bg" aria-label="Top bar">
  <button
    type="button"
    className="sidebar-toggle js-sidebar-toggle"
    aria-controls="sidebar"
    aria-expanded={expanded}
    aria-label={expanded ? "Collapse sidebar" : "Expand sidebar"}
    onClick={toggleSidebar}
  >
    <i className="hamburger align-self-center" />
  </button>

  <div className="navbar-collapse collapse">
    <ul className="navbar-nav navbar-align">
      <NavbarNotifications />
      <NavbarMessages />
      <NavbarColorMode />
      <NavbarUser />
    </ul>
  </div>
</nav>
```

| Part | File | Description |
| --- | --- | --- |
| Sidebar toggle | `navbar.tsx` | Calls `toggleSidebar` from `useLayout()`: opens the sidebar sheet below lg; from lg up hides the sidebar (free) or switches to the compact sidebar (PRO) |
| `NavbarNotifications` | `navbar-notifications.tsx` | Bell icon with a count and a list of notifications |
| `NavbarMessages` | `navbar-messages.tsx` | Message icon and a list of messages with avatars |
| `NavbarColorMode` | `navbar-color-mode.tsx` | Light, dark and auto; see [Dark mode](/react/docs/customization/dark-mode/#toggle) |
| `NavbarUser` | `navbar-user.tsx` | The account menu: Profile, Analytics, Settings & Privacy, Help Center, Log out |
| Search (PRO) | `navbar.tsx` | A search field from the sm breakpoint up; connect it to your own search |
| `NavbarMenus` (PRO) | `navbar-menus.tsx` | The "Mega Menu" and "Resources" menus, from lg up |
| `NavbarLanguages` (PRO) | `navbar-languages.tsx` | A flag menu with four languages; the items are links to `#`, there are no translations |
| Fullscreen (PRO) | `navbar.tsx` | A button from lg up that puts the page in fullscreen and back |

In the free version, the toggle of the user menu is a settings icon below the sm breakpoint, and the avatar with the name from sm up. In AdminKit PRO it is the avatar only, and the sidebar has a user block too.

## Change the navbar

- **Remove a menu**: delete its line in `navbar.tsx`, and the file if nothing else imports it.
- **Change a menu**: edit its data array and markup in its own file, as in the example.
- **Add a menu**: write a component that returns `<Dropdown as="li" class="nav-item dropdown" display="static">` with a `DropdownToggle` (`nav-icon` for an icon, `nav-link` for text) and a `DropdownMenu` with `dropdown-menu-end`, and add it to the list in `navbar.tsx`.

`display="static"` lets the navbar CSS place the menu, instead of Floating UI. Bootstrap does the same for dropdowns in a navbar.

## Links

Links to pages of the app use React Router's `Link` with `to`, so they change the route without a reload:

```tsx
import { Link } from "react-router";

<Link className="dropdown-item" to="/pages-profile">
  <User className="align-middle me-1" /> Profile
</Link>
```

The other items are `<a href="#">` placeholders. Images, such as the avatar and the flags, use `asset("/img/...")` from `src/lib/site.ts`. It adds the base path, the folder the app is served from.

## Accessibility

- The bar is a `<nav>` with `aria-label="Top bar"`.
- The sidebar toggle has `aria-controls="sidebar"`, `aria-expanded`, and the label "Collapse sidebar" or "Expand sidebar".
- Icon toggles need a name. The notifications toggle has `visually-hidden` text, and messages has `aria-label="Messages"`. The color mode toggle has `aria-label="Color mode (dark)"`, with the current mode, and its items have `aria-pressed`.
- The dropdowns open with a click, Enter, or Arrow Down and Arrow Up, which also move through the items; Escape closes them and returns the focus to the toggle.
- In AdminKit PRO, the search field and the fullscreen button have `aria-label`s.

## Related

- [Next.js Bootstrap navbar](/nextjs/docs/navigation/navbar/): the same navbar in AdminKit for Next.js
- [Bootstrap 5 navbar](/bootstrap/docs/navigation/navbar/): the navbar of the HTML version
- [Sidebar](/react/docs/layout/sidebar/): the layout and the sidebar toggle
- [Analytics dashboard demo](https://react-demo.adminkit.io/)

---

Canonical HTML page: https://adminkit.io/react/docs/navigation/navbar/

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