ListingToolbar

Browse-control toolbar for listing and collection pages with slot-first composition and a convenience path for common title, result, sort, filter, and chip patterns.

Best for

listing page controlscollection page headersbrowse toolbars

Import

import { ListingToolbar } from "@enadhq/enad-react-sdk/client/storefront"

When to use it

Use ListingToolbar when a browse page needs a stable control seam between the heading/meta layer and the shopper controls around filtering, sorting, view changes, or active filter chips.

It is especially useful when the page shell should stay responsible for state while the SDK provides a reusable toolbar structure.

Composition notes

Lead with the slot-first path when the toolbar needs custom ordering, extra utility actions, or branded heading markup.

Use the convenience props when the toolbar fits the common pattern:

title for the browse heading
resultCount and resultLabel for the meta line
filters for the filter trigger
sort for the sort control
actions for toggles or secondary buttons
chips for active filter chips or quick filters

ListingToolbar does not own browse state. Keep filter, sort, pagination, and result state in the page shell and pass controls into the toolbar.

Behavior and theming guidance

Keep the toolbar focused on browse controls. If the page starts to need hero copy, editorial storytelling, or merchandising blocks above the grid, keep those concerns outside the toolbar and let the toolbar remain the compact control seam before the result area.

Examples

Live examples you can edit directly in the sandbox.

2 examples

Slot-first browse toolbar

Lead with the open composition path when the page needs a branded browse header, custom control ordering, and a dedicated chip row.

Convenience path

Use the prop-driven path when the toolbar only needs a standard heading, result count, filter trigger, sort control, and optional chips.

Slots

sortheadermetatitlerootactionsheadingGroupcontrolsfilterschips

Component Sets

Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.

Props

Prop	Type	Default	Description
children	string	—	Composition-first toolbar content assembled from child slots such as `ListingToolbar.Header`, `ListingToolbar.Title`, `ListingToolbar.Meta`, `ListingToolbar.Controls`, and `ListingToolbar.Chips`
title	string	—	Heading content for the listing context
meta	string	—	Secondary metadata rendered below or beside the title; if omitted, `resultCount` and `resultLabel` generate the default meta line
resultCount	number	—	Result count used by the default meta line when `meta` is not provided
resultLabel	string	"{count} products"	Template used to render the default meta line when `resultCount` is provided. Use `{count}` as the placeholder.
filters	string	—	Leading toolbar control, typically a filter trigger button
sort	string	—	Sort control content rendered inside the controls row
actions	string	—	Additional toolbar controls such as view toggles or utility actions
chips	string	—	Optional chip row rendered below the main toolbar header
classNames	Partial<Record<import("@enadhq/enad-react-sdk/client/storefront/types").ListingToolbarSlot, string>>	—	No description yet. Slot keys sortheadermetatitlerootactionsheadingGroupcontrolsfilterschips
className	string	—	No description yet.