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 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.
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
- Reusable for brand lists, glossaries, partner directories, and similar indexes
API Reference
| Prop | Default | Type |
|---|---|---|
itemsrequired | AlphabeticalIndexEntry[] { name, href, target, 1 more } | |
heading | string |
Changelog
Group content is now top-aligned (align-items: flex-start instead of center), so columns of uneven height line up along their top edge.
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 }[];
}