# Section Pill

A floating pill that names the section you're reading, with a ring for how far down the page you are, and opens into the full list, carrying the current title to its row.

- Page and source: https://uibrik.com/components/section-pill
- Install: `npx shadcn@latest add https://uibrik.com/r/section-pill.json`
- Packages (installed by the CLI): @tabler/icons-react, motion, react-use-measure
- Import: `import { SectionPill } from "@/components/uibrik/section-pill/section-pill"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| side | `"bottom" \| "top"` | `"bottom"` | Edge the pill sits on. The list opens away from it. |
| panelWidth | `number` | `280` | Width of the open list. Narrow screens get less. |
| maxRows | `number` | `7` | Rows shown before the list scrolls. |
| offset | `number` | `96` | Distance from the top of the scroller where a section counts as current. |
| label | `string` | `"Sections"` | Accessible name for the pill and the list. |
| sections | `{ id: string; title: string }[]` |  | Sections in page order. Each id is the id of an element on the page. |
| container | `RefObject<HTMLElement \| null>` |  | Scrolling element to follow. Defaults to the window. |
| className | `string` |  | Classes for the wrapper. Position it yourself, e.g. fixed inset-x-0 bottom-6. |