React Bootstrap Navbar

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.

Each menu is a small component of its own, built on the Dropdown 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).

ExampleCopy Anchor Link

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:

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.

PartsCopy Anchor Link

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

<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>

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 navbarCopy Anchor Link

• 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" className="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.

LinksCopy Anchor Link

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

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.

AccessibilityCopy Anchor Link

• 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-labels.

RelatedCopy Anchor Link

• Next.js Bootstrap navbar: the same navbar in AdminKit for Next.js
• Bootstrap 5 navbar: the navbar of the HTML version
• Sidebar: the layout and the sidebar toggle
• Analytics dashboard demo