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

# StickyBar

## Overview

Renders a sticky toolbar that hides when the user scrolls down past its
initial position and reappears when they scroll back up or the scroll pauses.

Two modes:

- **Standalone (default).** The bar self-stickies to the window's scroll (or
  to `scrollRoot` when it lives inside a scrollable region) and drives its own
  hide/reveal via `useScrollReveal`. The `reveal` strategy is selectable;
  `scroll-up-or-idle` is the default (and original) behavior.
- **Zone-managed (`zone` set).** The bar teleports its surface into a
  `StickyStackProvider` zone (via `StickyChrome`) and lets that zone own the
  positioning and reveal, so it stacks with the page title and other chrome.
  When no provider is present the surface renders inline where the bar is
  placed.

Exposes named `primary` (submit / primary actions, pushed to the start) and
`secondary` (read-only actions, contextual info) slots; falls back to the
default slot when neither named slot is bound.

Theme entry: [StickyBar](/v3/reference/theming/keys/StickyBar.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-zone">zone</span> | `string` |  | `null` | When set (`top` / `bottom`), the bar teleports into that `StickyStackProvider` zone, which owns its positioning and reveal; the bar does not stick itself. When `null` (the default) the bar is standalone and self-stickies. Read once at mount; changing it later does not re-home the bar. |
| <span id="prop-order">order</span> | `number` |  | `0` | Sort order of this bar within its zone's stack, ascending top to bottom. Only used when `zone` is set. |
| <span id="prop-reveal">reveal</span> | `import('vue').PropType<import('@vueda/use/useScrollReveal.js').ScrollRevealStrategy \| boolean>` |  | `"scroll-up-or-idle"` | Reveal behavior: a strategy string (`always`, `scroll-up`, `scroll-up-or-idle`) or a boolean (revealed when `true`). In standalone mode it drives the bar's own `useScrollReveal`; in zone-managed mode it is forwarded to the zone. Defaults to `scroll-up-or-idle` (a submit / action bar that returns the moment scrolling settles). |
| <span id="prop-scrollRoot">scrollRoot</span> | `object` |  | `null` | Scroll container the bar reacts to. Pass the scrollable element (or a ref to one) when the bar lives inside a scrollable region rather than the page; the hide/reveal threshold and the scroll listener bind to it. When `null` (the default) the bar reacts to the window. Standalone mode only; in zone-managed mode the provider owns the scroll model. |

## Slots

| Name | Scoped | Description |
| --- | --- | --- |
| `primary` |  | Primary action area (e.g. submit button), pushed to the start of the bar. |
| `secondary` |  | Secondary action / contextual info area, pinned to the end of the bar. |
| `default` |  |  |

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

## Source

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