HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
App HeaderView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorPage-level banner holding brand, navigation, and actions.StableSince 0.1.0NavigationUsageimport'@fusion.dev/helix/app-header'import'@fusion.dev/helix-headless/app-header'Preview
API ReferenceRoothelix-app-headerPage-level banner holding brand, navigation, and actions.
PropTypeDescriptioncontentAlign"start"Where the middle region sits in the bar.defaultOpenbooleanDefaultfalseWhether the element starts open. Ignored once open is written.foldBelownumberThe width of the bar, in pixels, below which the middle region folds behind
a toggle. Unset, it never folds.hideOnScrollbooleanDefaultfalseHides the bar as the page scrolls down past it, and shows it again as the
page scrolls up.material"frosted"|"glass"|"transparent"What the banner is made of, which sets how much of the page behind it
shows through.menuLabelstringDefault"Menu"The name of the toggle that opens a folded middle region.openbooleanWhether the element is open.scrollerstringThe id of the element whose scrolling lifts the bar, for an app shell that
scrolls a container instead of the window. Unset is the window.stickybooleanDefaultfalseWhether the banner sticks to the top of the viewport.togglePlacement"start"Where the toggle that opens a folded middle region sits: at the end of the
bar, after the trailing content, or with start, before the leading
content.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The middle region, usually a Navigation.endTrailing content, usually a call to action.menu-iconReplaces the glyph inside the toggle that opens a folded middle region.startLeading content, usually a wordmark.
EventTypeDescriptionhelix-before-closeHelixBeforeCloseEventThe folded region is about to close. Cancelable: cancel it to keep it open.helix-before-openHelixBeforeOpenEventThe folded region is about to open. Cancelable: cancel it to keep it closed.helix-scrolledHelixScrolledEventFired when the page crosses the scroll threshold, with the new state. A custom state cannot be observed the way an attribute can, so listen for this event to follow it. The event uses the header's own threshold and hysteresis, so you do not need a second scroll listener.toggleToggleEventThe folded region opened or closed. The event carries newState and oldState.
MethodTypeDescriptionrequestOpen(next: boolean) => booleanRequests that the element open or close, and returns whether the change
was applied.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptioncontentThe middle region.endThe trailing region.rowThe centered row inside the banner.startThe leading region.toggleThe control that opens and closes the folded middle region, drawn while the bar is narrower than fold-below.toggle-markThe glyph on the toggle, where none is slotted.
CSS PropertyDescription--app-header-backdropThe filter behind the banner. Set it to none when you pair the header with a panel.--app-header-background-colorFill behind the banner.--app-header-block-sizeHeight of the banner.--app-header-border-colorThe line under the bar. None by default.--app-header-max-inline-sizeWidth the content is centered in.--app-header-paddingInline padding of the banner.
Custom stateDescriptionfoldedWhile the bar is narrower than fold-below, and the middle region is behind the toggle.hiddenWhile hide-on-scroll has the bar out of the way, after a scroll down.openWhile the folded middle region is open.scrolledWhile the page is scrolled down from the top, which is when the bar lifts off it.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-app-headerPage-level banner holding brand, navigation, and actions.
PropTypeDescriptioncontentAlign"start"Where the middle region sits in the bar.defaultOpenbooleanDefaultfalseWhether the element starts open. Ignored once open is written.foldBelownumberThe width of the bar, in pixels, below which the middle region folds behind
a toggle. Unset, it never folds.hideOnScrollbooleanDefaultfalseHides the bar as the page scrolls down past it, and shows it again as the
page scrolls up.menuLabelstringDefault"Menu"The name of the toggle that opens a folded middle region.openbooleanWhether the element is open.scrollerstringThe id of the element whose scrolling lifts the bar, for an app shell that
scrolls a container instead of the window. Unset is the window.togglePlacement"start"Where the toggle that opens a folded middle region sits: at the end of the
bar, after the trailing content, or with start, before the leading
content.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The middle region, usually a Navigation.endTrailing content.menu-iconReplaces the glyph inside the toggle that opens a folded middle region.startLeading content, usually a wordmark.
EventTypeDescriptionhelix-before-closeHelixBeforeCloseEventThe folded region is about to close. Cancelable: cancel it to keep it open.helix-before-openHelixBeforeOpenEventThe folded region is about to open. Cancelable: cancel it to keep it closed.helix-scrolledHelixScrolledEventFired when the page crosses the scroll threshold, with the new state. A custom state cannot be observed the way an attribute can, so listen for this event to follow it. The event uses the header's own threshold and hysteresis, so you do not need a second scroll listener.toggleToggleEventThe folded region opened or closed. The event carries newState and oldState.
MethodTypeDescriptionrequestOpen(next: boolean) => booleanRequests that the element open or close, and returns whether the change
was applied.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptioncontentThe middle region.endThe trailing region.rowThe centered row inside the banner.startThe leading region.toggleThe control that opens and closes the folded middle region, drawn while the bar is narrower than fold-below.toggle-markThe glyph on the toggle, where none is slotted.
Custom stateDescriptionfoldedWhile the bar is narrower than fold-below, and the middle region is behind the toggle.hiddenWhile hide-on-scroll has the bar out of the way, after a scroll down.openWhile the folded middle region is open.scrolledWhile the page is scrolled down from the top, which is when the bar lifts off it.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionGlassA glass header that blurs the content scrolling beneath it.Navigation At The StartThe navigation placed at the start, beside the brand mark.OpaqueThe default opaque header, with no material, no shadow, and no blur.PreviewA brand, a navigation, and actions on the right.PreviewA brand, a navigation, and actions on the right.StickyA header that stays at the top while the page scrolls under it.TransparentA transparent header over a dark hero, with its own color mode.