Table of contents

목차

On wide screens an “On this page” list sits to the right of the post; on phones it becomes a folded or open box. A chip-row version also exists.

RuleShown only when there are three or more sections. The current section is marked for screen readers too, not just by color.

Also known as: TocNavList

···

usage (Astro)

---
// design-systems/krds/components/ArticleLayout.astro
// Toc 은 이 파일 안에서 쓰인다(팩 구현끼리)
---
<Toc items={toc} placement="inline" variant={tocVariant} />

site.json

// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "Toc": "fold" }
}

props (TypeScript)

export interface TocProps {
  items: TocItem[];
  /** inline = 글 위(폰, chips 변형은 모든 폭), sidebar = 넓은 화면 옆 */
  placement: 'inline' | 'sidebar';
  variant?: VariantOf<'Toc'>;
}

fold is a one-line “On this page 13” box on phones that opens on tap (wide screens show only the side list). open shows the numbered rows already expanded on phones. chips shows the contents as rounded chips at every width, with no side column. The section being read is marked in the side list with a light background and bold text.

On long posts the side list feels like a documentation site. Chips suit shorter posts when you want the right column empty. In the demo 13 chips fill three rows, so many items make it long.

Marking the current position with background and weight, with no colored bar, is characteristic of this pack.

Use it when — Variants 3

foldFold Long posts where the first phone screen is precious — folded on phones, a side list on wide screens.Used by 3: babyplay, babysick, babysleep
chipsChips When there are few short sections and a side column would be wasted — one row of chips at every width.Used by 5: babyfood, milestone, newborn, toddlerfood, 허브
openOpen When the headings alone should tell the story — an open numbered list even on phones.Used by 3: birthprep, feeding, vaccination