Chapters

Present overviews in a grouped, thematic format

Use the Chapters component to display content in a structured sequential order. You can theme different sections with colors, images and icons. It comes with a side navigation that updates on scroll. Use for online courses or tutorials, documentation, roadmaps, or walkthroughs.

1. 01
2. 02
3. 03

Getting Started

5 lessons

Kickstart your journey with Astro by understanding the project structure, setup process, and development workflow essentials.

• 01 Getting Started
  See examples 1min read
• 02 Setting up Astro
  3min read
• 03 Creating your first page
  Download template 4min read
• 04 Astro project structure
  5min read
• 05 Running your dev server
  2min read

Layouts & Components

4 lessons

Learn how to build reusable layouts and components in Astro using the power of islands architecture and scoped styles.

• 01 Creating a layout component
  Use starter layout 6min read
• 02 SEO integration
  7min read
• 03 Slot usage in Astro components
  4min read
• 04 Styling components
  5min read

Data & Integrations

4 lessons

Understand how to fetch, transform, and display data in Astro projects, and learn how to integrate with third-party services and APIs.

• 01 Fetching remote data
  5min read
• 02 Using CMS content (e.g. Sanity, Contentful)
  6min read
• 03 Integrating Markdown & MDX
  4min read
• 04 Working with environment variables
  3min read

---
import rocket from './icons/rocket.svg?raw'

const chapters = [
    {
        title: 'Getting Started',
        icon: rocket,
        subText: '{0} lessons',
        description: 'Kickstart your journey with Astro...',
        color: 'var(--w-color-info)',
        img: {
            src: '/img/getting-started.png',
            alt: 'Getting Started',
            height: 300,
            width: 300
        },
        items: [
            {
                text: 'Getting Started',
                subText: '1min read',
                buttons: [{
                    text: 'See examples',
                    href: '/examples'
                }]
            },
            { text: 'Setting up Astro', subText: '3min read' },
            { ... },
            { ... },
            { ... }
        ]
    }, { ... }, { ... }]
---

<Chapters chapters={chapters} />

The Chapters component only needs a chapters prop that describes how each chapter should be displayed. It expects an array of objects with only two properties; title and items, however, the following properties helps you customize your sections in many different ways:

• title: A title is required for each chapter.
• icon: You can optionally set an icon that is displayed under the title of a chapter.
• subText: Additional text that is displayed next to the icon. You can use the {0} placeholder key if you want to dynamically inject the number of items into your text.
• description: Sets a description under the title. This property supports the use of HTML elements.
• color: When set, it’ll set the color of the item indexes, adds a faint gradient as a background, and also sets the color of the navigation.
• img: Displays an image next to the chapter items.
• items: Sets the chapter items. You can use the props of an Overview component to create your items.

Chapter Images

Chapter images are optional. When no image is set, the content takes up the available full width:

Colors

Colors are also optional. If you don’t set chapters.color, no gradient will be set, and the active menu will use a default white color, while the item numbers will use a muted color:

Navigation Offset

If you use the Chapters component as a direct child of your body where you also have a fixed menu, you might want to configure the top positioning of the side navigation. For this, you can use the navTopOffset prop. By default, this is set to 50px, but you can easily configure the default value through the module.scss file.

1. 01
2. 02
3. 03

Getting Started

5 lessons

Kickstart your journey with Astro by understanding the project structure, setup process, and development workflow essentials.

• 01 Getting Started
  See examples 1min read
• 02 Setting up Astro
  3min read
• 03 Creating your first page
  Download template 4min read
• 04 Astro project structure
  5min read
• 05 Running your dev server
  2min read

Layouts & Components

4 lessons

Learn how to build reusable layouts and components in Astro using the power of islands architecture and scoped styles.

• 01 Creating a layout component
  Use starter layout 6min read
• 02 SEO integration
  7min read
• 03 Slot usage in Astro components
  4min read
• 04 Styling components
  5min read

Data & Integrations

4 lessons

Understand how to fetch, transform, and display data in Astro projects, and learn how to integrate with third-party services and APIs.

• 01 Fetching remote data
  5min read
• 02 Using CMS content (e.g. Sanity, Contentful)
  6min read
• 03 Integrating Markdown & MDX
  4min read
• 04 Working with environment variables
  3min read

<Chapters
    chapters={[ ... ]}
    navTopOffset={100}
/>

API

type ChaptersProps = {
    className?: string
    navTopOffset?: number
    chapters: ({
        id?: string
        title: string
        icon?: string
        subText?: string
        description?: string
        items: OverviewProps['items']
        img?: {
            src: string
            alt: string
            width: number
            height: number
            lazy?: boolean
        }
    } & OverviewProps)[]
}