PageAside

Usage

<SPageAside>
  <template #header>
    <strong>Header</strong>
  </template>
  <SContentNavigation :navigation="navigation" />
</SPageAside>

By default SPageAside is sticky and fills the viewport height (h-screen) - meant to sit directly inside a page-level flex row, like this docs site's own layout does for both the left nav and right ContentToc rail. The example above overrides root via the ui prop to a fixed height so it fits inline in these docs.

It's also hidden below the lg breakpoint by default - a fixed-width rail alongside the main content column has nowhere to go on a narrow viewport. This docs site's own right-hand ToC rail simply disappears there; its left nav instead surfaces through a Drawer triggered from the header, since unlike the ToC it still needs to be reachable on mobile.

Scrolling is handled by a themed ScrollArea internally, not a plain overflow-y-auto div - so scrollbar styling stays consistent with the rest of the library.

Typically wraps a ContentNavigation (left nav) or a ContentToc (right rail) - see PageHeader's "Assembling a full page layout" section for how all three combine with a main content column into one page.

Custom :ui

To see exactly what you'd be overriding - the current default classes for every slot - here's PageAside's own theme file:

Global and scoped theme recipes use ui.pageAside. Its scrollArea slot is the layout override for the composed scroll region; ui.scrollArea still configures SScrollArea independently.

Props

Slots