Offcanvas V09

Author: Colorlib

Released: September 2026

License: CC BY 3.0

A search panel that slides down from the top of a recipe site, opened from the search button or with the / key. Before you type it shows recent searches and popular topics; as you type it filters the recipe list, highlights the matching words and announces the number of matches. Arrow keys move between the field and the results, and submitted searches are added to the recent list.

It is plain HTML and CSS plus a few lines of vanilla JavaScript: no jQuery, no Bootstrap files, no plugins, and the download is 195 KB. Use it on its own, or drop it into a Bootstrap 4, 5 or 6 project and it looks the same.

• Live filtering with highlighted matches and a status message
• Recent searches you can re-run or clear, plus popular topics
• Arrow keys move between the field and results
• Keyboard shortcut: / or Ctrl/Cmd+K opens the drawer
• Native dialog modal with Esc, backdrop click, focus return and scroll lock