---
title: "Sticky Bar"
subtitle: "Page-level controls that stay visible on scroll"
description: "How to use the sticky bar component for breadcrumbs, actions, dropdowns, tabs, toggles, and contextual navigation."
author: "Studio"
section: "Design System"
layer: "docs-site"
subsection: "Content"
order: 8
status: "published"
access: "team"
client: "internal"
---
The sticky bar is a horizontal bar that sticks below the page header as the user scrolls. It provides contextual controls for the current page — breadcrumbs, tabs, dropdowns, toggles, or any combination.
Child components (tabs, breadcrumbs, toggles, segmented controls) are automatically styled when placed inside a `.sticky-bar` — they stretch to fill the bar height and align correctly without extra classes.
---
## Tokens
The sticky bar uses existing design system tokens. No component-specific tokens are needed.
| Property | Value | Purpose |
|----------|-------|---------|
| `position` | `sticky` | Sticks to the top of the viewport on scroll |
| `top` | `0` | Default position (override to sit below a fixed header) |
| `z-index` | `40` | Sits above page content, below modals |
| `background` | `var(--background-primary)` | Matches the page background |
| `border-bottom` | `var(--border-s) solid var(--border-faded)` | Subtle bottom border on container |
---
## Breadcrumbs
The most common usage — breadcrumb navigation inside the bar.
```html
```
---
## Tabs
Tab-style anchor links for page section navigation. Inside a `.sticky-bar`, tabs automatically stretch to the full bar height and the active indicator aligns with the bottom border.
```
---
## Dropdown
Dropdowns inside the sticky bar use the standard `.dropdown` component. The trigger gets tighter horizontal padding automatically when inside a `.sticky-bar`. Place the dropdown inside `.sticky-bar-actions` to keep it outside the scrollable content area.
```
See the [Dropdown](dropdown.html) docs for the full component reference.
---
## Toggle
Form toggles centre vertically inside the bar automatically.
Dark mode
```html
Dark mode
```
---
## Segmented control
Segmented controls centre vertically inside the bar automatically.
View
```html
View
```
---
## Combined
A realistic example combining tabs and a dropdown action menu in one bar. The `.sticky-bar-content` area scrolls horizontally on mobile while the dropdown stays pinned.
```
---
## Supported child components
Any of these components automatically adapt when placed inside a `.sticky-bar`:
| Component | Behaviour inside sticky bar |
|-----------|---------------------------|
| `.tabs` / `.tab` | Stretches to full bar height, indicator aligns with bottom border |
| `.breadcrumb` | Centres vertically |
| `.sticky-bar-breadcrumbs` | Centres vertically (docs-specific breadcrumb variant) |
| `.form-toggle` | Centres vertically |
| `.segmented-control` | Centres vertically |
| `.dropdown` | Stretches to full bar height, trigger gets compact padding |
| `.sticky-bar-actions` | Stretches to full bar height, aligns right |
---
## Structure
| Element | Class | Purpose |
|---------|-------|---------|
| Outer wrapper | `.sticky-bar` | Sticky positioning and background |
| Layout container | `.sticky-bar-container` | Flexbox layout, border |
| Scrollable content | `.sticky-bar-content` | Holds left-side content (breadcrumbs, tabs, toggles etc.), scrolls horizontally on mobile |
| Actions | `.sticky-bar-actions` | Right-aligned action group, sits outside the scrollable area |
| Dropdown | `.dropdown` | Standard dropdown component (see [Dropdown docs](dropdown.html)) |
```
.sticky-bar
.sticky-bar-container
.sticky-bar-content ← scrolls horizontally on mobile
[breadcrumbs / tabs / toggles / segmented-control / labels]
.sticky-bar-actions ← pinned, never clipped
.dropdown
```
**`.sticky-bar-content` is always required** — even when there is no dropdown. This keeps the structure consistent and ensures horizontal scrolling works when needed.
---
## Docs site: page sub-header variant
Doc and tool pages use a `.sticky-bar-page` modifier that promotes the sticky bar to act as the page's sub-header (carrying breadcrumb and the markdown actions menu). It sits directly below the fixed site header and is constrained to the article column width.
```html
…
```
```css
.sticky-bar-page {
top: var(--top-nav-height);
}
.sticky-bar-page .sticky-bar-container {
max-width: 1080px;
margin: 0 auto;
height: var(--sticky-bar-height);
padding-left: var(--space-l);
}
```
Tool pages (calculator, SVG cleaner) may set their own `padding` on `.sticky-bar-container` to match their layout.
---
## Accessibility notes
- Use `