Sidebar Search Results
Sidebar in its active filter state with the query filled, matching nav items highlighted and non-matches hidden, and a clear button to restore the full list.
Sidebar in its active filter state with the query filled, matching nav items highlighted and non-matches hidden, and a clear button to restore the full list.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Sidebar Search Results is the nav-filter state of the sidebar shell: the search input filled with the query pro, two matching items (Billing pro and Notifications pro) shown with the term highlighted in a bg-foreground/10 mark, and all non-matching items hidden. A result count reads 2 results below the input and an X button clears back to the full list. Avery Stone is pinned to the footer as usual.
Nav is one typed array where every item carries icon, label, badge, and matches so the filter renders without shape narrowing. The highlight helper slices the label string at the match index rather than using a regex, so the rendered output never double-highlights.
Reach for this block to document or screenshot the filtered sidebar state, or as the design reference when wiring client-side nav filtering to a real router. Wire the X button to clear the input and restore the full item list.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the sidebar in its active search state. Other filtered nav variants:
Tip: show the result count below the input so users know immediately whether the query found anything or whether they should broaden the term.