---
name: Chapter list
route: /components/common/chapter-list
edit: false
---

import { Playground, Props } from 'docz'
import ChapterList from './chapter-list'

# ChapterList
**SUBCATEGORY:** Navigation

<hr />

## Chapter list
### Description
For providing a list of related items grouped under a section or topic.

<Playground>
  <ChapterList
    sectionHeadline='Section headline'
    sectionSubheadline='Section subheadline'
    chapterList={[
      { text: 'Chapter list: link with arrow', href:'/', id:'1' },
      { text: 'Chapter list: link with arrow', href:'/', id:'2' },
      { text: 'Chapter list: link with arrow', href:'/', id:'3' },
      { text: 'Chapter list: link with arrow', href:'/', id:'4' },
      { text: 'Chapter list: link with arrow', href:'/', id:'5' },
      ]}
    selected={2}
  />
</Playground>

<hr />

## Chapter list with index URL
### Description
For providing a list of related items grouped under a section or topic with a link back to the section or topic itself.

<Playground>
  <ChapterList
    sectionHeadline='Section headline'
    sectionSubheadline='Section subheadline'
    indexUrl='/'
    chapterList={[
      { text: 'Chapter list: link with arrow', href:'/', id:'1' },
      { text: 'Chapter list: link with arrow', href:'/', id:'2' },
      { text: 'Chapter list: link with arrow', href:'/', id:'3' },
      { text: 'Chapter list: link with arrow', href:'/', id:'4' },
      { text: 'Chapter list: link with arrow', href:'/', id:'5' },
      ]}
    selected={2}
  />
</Playground>

<hr />

## Properties
<Props of={ChapterList} />