Navbar

Collapsible navigation bar with a brand, hamburger toggler, dropdown links and an optional trailing search form, button or text. It is shown in the block inserter as Canvas Navbar and registered as canvas-core/navbar.

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:

Items

• LinksDefaultEmpty

  The links in the bar, in the order listed here. A row can also open a dropdown of its own.

  Each row of Links takes:

  • LabelDefaultEmpty

    Wording of this link.

  • URLDefault#

    Address this link opens.

  • ActiveDefaultOff

    Marks the item as the section the visitor is in.

  • Announce as CurrentDefaultOff

    Appends a visually hidden "(current)" so screen readers get the same signal the highlight gives sighted visitors.

  • DisabledDefaultOff

    Greys the link out and stops it being followed, for a section that is not open yet.

  • Dropdown ItemsDefaultEmpty

    One per line as "Label | URL". A line of --- becomes a divider. Leave empty for a plain link.

  • Dropdown IDDefaultEmpty

    Ties the menu to its toggle for assistive technology. Leave empty for an automatic unique id.

  • Extra Item ClassesDefaultEmpty

    Classes on this row as a whole, which is where a spacing or visibility utility belongs so the whole row moves with it.

  • Extra Link ClassesDefaultEmpty

    Classes on the link inside this row, for its colour or weight.

Content

• Brand TextDefaultEmpty

  Name shown at the start of the bar, in place of a logo. Leave it empty for a bar with no brand.

• Brand URLDefaultEmpty

  Leave empty for a brand that is a label rather than a link.

• Trailing ElementDefaultNone

  What sits at the far end of the bar, after the links: a search box, a call-to-action button, a line of text, or nothing.

  ChoicesNoneSearch FormButtonText

• Search PlaceholderDefaultSearch

  Prompt shown inside the empty search box.

  Shown when Trailing Element is "Search Form"

• Search Button LabelDefaultSearch

  Wording on the button that submits the search.

  Shown when Trailing Element is "Search Form"

• Button LabelDefaultEmpty

  Wording on the trailing button.

  Shown when Trailing Element is "Button"

• TextDefaultEmpty

  Wording shown at the far end of the bar, such as a phone number or a short note.

  Shown when Trailing Element is "Text"

Style

• Search Button ClassesDefaultbtn btn-outline-success

  Classes that style that search button.

  Shown when Trailing Element is "Search Form"

• Button ClassesDefaultbtn btn-outline-secondary

  Classes that style that button.

  Shown when Trailing Element is "Button"

• Form ClassesDefaultrow gx-3 align-items-center my-2 my-lg-0

  Classes on the trailing form element.

  Shown when Trailing Element is "in"

• Expand AtDefaultLarge

  The width at which the links stop collapsing behind the toggler.

  ChoicesNever (always collapsed) (empty)SmallMediumLargeX-LargeXX-LargeAlways expanded

• Colour SchemeDefaultLight (dark text)

  Which text colour the bar carries: pair a dark scheme with a dark background.

  ChoicesNone (empty)Light (dark text)Dark (light text)

• Background ClassDefaultEmpty

  Background utility, e.g. bg-light, bg-dark, bg-primary. Leave empty for a transparent bar or a custom background set in Advanced.

• Custom Background ColourDefaultEmpty

  A background the utility classes do not cover. Leave the Background Class empty when using this.

• Inner Container ClassesDefaultcontainer-fluid

  The width wrapper inside the bar. Empty removes the wrapper entirely.

• Link List ClassesDefaultnavbar-nav me-auto

  Classes on the list of links, which decide where it sits in the bar and how the links are spaced.

Settings

• Collapsing BodyDefaultOn

  Wrap the links and trailing element in a collapsing region. Turn off for a one-line bar whose contents always stay visible.

• Collapse IDDefaultEmpty

  Ties the toggler to the region it opens. Leave empty for an automatic unique id.

  Shown when Collapsing Body is on

• Show TogglerDefaultOn

  Draws the hamburger button that opens the bar once it has collapsed on a narrow screen.

• External Toggle TargetDefaultEmpty

  Id of a collapsing region ELSEWHERE on the page for the toggler to open, instead of this bar's own body.

  Shown when Show Toggler is on

• Toggler Accessible LabelDefaultToggle navigation

  What a screen reader announces for the hamburger button.

  Shown when Show Toggler is on

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 Content: Background Video / Audio, Cascading Images, Charts, Circle Stack, Clients, Data Tables.