Loading playground
Overview
AlphabeticalIndex renders an A-Z grouped directory of links. Items passed via the items prop are sorted with the active locale's collator, then grouped by the first character of each name into alphabetical sections. Each row is a text link with an optional count pill. It is the shared component behind both the Brand List and Glossary List sections, and suits any "shop by brand", glossary, or partner-directory entry point. Pass an optional heading to label the index.
Key Business & UX Benefits
- Opens a clear browse-by-name path, a high-intent navigation pattern that lifts conversion for multi-brand merchants and content-heavy sites.
- A-Z grouping with locale-aware sorting helps shoppers scan a long list without scrolling endlessly.
- Optional per-item counts hint at catalogue depth, nudging shoppers toward sections with more on offer.
- One component covers brands, glossaries, and similar indexes, so teams stop forking a list component per use case.
- Editors maintain the items array in Studio, so directories stay current as partnerships and content evolve.
Feature List
- A-Z grouped directory built from the items array, with locale-aware collation
- Each row is a text link with an optional count pill, sized for dense directories
- Groups appear in alphabetical order with non-alphanumeric entries pushed to the end
- Optional heading labels the index; falls back to a locale-aware default per section
- Shared by the Brand List and Glossary List sections, and reusable for any index
- Editors maintain the items list in Studio as partnerships and content evolve
API Reference
LLocationFinder?Changelog
Renamed from BrandList and generalized beyond brands — pass any items and a heading instead of brands.
Show migration
Import from the new component, rename the brands prop to items, and
pass heading explicitly — the old built-in "Brands" translation no
longer renders automatically.
// Before
interface BrandListProps {
brands: { name: string; href: string; count?: number }[];
}
// After
interface AlphabeticalIndexProps {
heading?: string;
items: { name: string; href: string; count?: number }[];
}