---
url: "https://vueda.dev/v3/reference/theming/keys/StickyBar.md"
title: "StickyBar"
---

# StickyBar

Source: `client/lib/theme/vueda-tailwind/shell/index.js`

> The sticky action-bar wrapper. It stays anchored just above the page edge and translates out of view when `hidden` is true.

Vue component: [StickyBar](/v3/reference/api/vue/StickyBar.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/StickyBar.md#theme-key-StickyBar-root) | callback | The sticky action-bar wrapper. It stays anchored just above the page edge and translates out of view when `hidden` is true. |
| [inner](/v3/reference/theming/keys/StickyBar.md#theme-key-StickyBar-inner) | 2 classes | The visible sticky-bar surface. It uses a card fill (overridable per instance via the `--vueda-sticky-bar-surface` custom property), a bottom divider, and wrapping row layout for primary and secondary controls. The surface is the single strip chrome: callers that pass a `:class` to the StickyBar root set the surface custom property rather than painting a competing background, so the bar never double-wraps a nested padded surface. |
| [primary](/v3/reference/theming/keys/StickyBar.md#theme-key-StickyBar-primary) | `flex flex-wrap gap-1.5 mr-auto` | The primary control cluster inside the sticky bar. It wraps compact action buttons and pushes secondary content to the far side. |
| [secondary](/v3/reference/theming/keys/StickyBar.md#theme-key-StickyBar-secondary) | `flex flex-wrap gap-1.5 items-center` | The secondary control cluster inside the sticky bar. It keeps trailing controls aligned while allowing them to wrap on narrow widths. |
| [dirty](/v3/reference/theming/keys/StickyBar.md#theme-key-StickyBar-dirty) | 4 classes | The dirty-state badge inside the sticky bar. It uses primary tint, uppercase micro text, and pill radius to read as transient state rather than a command. |

<a id="theme-key-StickyBar-root"></a>

## root

> The sticky action-bar wrapper. It stays anchored just above the page edge and translates out of view when `hidden` is true.

Callback:

```javascript
({ hidden }) => {
            return {
                class: {
                    "sticky top-[-1px] z-30": true,
                    "transition-transform duration-300 ease-in-out transform": true,
                    "translate-y-[-100%]": hidden,
                    "translate-y-0": !hidden,
                },
            };
        }
```

Source: `client/lib/theme/vueda-tailwind/shell/StickyBar.theme.js:18`

<a id="theme-key-StickyBar-inner"></a>

## inner

> The visible sticky-bar surface. It uses a card fill (overridable per instance via the
`--vueda-sticky-bar-surface` custom property), a bottom divider, and wrapping row layout
for primary and secondary controls. The surface is the single strip chrome: callers that
pass a `:class` to the StickyBar root set the surface custom property rather than painting
a competing background, so the bar never double-wraps a nested padded surface.

Default classes:

```text
bg-[var(--vueda-sticky-bar-surface,var(--card))] border-b-hairline px-5 py-[10px]
flex items-center flex-wrap gap-2
```

Source: `client/lib/theme/vueda-tailwind/shell/StickyBar.theme.js:35`

<a id="theme-key-StickyBar-primary"></a>

## primary

> The primary control cluster inside the sticky bar. It wraps compact action buttons and pushes secondary content to the far side.

Default classes:

`flex flex-wrap gap-1.5 mr-auto`

Source: `client/lib/theme/vueda-tailwind/shell/StickyBar.theme.js:48`

<a id="theme-key-StickyBar-secondary"></a>

## secondary

> The secondary control cluster inside the sticky bar. It keeps trailing controls aligned while allowing them to wrap on narrow widths.

Default classes:

`flex flex-wrap gap-1.5 items-center`

Source: `client/lib/theme/vueda-tailwind/shell/StickyBar.theme.js:57`

<a id="theme-key-StickyBar-dirty"></a>

## dirty

> The dirty-state badge inside the sticky bar. It uses primary tint, uppercase micro text, and pill radius to read as transient state rather than a command.

Default classes:

```text
inline-flex items-center justify-center
h-[22px] px-2 rounded-full
bg-primary/[0.12] text-primary-text
text-[10px] font-semibold uppercase tracking-[0.06em] leading-none
```

Source: `client/lib/theme/vueda-tailwind/shell/StickyBar.theme.js:66`