Navigation

The RuiBreadcrumb component provides automatic breadcrumb generation from route data or manual item input. See the full Breadcrumb demo for all features.

Code
<rui-breadcrumb />

On This Page

The RuiOnThisPage component tracks headings on the current page and highlights the active one using IntersectionObserver. It auto-discovers <h2> elements with id attributes inside the configured container.

The sidebar on the right of this page (visible on xl+ screens) demonstrates the component. Scroll to see the active heading change.

Code
<rui-on-this-page />

Configuration

The component accepts inputs for custom heading selectors, scroll containers, root margins, and title. 

// Custom heading selector and scroll container
<rui-on-this-page
  headingSelector="article h3[id]"
  scrollContainer=".article-content"
  title="In this article"
  rootMargin="-10% 0px -70% 0px"
/>

// Available inputs:
// - headingSelector: CSS selector for headings (default: 'main h2[id]')
// - scrollContainer: CSS selector for scroll container (default: 'main')
// - title: sidebar title (default: 'On this page')
// - rootMargin: IntersectionObserver margin (default: '-10% 0px -70% 0px')