LinkList

A phone's way into pages that sit in a column beside each other on a wider screen: a 48px row for each, its icon, its name and a chevron on the right, grouped in grey under their eyebrows.

Studio on a phone

import { LinkList } from "@/components/shared/link-list";

<LinkList
  label={t("label")}
  items={sections.map((s) => ({
    key: s.key,
    label: t(`sections.${s.key}`),
    icon: s.icon,
    group: t(`groups.${s.group}`),
    href: studioHref(locale, s.key),
  }))}
/>

API reference

Prop	Type	Default	Description
label	string	—	The nav's accessible name: “Studio”.
items	{ key, label, icon, href, group? }[]	—	Each page: its name, its icon, where it opens, and the eyebrow it sits under. Rows with the same group in a row share a grey block.
className	string	—	Spacing where it stands.

Guidelines

On a phone only. Side by side the same pages are a column beside the open one (SectionNav with hrefOf), and the list isn't needed.
Every row opens a page, so every row ends in a chevron. A setting that changes in place (a switch) is a SettingRow, not a LinkList row.
Name a group differently from the rows in it where you can; the eyebrow says what the rows are about.