Header Topbar

The slim utility row above a built header (#top-bar): drop Top Links, Header Social, Header Info, or a Language Switcher inside. It is shown in the block inserter as Canvas Header Topbar and registered as canvas-core/header-topbar.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Settings

• Dark StyleDefaultOff

  Adds the "dark" class (light text/icons), used on transparent/floating headers.

• TransparentDefaultOff

  Adds the "transparent-topbar" class: removes the background so a floating/transparent header shows through.

• Container WidthDefaultContainer (boxed)

  Whether the bar contents line up with the boxed page width or stretch to the edges of the window.

  ChoicesContainer (boxed)Container Fluid (full width)

• Row AlignmentDefaultSpace Between (Default)

  How the items in the bar are spread across it. Space Between pushes the first and last item to the two edges; None leaves the spacing to Extra Classes.

  ChoicesSpace Between (Default)StartCenterEndNone (no utility)

• Extra ClassesDefaultEmpty

  Additional utility classes appended to #top-bar (e.g. the SAAS/multi-row header layouts use "bg-color py-3" / "border-bottom-0").

• Container Extra ClassesDefaultEmpty

  Additional utility classes appended to the inner .container/.container-fluid element (e.g. the multi-row header layout's topbar uses "mt-3").

Related

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Header: App Menu, Header Button, Header Cart, Header Container, Header Icon Link, Header Info.