Standard Navigation
Filter & Sort Toolbar
The control bar that sits above any listing: result count, a sort dropdown, a List/Grid view switch, and a filter trigger badged with how many filters are active. This sets the state; pair it with a filter-chip row if you also need to show which filters are applied.
$ velocityx add standard-filter-sort-toolbar
Built for react.
Needs react already installed
as a peer dependency.
An Astro-only project needs @astrojs/react wired up first — this won't run on its own in plain Astro.
Full docs for Filter & Sort Toolbar →
Needs a licence key —
subscribe here, then
velocityx loginonce.
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| resultCount | number | Yes | shown as "N results" | |
| sortOptions | { value: string, label: string }[] | No | [] | |
| sortValue | string | Yes | ||
| onSortChange | (value: string) => void | Yes | ||
| viewMode | 'list' | 'grid' | Yes | omit to hide the switch | |
| onViewModeChange | (mode: 'list' | 'grid') => void | Yes | ||
| activeFilterCount | number | No | 0 | badge on the filter button |
| onFilterClick | () => void | Yes | opens your filter panel/sheet | |
| className | string | No | '' |
File this creates
The CLI writes this path into your project, relative to its root — nothing else moves.
components/velocity/standard-filter-sort-toolbar/FilterSortToolbar.jsxUsing the Filter & Sort Toolbar component
Install it with velocityx add standard-filter-sort-toolbar.
The CLI writes the source straight into your project — no runtime dependency, no registry
lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.
Related components
More from Standard Navigation.
In-page section links that highlight themselves as the reader scrolls, so a long docs or landing page always shows where you are without you having to hunt for it. Tracks visibility with IntersectionObserver, never a scroll handler, so it costs nothing on long pages.
reactA 'waffle' product switcher popover for suites that have grown past one nav bar into several standalone apps — a grid of icon tiles for every section, the current one marked, fully arrow-key navigable and closes cleanly on outside click or route change.
reactHeader for a drill-down screen: a real back link to the parent (not a history hack), the page title and optional subtitle, and an overflow menu for secondary actions that don't need a permanent button.
reactWayfinding trail for deep page hierarchies that collapses middle segments behind an ellipsis on narrow screens, keeping the root and current page always visible, with the current page shown as text rather than a dead link.
react