Bootstrap 5 navbar search patterns. This page covers 4 search patterns — inline, expanding icon, live suggestions dropdown and full-screen overlay.
Key Classes Reference
| Class | What It Does |
|---|---|
.input-group | Groups input with icon/button |
.input-group-text | Addon text or icon |
form-control-sm | Compact input size for navbars |
position-relative | For suggestions dropdown |
position-absolute | Dropdown 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.