Topbar

Label of the currently active navigation item — applies the active style.

Controlled open state of the mobile navigation drawer. Omit it for the uncontrolled default (the hamburger opens the drawer, Escape / the close button / a followed link close it). Pair with `onMobileOpenChange`. Bindable in Svelte (`bind:mobileOpen`); `v-model:mobileOpen` in Vue. The drawer closes itself after a plain click on a link inside it — also when a client-side router handles the click (`navigationProps.onNavigate` / `linkComponent`). Modifier/middle clicks, `_blank`, `download` and external links, and submenu toggles leave it open.

The color family the highlight active state paints in (`activeEmphasis="highlight"`), independent of `tone` — e.g. a primary current row in a neutral list. Ignored at other levels.

Surface background forwarded to the **Navigation** inside the bar — not the Topbar's own Panel surface, which is fixed at `surface.peak`.

Border color at rest: `none`, `default`, `bold`, `muted`, or `accent`. The 1px line is always reserved when a border can appear, so changing it never shifts layout.

Border color while the surface is `active` — the explicit form of the ring `activeEmphasis` would otherwise pick. It holds through hover, so a `borderInteract` color can't steal it. `inherit` keeps whatever `activeEmphasis` chose; `none` clears it.

Border color on hover and press: `none`, `default`, `bold`, `muted`, or `accent`. Composes with `border`, e.g. a muted line at rest that turns bold on hover.

Which surface ramp the panel paints with: `primary` is the filled tone accent (with contrast text), `secondary` the tone's own surface tint, `tertiary` the neutral ramp with tone-accent text. `background` then picks the step on that ramp.

What hover and press paint on an interactive surface: `surface` steps the resting surface ramp; `highlight` paints the tone's highlight (`neutral.highlight` on a neutral surface) and its next step while pressed. An active surface keeps its own hover steps.

Elevation shadow applied to the surface.

Color tone: a semantic tone (`neutral`, `primary`, `success`, `warning`, `danger`, `inherit`) or a color family such as `teal`. A family carries no status meaning.

Frosted glass: the chosen `background` step at /35 with a large backdrop blur, so content behind the panel shows through. A transparent background stays transparent.

Inner padding from the spacing scale.

Corner radius from the radii scale (`full` for fully rounded). `inner` computes a concentric corner from the parent panel's radius minus its padding; `inherit` mirrors the parent's corner exactly, for a child that sits flush with its edge.

Corner radius for the bottom-left and bottom-right corners.

Corner radius for the top-left and bottom-left corners.

Corner radius for the top-right and bottom-right corners.

Corner radius for the top-left and top-right corners.

Keep (or drop) the always-1px transparent border the panel reserves so a border appearing or changing never shifts layout. Computed automatically — it's reserved when a resting `border` is visible, or when `interactive` / `borderInteract` / `active` can change the border at runtime. Set `false` only on a panel that must not occupy that 1px (e.g. a borderless housing frame that would otherwise add 2px around a set).

Opt this panel into the baseline rhythm: bakes `data-rhythm` on the root, so the whole subtree becomes a rhythm scope. The panel's padding turns into whole raster lines (minus its border) and text inside can quantise its own leading through the preset's `rhythm` pattern. A `<Grid rhythm>` (or any `[data-rhythm]`) ancestor makes the subtree rhythmic without this prop — the prop is how a panel opts ITSELF in, and how it takes the line-based padding.

Mark this as the chosen one in a set (a current nav item, a checked option, a selected card). Where `interactive` says it *can* be clicked, `active` says it *is* the current choice. Use `activeEmphasis` to control how loud the state is. Combined with `interactive`, hover and press restart their stepping from the active baseline rather than falling back to the unchosen ramp. The four values differ only in what drives the state: `true` by the prop (via `data-panel-active`), `"checked"` by a wrapped native input (`:has(input:checked)` — zero JS, nothing to re-render), `"current"` by an existing `aria-current` on the panel, and `"current-within"` by an `aria-current` on a direct child (a split nav row whose link carries it).

How loud the `active` state is. Defaults to the panel's own `emphasis`, so the chosen state lands on the same ramp as the resting look — this prop is the override for when the active item should be louder (or quieter) than the panel itself. `"primary"` fills with the tone accent ramp and flips text to the contrast scale (~150 RGB units of separation — the option that reads at a glance in a dense list). `"secondary"` tints the tone surface ramp and `"tertiary"` the neutral ramp; both promote text to `bold` and lift the border to the default line, but move the surface only ~7–18 units.

HTML element to render. Curated to container-like tags so semantic intent stays clear (no html/script/style/etc).

Enable interactive (hover / focus / press) affordances and states.

Navigation items rendered by the internal Navigation on both desktop and mobile.

Fires with the new state whenever the mobile drawer opens or closes — including the automatic close after a navigation from inside it. In controlled mode (`mobileOpen` set) update `mobileOpen` from here. Astro dispatches the `pindoba:topbar-mobile-change` DOM event instead.

Render the built-in AppearancePicker (theme mode, palette, density and radius) in the desktop and mobile extras area.

Accessible label of the mobile drawer's close button, forwarded as the Dialog's `closeLabel`. When unset the Dialog's own default (`"close"`) applies; `mobileDialogProps.closeLabel` still takes precedence.

Title of the mobile navigation drawer — rendered in the Dialog header and used as its accessible name. `mobileDialogProps.title` still takes precedence.

Screen-reader label of the mobile menu trigger (the hamburger button that opens the navigation drawer). Override it to localize the Topbar.

Extra content placed beside the AppearancePicker.

Brand / logo content.

Replaces the default Navigation with custom menu content.

Props forwarded to both AppearancePicker instances.

Props forwarded only to the desktop AppearancePicker. Takes precedence over `appearanceProps` for the desktop placement.

Id prefix every element id the Topbar renders is derived from (the mobile trigger, the mobile drawer Dialog and both AppearancePickers), so several topbars can share a page. Each framework generates a stable one when unset.

Props forwarded only to the mobile AppearancePicker (inside the drawer). Takes precedence over `appearanceProps` for the mobile placement.

Props forwarded to the Dialog used as the mobile navigation drawer.

Props forwarded to both the desktop and mobile Navigation components.

Per-slot Panda CSS style overrides applied to individual topbar slots.

Astro / vanilla: serialize the props into `data-topbar-config` so the client runtime hydrates this instance and `getPindoba(el, "topbar")` can `update()` it. Frameworks with their own reactivity don't need it.