Library navigation
Other
Open in

A table of contents with a shaped SVG track and a clipped active segment that follows the current section.

Installation

Add the outline-trail component from Hangry UI to this project.


Use the project's package manager to run:
shadcn@latest add https://ui.razeev.com/r/outline-trail.json


Integrate the component with the existing layout and styling.
Keep its interactions and reduced-motion support intact.

How to use

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


<OutlineTrail
  items={[
    { id: "overview", label: "Overview" },
    { id: "installation", label: "Installation" },
    { id: "usage", label: "Usage" },
  ]}
/>;

items uses the same shape as Outline. Entries without href track page headings; entries with href navigate between routes.

Props

PropTypeDescription
items{ id: string; label: string; href?: string }[]Section headings or route links to display along the trail.
titlestringVisible heading and accessible navigation label.
classNamestringAdditional classes for the navigation container.

Dependencies

  • Motion