Options
AppHeader supports an optional centered title and two independent action clusters.Title
title renders centered between the two action clusters with <h1> semantics — it’s the primary heading of the view the shell frames. Omit it for an action-only header; the flexible middle still reserves the centered space, whether or not a title fills it.
Actions
leadingActions render at the start (left in LTR) and trailingActions at the end. Reserve leadingActions for entry points into the surrounding layout — panel toggles, navigation — and trailingActions for surface-level controls, like minimize and close. Keep each action in the cluster it conventionally belongs to; don’t relocate a panel toggle to the trailing side or a window control to the leading side. Consumers rely on this placement staying consistent across every Carto surface, so avoid rearranging it in your implementation.
Behavior
The header adapts its title to available space and can present any action as disabled.Title Truncation
The title is single-line and truncates with an ellipsis rather than wrapping or pushing the action clusters. Its center shifts toward the side with fewer actions, since it fills the flexible space between both clusters.Disabled Actions
Setdisabled on an individual action to dim it and block interaction while keeping it in place — useful when a panel toggle has nothing to reveal yet.
Keyboard Interaction
Users can navigate and activate header actions using standard keyboard controls.Patterns that use this component
- Agentic Experience Shell — Identifies the experience and provides shell-level actions