Reusable sticky navigation component and scroll-spy hook for section-based page navigation, commonly used in vendor detail pages, knowledge base articles, and documentation layouts. ## Key Components ### `StickySectionNav` A controlled `

` component that renders a vertical list of section links with an animated active-state ribbon indicator. **Props:** | Prop | Type | Default | Description | |---|---|---|---| | `sections` | `StickyNavSection[]` | — | Array of `{ id, label }` nav items | | `activeSection` | `string` | — | ID of the currently active section | | `onSectionClick` | `(id: string) => void` | — | Click handler for nav items | | `ribbonPosition` | `'left' \| 'right'` | `'left'` | Side the active ribbon renders on | | `ribbonColor` | `string` | `var(--color-accent-primary)` | CSS color for the active ribbon | | `className` | `string` | — | Optional class override | ### `useSectionNavigation` A React hook that wires up scroll-spy detection and smooth scrolling for a set of section refs. Uses `scrollElementIntoView` internally and suppresses scroll-spy during programmatic scrolls. **Parameters:** | Param | Type | Description | |---|---|---| | `sections` | `{ id: string; ref: RefObject }[]` | Sections to track | | `options.offset` | `number` | Scroll offset for sticky chrome (default: `100`) | **Returns:** `{ activeSection: string, handleSectionClick: (id: string) => void }` ## Usage Example ```typescript const overviewRef = useRef(null) const detailsRef = useRef(null) const sections = [ { id: 'overview', ref: overviewRef }, { id: 'details', ref: detailsRef }, ] const { activeSection, handleSectionClick } = useSectionNavigation(sections, { offset: 80, }) return ( <>

...

) ``` **Source:** [`sticky-section-nav.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/sticky-section-nav.tsx)