Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Scrollspy

Track the visible section and navigate a long document using anchor links.

CoreNavigation@gaudi/design-system/core/ScrollspyView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { Scrollspy } from '@gaudi/design-system/core/Scrollspy';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/scrollspy-top-navigation.json.

Usage

import { Scrollspy } from '@gaudi/design-system/core/Scrollspy';import Button from '@gaudi/design-system/core/Button';
<><Scrollspy targetRef={articleRef}>  <Button data-scrollspy-anchor='overview'>Overview</Button>  <Button data-scrollspy-anchor='details'>Details</Button></Scrollspy><div ref={articleRef}>  <section id='overview'><h2>Overview</h2>{overview}</section>  <section id='details'><h2>Details</h2>{details}</section></div></>

Examples

Top navigation

Storybook

API

9 props

Accessibility

Use real links with valid targets. Preserve focus and allow navigation without motion.

ScrollAreaContained scrolling with themed scrollbars and optional smooth wheel motion for article reading.2 examplesBreadcrumbBreadcrumb renders hierarchical page trails for navigation context.5 examplesFloatingMenuA compact, inverted pill of destinations that floats over the page once the reader scrolls away from the header, with an optional Back to top button. LayoutContainer renders it for the site; pass targetRef and position sticky to use it inside a scroll container.NavigationMenuNavigationMenu renders grouped site navigation with dropdown panels for categories, sections, and related destinations.2 examplesPaginationPagination renders blog-style previous/status/next navigation. Hovering or focusing the center status reveals direct page shortcuts.4 examplesStepperShow progress through a sequence of labelled steps.6 examples