---
url: "https://vueda.dev/v3/reference/api/vue/StickyStackProvider.md"
title: "StickyStackProvider"
---

# StickyStackProvider

## Overview

Hosts the framework-owned sticky chrome stack for a layout. Place it around the scrolling region
(inside the layout's main content area, wrapping `<RouterView>`); the window remains the scroll
container, so this component introduces no `overflow`. It renders an ordered stack of
independently-revealing sticky bars pinned to the top and bottom of the viewport, establishes the
`useStickyStack` context so the active view can teleport chrome into either zone (via
`StickyChrome`), and publishes the visible top-stack height as `--vueda-sticky-stack-top` for
descendants (such as a sticky grid header) to offset against.

The page title goes in the `top` slot (plain composition); it is the always-pinned first bar of
the top stack, and the view's chrome (filters, form actions) stacks below it, each revealing on
its own schedule. Each bar's sticky offset is the cumulative height of the visible bars between it
and the viewport edge, so hiding one bar compacts the rest with no offsets crossing the layout
boundary.

Theme entry: [StickyStackProvider](/v3/reference/theming/keys/StickyStackProvider.md)

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <span id="prop-themeOverride">themeOverride</span> | `Object` |  | `null` | A partial ThemeObject keyed by component name, merged over this component's theme and provided to descendants. |
| <span id="prop-class">class</span> | `import('vue').HTMLAttributes['class']` |  | `undefined` | Additional CSS classes to apply to the root element. |

## Slots

| Name | Scoped | Description |
| --- | --- | --- |
| `top` |  | Pinned top chrome placed by the integrator, typically the page title. The always-visible first bar of the top stack. |
| `default` |  | Scrolling page content, typically the router view. |
| `bottom` |  | Pinned bottom chrome placed by the integrator, the bottom-most bar of the bottom stack. |

[Full slot reference](/v3/reference/api/vue/StickyStackProvider/slots.md)

## Source

`client/lib/shell/sticky/StickyStackProvider.vue`