> ## Documentation Index
> Fetch the complete documentation index at: https://docs.inklyai.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Navigation and actions

> Chapters, captions, CTAs, and button destinations.

Navigation and action fields control how viewers move through a demo. They group steps into chapters, show captions at the right time, and decide what buttons do.

Use this section when you want to shape the viewer journey, not the visual content of a step.

## Chapters

Chapters group related steps so viewers can understand the demo structure and jump between sections.

| Field     | Type       | Required | Default | Notes                                               |
| --------- | ---------- | -------- | ------- | --------------------------------------------------- |
| `id`      | `string`   | Yes      | —       | Chapter id, targetable by `chapter` button actions. |
| `title`   | `string`   | Yes      | —       | Chapter title.                                      |
| `stepIds` | `string[]` | Yes      | —       | Ordered step ids. At least one.                     |

## Captions

Captions show timed text on a step. They can follow voiceover audio or simply appear during the step.

Both `start` and `end` are optional. Omitted bounds default to `0` and `+Infinity`, so `{ id, text }` keeps a caption visible for the whole step.

| Field   | Type     | Required | Default     | Notes                           |
| ------- | -------- | -------- | ----------- | ------------------------------- |
| `id`    | `string` | Yes      | —           | Caption id.                     |
| `text`  | `string` | Yes      | —           | Caption text.                   |
| `start` | `number` | No       | `0`         | Start time in ms. Non-negative. |
| `end`   | `number` | No       | `+Infinity` | End time in ms. Non-negative.   |

## CTA

CTAs define the buttons viewers click on cover screens and forms.

| Field        | Type        | Required | Default              | Notes                                               |
| ------------ | ----------- | -------- | -------------------- | --------------------------------------------------- |
| `label`      | `string`    | Yes      | —                    | Button text. Non-empty.                             |
| `action`     | `object`    | No       | `{ "type": "next" }` | Destination. See [Button actions](#button-actions). |
| `animation`  | `"shimmer"` | No       | —                    | Opts the button into the shimmer visual variant.    |
| `background` | `string`    | No       | —                    | CSS color override for the button background.       |
| `textColor`  | `string`    | No       | —                    | CSS color override for the button text.             |

## Button actions

Button actions decide where a CTA sends the viewer: forward, backward, to a specific step or chapter, to a URL, or back to the beginning.

```ts theme={null}
type ButtonAction =
  | { type: "next" }
  | { type: "prev" }
  | { type: "step"; stepId: string }
  | { type: "chapter"; chapterId: string }
  | { type: "url"; href: string; target?: "_self" | "_blank" }
  | { type: "restart" };
```

| Action    | Fields                                                                               | Notes                                      |
| --------- | ------------------------------------------------------------------------------------ | ------------------------------------------ |
| `next`    | —                                                                                    | Advance one step. The default action.      |
| `prev`    | —                                                                                    | Go back one step.                          |
| `step`    | `stepId` (`string`, non-empty)                                                       | Seek to a step by id.                      |
| `chapter` | `chapterId` (`string`, non-empty)                                                    | Seek to the first step of a chapter by id. |
| `url`     | `href` (`string`, non-empty), `target` (`"_self"` \| `"_blank"`, default `"_blank"`) | Open an external URL.                      |
| `restart` | —                                                                                    | Reset the demo to the first step.          |