Navbar with Search and User Menu

Dark Bootstrap 6 app navbar with a search field, notification bell with unread badge and an avatar user Menu, collapsing into a Drawer on mobile.

Also known as: dashboard top navigation bar, navbar with search bar, navbar with notification bell, user avatar dropdown menu

Bootstrap 6 Navbars Responsive Dark #avatar #dark #dropdown #navbar #search

Navbar with Search and User Menu live demo

Open in new tab

Bootstrap 6 code (HTML, CSS, JS)

Beautify

A dark Bootstrap 6 application navbar for dashboards and SaaS back offices. It combines a brand, icon nav links, a search field with a "/" shortcut, a notification bell with an unread badge and an avatar user Menu. Below 1024px the links and search move into a Bootstrap 6 Drawer while the bell and avatar stay visible.

How it works

.nsu-root is pinned to data-bs-theme="dark" and contains nav.navbar.lg:navbar-expand.nsu-navbar. The brand comes first, then a <dialog class="drawer drawer-start"> with the form.nsu-search and the ul.nsu-nav links, then .nsu-end with the bell, the account button and the .navbar-toggler. When the navbar is at least 1024px wide, Bootstrap renders the drawer inline and a container query in style.css moves the search to the right with order: 2.

The search field uses the new form-adorn pattern: a form-adorn-icon, a borderless form-ghost input and a kbd.form-adorn-text hint. The bell button.nsu-bell opens the .menu.nsu-notify panel with data-bs-toggle="menu" and data-bs-auto-close="outside", so clicking "Mark all as read" keeps it open. Each notification uses an initials avatar plus menu-item-content. The button.nsu-user shows an avatar with an avatar-status status-online dot and opens .menu.nsu-account.

script.js handles the rest. Submitting the search calls preventDefault() and announces the query in the .nsu-status live region; replace that handler with a redirect or fetch() to your search endpoint. Pressing "/" outside a text field focuses the search when it is visible. .nsu-read-all removes the .nsu-unread dots, hides .nsu-count and updates the bell label. The script also syncs aria-expanded on the drawer toggler.

Customization

--nsu-accent on .nsu-root: recolors the active link, focus rings, unread dots and the chart.
--nsu-navbar-bg and --nsu-surface: change the navbar and page background tones.
--nsu-search-width (default 20rem): sets the desktop width of the search field.
Change lg:navbar-expand to md:navbar-expand and update the matching @container (width >= 1024px) rule to collapse later.
Edit the number in .nsu-count and the bell aria-label to match your unread count.
Remove the .nsu-demo block; it is only a sample dashboard.

The avatar photo comes from Unsplash; replace it with your own user image.

Use cases

Admin dashboards: a dark top bar combines page links, search and the signed-in user menu
SaaS back offices: the notification bell shows an unread badge and a Mark all as read action
Web apps: press the slash key to jump straight into the search field
Mobile dashboards: links and search move into a drawer while the bell and avatar stay visible

Accessibility

The form has role="search" and a visually hidden label. The bell and avatar buttons have descriptive aria-label values, and the badge is hidden from screen readers because the count is in the label. Menus are keyboard operable through Bootstrap (arrow keys, Escape). The drawer is a native modal <dialog>. Status messages go to a role="status" region, and all custom focus states use a visible accent outline.

Bootstrap 6 notes

This replaces the Bootstrap 5 combination of navbar-expand-lg, navbar-collapse, dropdown-menu and input-group with lg:navbar-expand, a drawer dialog, menu/menu-item and form-adorn. Badges use badge theme-danger, and avatars are the new CSS-only avatar component. Built on Bootstrap 6.0.0-alpha.1, so class names may still change.

Navbar with Search and User Menu at a glance

Framework: Bootstrap 6
Code: HTML, CSS, JavaScript
JavaScript: Vanilla JavaScript, no jQuery
Dependencies: Bootstrap 6, Bootstrap Icons
Layout: Responsive, works on mobile, dark design
Category: Navbars
License: Free for personal and commercial use

Questions about this template

Can I use the Navbar with Search and User Menu code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

Load Bootstrap 6 and Bootstrap Icons from a CDN (the links are under Requirements). Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Does it work on mobile?

Yes. The layout adapts to small screens. Use the Mobile and Tablet buttons above the live demo to check it at phone and tablet width.

Requirements

Add these to your page (already included in the download):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/css/bootstrap.min.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

Built for Bootstrap 6.0.0-alpha.1. Bootstrap 6 ships as an ES module, so its script and this component's JavaScript load with type="module". Alpha releases can still change before the stable version.