Overview

The SupportingPane component implements the Material Design 3 supporting-pane canonical layout: a primary content region alongside a narrower, fixed-width panel used for related but secondary content — contextual actions, filters, or (as on this site) a table of contents.

Every docs page in this library, including this one, wraps its content in <SupportingPane anchor="viewport" position="right">, putting the article in main and a TableOfContents in supporting. That's the anchor="viewport" mode: the panel fixes to the true browser edge and scrolls independently, which is why the TOC stays put while you scroll the article. See the Split Pane docs for the sibling component's take on the same anchor-mode distinction.

Import

import { SupportingPane } from '@noxlovette/material';

Live Demo

See it live, with Controls, in Storybook rather than a hand-rolled preview here. The Storybook canvas demos anchor="parent" (sticky-within-a-box), since anchor="viewport" — the mode this very page uses — only reads correctly on a real scrolling page like this one.

Basic Usage

The pattern used by every docs page in this library:

<script lang="ts">
  import { SupportingPane } from '@noxlovette/material';
</script>

<SupportingPane anchor="viewport" position="right" rounded={false} gap="none">
  {#snippet main()}
    <article>...</article>
  {/snippet}
  {#snippet supporting()}
    <aside>On this page...</aside>
  {/snippet}
</SupportingPane>

SupportingPane Props

Accessibility