Outline

A navigation list with a sliding active indicator. Use items without href for headings on the current page, or provide href to use the same keyboard-accessible list for routes. The list is one tab stop: arrow keys move between items, Home and End jump to the ends, and Enter or Space activates the selected item.

Installation

bunx shadcn@latest add https://ui.razeev.com/r/outline.json

Usage

tsx

import { Outline } from "@/components/hangry-ui/components/outline";

<Outline
  items={[
    { id: "overview", label: "Overview" },
    { id: "installation", label: "Installation" },
    { id: "configuration", label: "Configuration" },
  ]}
/>

Without href, each item points to a heading or element id on the current page, and the active item updates as the page scrolls. Set href to make an item a route link; the active state then follows the current route.

Props

Prop	Type	Default	Description
`items`	`{ id: string; label: string; href?: string }[]`	—	Heading ids and labels, or route links when `href` is supplied.
`title`	`string`	`"On this page"`	Visible heading and accessible navigation label.
`variant`	`"default" \| "sidebar"`	`"default"`	Uses sidebar foreground colors for the heading and active link.
`className`	`string`	`""`	Additional classes on the navigation.

Setup notes

Outline uses Motion for its sliding indicator and disables animation when reduced motion is preferred.