Bootstrap 5 navbar search patterns. This page covers 4 search patterns — inline, expanding icon, live suggestions dropdown and full-screen overlay.

Key Classes Reference

ClassWhat It Does
.input-groupGroups input with icon/button
.input-group-textAddon text or icon
form-control-smCompact input size for navbars
position-relativeFor suggestions dropdown
position-absoluteDropdown below input

1. Bootstrap 5 Navbar with Inline Search

Search input built into the navbar — standard pattern for documentation and content sites.

2. Bootstrap 5 Expanding Search Navbar

Search icon that expands into a full input field on click — saves space on the navbar.

3. Bootstrap 5 Navbar Search with Suggestions

Search with a live dropdown showing suggestions as you type.

4. Bootstrap 5 Full-Screen Search Overlay

A full-screen search overlay triggered from the navbar — common on content-heavy sites.

Frequently Asked Questions

Add a form with class d-flex inside the navbar-collapse div after the ul.navbar-nav. Use input-group to attach an icon or button to the input. Set max-width on the input to control its size.
Set a collapsed width (e.g. 36px) on the search container with overflow:hidden. On button click toggle a class that expands to a wider width (e.g. 200px). Use CSS transition:width 0.3s ease for the animation. Focus the input after expanding.
Create a fixed div with inset:0 and high z-index, hidden by default. Show it on search icon click with JavaScript. Include a large search input and close button. Add a dark semi-transparent background overlay.

Need a Full Bootstrap 5 Admin Dashboard?

Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.

Browse Templates →

Use code FIRST30 for 30% off your first purchase.

Related Components