Quaff

QHeader

Headers place navigation, titles, and actions at the top of an app. Choose compact or expanded bars, with optional scrolling behavior.

Tempo
TONIGHT'S CLASS

Strength circuit

18:30 · 35 minutes · Studio 2

info QHeader API Source

interface QHeaderProps extends HTMLAttributes<HTMLElement>

bordered
?: boolean = false
Whether the component should have a border.

collapse
?: boolean = false
In QLayout, collapses a medium or large app bar to small when scrolling. Returns to its full size at the top. Short pages stay expanded when collapsing would remove their scroll range.

elevated
?: boolean = false
Adds a drop shadow to the app bar.

height
?: number = undefined
Height in pixels. Small defaults to 64, growing for subtitles. An explicit small height stays fixed; flexible variants treat it as a minimum.

inset
?: boolean = false
Adds extra left padding to the app bar content.

reveal
?: boolean = false
When used in QLayout, hides the app bar on scroll down and shows it on scroll up.

revealOffset
?: number = 250
The offset in pixels to trigger the reveal effect. The app bar will be hidden when the scroll position is greater than this value.

variant
?: "small" | "medium" | "large" = "small"
App bar size. Medium and large place a direct QHeaderTitle below the navigation and actions.
info QHeaderTitle API Source

interface QHeaderTitleProps extends HTMLAttributes<HTMLDivElement>

align
?: "start" | "center" = undefined
Aligns the title and subtitle. Defaults to start in flexible app bars and center otherwise.

shrink
?: boolean = false
Keeps the title at its natural width instead of filling the available app bar space.

subtitle
?: string | Snippet = undefined
Supporting text below the title.

Usage

Flexible App Bars
Use variant="medium" or variant="large" for a larger title. Add subtitle and align="center" to QHeaderTitle.
Large
Centered
Subtitle
Open House
A weekend behind closed doors
18–19 MAY · FREE ENTRY
See the city from the inside.

Studios, courtyards, and the stories behind them.

32 places to explore
Custom Height
The default height is 64px. Set height to a number of pixels for more room; this booking app uses height=96.
NORTH BATHS
Sauna sessions
TODAY · 60 MINUTES · €18
17:30
18:30

Choose your time. Towels are available to hire.

Collapse on Scroll
Set collapse inside QLayout. Scroll inside the guide: the title and subtitle become compact and stay small until you return to the top.
Harbor walk
3 stops · 2.4 km
Two hours along the waterfront. Start at the harbor clock.
STOP 1 · 09:00
The old port

Stone quays, tall ships, and a city built around the water.

Start by the harbor clock. Follow the quay past the old warehouses, where painted numbers still mark each loading bay. The small exhibition inside the customs house tells the story of the ships that once docked here.

STOP 2 · 09:45
Market hall

An iron-and-glass landmark, still full of local flavor.

Cross the footbridge to the covered market. Its original iron roof shelters bakers, flower stalls, and a counter serving coffee from early morning. Take the stairs to the gallery for a closer look at the building's tiled signs.

STOP 3 · 10:45
Ferry landing

A new view of the waterfront, just across the river.

Continue along the promenade to the public ferry. Boats leave every fifteen minutes, and a regular city ticket covers the crossing. From the opposite bank, you can see the whole route: the warehouses, the market roof, and the harbor clock.

Save this walk for your next free morning.

Reveal on Scroll
Scroll inside the reading area: reveal hides the header as you scroll down and brings it back as you scroll up. revealOffset sets the extra distance beyond the header height before it hides.
The slow journal
The art of noticing

Take a familiar walk without a destination. Look up at the windows, down at the paving stones, and across at the shop you usually hurry past. There is often something new hiding in a place you know well.

Bring back one detail: the shape of a shadow, a hand-painted sign, or the color of a doorway. Write it down before the rest of the day fills the space. A collection starts with noticing one thing.

Five minutes of quiet

Put the kettle on and leave your phone in another room. You do not need to make the pause productive. Watch the steam, open a window, or sit somewhere you can see a patch of sky.

When the cup is empty, choose one thing to do next. It can be a small thing. The point is to return to the day at your own pace, with a little more room between one task and another.

Make something small

Fold a scrap of paper into a tiny book. Sketch the plant on your desk, write a postcard, or try a new combination of colors. Pick something small enough to finish before you start wondering whether it is any good.

Leave what you made where you can see it. Tomorrow you might add another page, or you might try something completely different. A few minutes and whatever is already on the table are enough to begin.

Inset and Title Width
inset leaves space before the content. QHeaderTitle fills the remaining width by default; shrink keeps it at its natural width.
Inset content
Compact title
Drafts
cloud_done