defuss-shadcn / Website / website-search-navigation
Search & Navigation
Blocks for finding and moving around: the search box and its suggestions, the results summary and results, filter bars and sidebars, active filters, sort and view controls, pagination and load more, tags, category menus, breadcrumbs, on-page contents and quick links. Every block is CSS-only and built from the library's components and tokens.
On this page (3)
§The template
The Search & Navigation blocks composed into one page - the source is the page.
§A search results page
Breadcrumbs, a large Search Box, the Category Menu, a Filter Sidebar beside the summary, Active Filters, Sort and View controls, results and pagination - then tags and quick links. Only Search & Navigation blocks.
§The blocks
Search Box
Accepts a query and submits a search - with a shortcut hint, as a large hero search with a scope, a pill, or an icon that expands on focus.
Search Suggestions
Displays suggested queries or matches while typing - recent searches, matching pages and people grouped in a panel with the match highlighted, or native suggestions.
Search Summary
Shows the active query and number of matches - the count, the query, a "did you mean", how long it took and how to clear it.
Search Result
Displays one matching entry with relevant context - where it lives, the title and a snippet with the matches highlighted, as text, with a thumbnail or as a product.
Filter Bar
Presents compact controls for narrowing a collection - selects, toggle chips and a "more filters" action on one scrollable row, with the count.
Filter Sidebar
Groups detailed filtering controls beside a collection - categories with counts, a price range, colors, rating and availability, each group collapsible.
Active Filters
Displays applied filters with individual and combined removal actions - one chip per filter that removes it, and "clear all".
Sort Control
Changes the ordering of a collection - a labelled select, a segmented choice, or a button that opens a menu of options.
View Switcher
Switches a collection between layouts such as grid and list - icon or labelled segments, and the collection beside them changes with no script.
Collection Pagination
Navigates between discrete pages of a collection - the range shown, the Pagination component and how many per page; or simply previous / next.
Load More
Loads another batch into the current collection - how many are shown, a progress bar and the button, with a busy state while loading.
Tag Cloud
Displays linked tags with optional frequency-based emphasis - five weights from data-weight, or even pills with counts.
Tag List
Displays the tags associated with a content item - outlined chips, plain hashtags, or colored labels.
Category Menu
Navigates between content categories - underlined tabs that scroll sideways, pills, a vertical list with counts, or icon tiles.
Breadcrumbs
Shows the current position within a content hierarchy - the trail above the page title, collapsing to a back link on small screens, or hiding the middle levels in a menu.
Contents
Links to headings within the current page - an "on this page" rail with the current section marked, a numbered box at the top, or a disclosure for small screens.
Quick Links
Groups shortcuts to frequently needed destinations - icon tiles with a line each, a compact list, or chips.
Comments, ideas or improvements? Edit this page's source on GitHub