Breadcrumbs and content menu

svelte

<script>
  import { ContentPage, Section } from '@page-sections/svelte';
</script>

<ContentPage
  page={{
    title: 'Planting',
    breadcrumbs: [
      { label: 'Guides', href: '/guides/' },
      { label: 'Garden', href: '/guides/garden/' },
      { label: 'Planting', href: '/guides/garden/planting/' },
    ],
  }}
  showContentMenu
  contentMenuLabel="In this guide"
>
  <Section
    section={{ id: 'soil', title: 'Prepare the soil', headline: 'Prepare the soil' }}
  >
    <p>Loosen the surface.</p>
  </Section>
  <Section section={{ id: 'seeds', title: 'Sow the seeds', headline: 'Sow the seeds' }}>
    <p>Follow the packet instructions.</p>
  </Section>
</ContentPage>

Breadcrumbs

Use the same navigation tree for the menu, sidebar and breadcrumbs. The first breadcrumb is the main-menu entry; Home is reachable through the logo. Breadcrumbs accepts items and an optional label. It renders nothing with fewer than two items and marks the final entry with aria-current="page".

showContentMenu registers section IDs and titles automatically. It displays a sticky right sidebar from XL or a sticky button with a popup on XS–L. The active bullet follows the reading position. Short last sections are selected at the end of the document. Reordered, added or removed sections update the list.

Native anchor links work without JavaScript. The enhanced menu adds active-state tracking and Escape dismissal. No entries means no menu or reserved rail.

SectionNavigation

For a manually supplied list, SectionNavigation remains a small stateless building block. It accepts items (id and title), label (default “On this page”) and variant (horizontal or sidebar). It does not observe scrolling. ContentPage owns the complete automatic content-menu behavior.