Page shell and sidebars

Try the page frame

Change the sidebars of this page and resize the browser. Below 1600px the content menu moves into a sticky popup.

Visible sidebars
svelte 
<ContentPage showContentMenu={true}>
  {#snippet leftSidebar()}...{/snippet}
  ...
</ContentPage>
svelte 
<script lang="ts">
  import { ContentPage, HeadingSection, SidebarNavigation, Section } from '@page-sections/svelte';
  import { resolveNavigation } from '@page-sections/core';
  const navigation = resolveNavigation(
    [
      {
        id: 'guides',
        label: 'Guides',
        href: '/guides/',
        children: [{ id: 'planting', label: 'Planting', href: '/guides/planting/' }],
      },
    ],
    { currentId: 'planting' },
  );
</script>

<ContentPage
  page={{ title: 'Planting', breadcrumbs: navigation.breadcrumbs }}
  showContentMenu
>
  <HeadingSection section={{ id: 'title', title: 'Planting', headingLevel: 1, background: { color: 'standard' } }} />
  {#snippet leftSidebar()}
    <SidebarNavigation items={navigation.sidebarItems} activeId={navigation.activeId} />
  {/snippet}
  <Section
    section={{
      id: 'preparation',
      title: 'Preparation',
      headline: 'Prepare the soil',
      background: { color: 'standard' },
    }}
  >
    <p>Loosen the surface and choose a sunny patch.</p>
  </Section>
  <Section
    section={{
      id: 'planting',
      title: 'Planting',
      headline: 'Sow the seeds',
      background: { color: 'muted' },
    }}
  >
    <p>Follow the packet instructions and water regularly.</p>
  </Section>
</ContentPage>

ContentPage props

page: ContentPageData is required. It supplies the title, optional pageTitle, and breadcrumbs. children contains the sections. bodyLayout is wide or narrow; bodySpacing controls vertical body spacing.

  • leftSidebar?: Snippet supplies the contents of the left surface. ContentPage owns its width, shadow and scrolling.
  • showContentMenu?: boolean defaults to false. It builds the right-hand contents menu from registered h2/h3 sections. H1 and h4�h6 are excluded; h3 entries are indented. A page without eligible sections reserves no right rail.
  • contentMenuLabel?: string defaults to “On this page”.
  • footer?: Snippet renders after the sections within the content column, for example previous/next links.
  • manageDocumentTitle defaults to true. Turn it off when the host owns the document title.
  • theme, class and standard main-element attributes are supported.

Headers and breadcrumbs

Place a HeadingSection or HeroSection with headingLevel: 1 directly in the page content. It controls its own background, position and typography, like every other section. Breadcrumbs remain separate. Supply the path from the first main-menu entry through the current page; exclude Home. A one-entry breadcrumb is hidden. Its row remains reserved, including on pages without breadcrumbs, so the content and sidebars keep their vertical position. The logo links to Home.

Supply exactly one h1. The main landmark uses page.title as its accessible label, unless aria-label or aria-labelledby is provided.

PageShell

PageShell optionally wraps navigation and ContentPage to share theme and mode (light or dark). It accepts a children snippet. It does not detect or persist a system preference; the application owns that choice.

Responsive layout and scrolling

Sections never exceed 1536px. At XS–L (below 1600px), both desktop sidebars are hidden. The right contents menu remains available in a sticky popup. Both panels are 248px wide at XL and 2XL, with a 12px gap at XL and a 28px gap at 2XL. At 3XL panels are 300px wide with a 28px gap, and the 1536px content column stays centered regardless of sidebar occupancy.

Both panels stick 16px from the viewport top and scroll internally when necessary. The right panel docks only when every page-level section, including the heading, has a standard-width standard or muted background. It then fills the gap, starts 16px lower and has no shadow. A transparent or full-width surface makes it freestanding, with the same rounded corners, gap and shadow as the left panel. An ordinary unpainted page header also makes it freestanding. Nested blocks inside an opaque section do not break that section's surface. This updates automatically, including without JavaScript. The main menu keeps its own centered geometry.

The registry renders anchor links during SSR. JavaScript adds active-section tracking, Escape dismissal and focus restoration. Native details make the mobile popup usable without JavaScript. Navigation remains composed of ordinary links.