Canvas Docs

Tabs

Split related content across labelled tabs so visitors read one section at a time, which keeps a long comparison or specification page short enough to scan. It is shown in the block inserter as Canvas Tabs and registered as canvas-core/tabs.

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

The Tabs settings in the block editor sidebar

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

  • Tab ItemsDefaultEmpty

    The tabs in this set. Each row supplies both the tab label and the panel it opens.

    Each row of Tab Items takes:

    • TitleDefaultTab Title

      Inline markup is allowed, so a tab label can be a glyph plus a caption span.

    • ContentDefaultEmpty

      What this tab shows when it is opened.

    • IconDefaultEmpty

      Glyph shown before the label on this tab.

    • Trailing IconDefaultEmpty

      Icon after the label: the chevron a side rail puts at the end of every row. Its class string is used verbatim, so it can carry its own spacing utility.

    • URL Hash IDDefaultEmpty

      A readable name of your own for this panel, used in place of the generated one. Leave empty and a name is generated.

    • Extra Tab ClassesDefaultEmpty

      Extra classes on this tab button, for laying an icon and its caption out inside the tab.

    • Extra Item ClassesDefaultEmpty

      Extra classes on this tab's list item: a stacked rail spaces its tabs here, and usually skips the gap on the last one.

  • Tab StyleDefaultDefault

    List Group is Bootstrap's vertical-pills rail: the strip is a plain container of buttons rather than a tab list, so a side navigation can be built from it. Bare gives the strip no classes of its own, for a design that states its whole look in Tab Strip Classes.

    ChoicesDefaultBorderedAltAlt Top & BottomAlt Bottom BorderPillsList Group (side rail)Bare (no tab skin)

  • DirectionDefaultHorizontal

    Whether the tabs run across the top or stack into a rail beside the panels. Vertical Bordered adds a rule between the two.

    ChoicesHorizontalVerticalVertical Bordered

  • AlignmentDefaultEmpty

    Where the tabs sit along the strip. Fill spreads them to share the full width. Ignored by the vertical directions.

    ChoicesLeft (empty)CenterRightFill

  • SizeDefaultEmpty

    Small tightens the tabs, for a set with many of them or one inside a narrow column.

    ChoicesNormal (empty)Small

  • Activate on HoverDefaultOff

    Switch panels as the pointer passes over a tab, without waiting for a click.

  • Active TabDefault1

    Which tab is open when the page loads, counted from the start of the list above.

  • Fade Between PanelsDefaultOn

    Cross-fade when a different tab is opened. Turn off for a compact widget, where the transition reads as lag.

Style

  • Tab Strip ClassesDefaultEmpty

    Extra classes on the tab strip. Setting any class here also hands spacing control to you: the default gap below the strip is not applied.

  • Tab Strip Custom CSSDefaultEmpty

    Declarations set on the tab strip itself: how a rail re-points Bootstrap's own colour variables at the theme colour.

  • Gap After the Leading IconDefaultOn

    Leaves a space between a tab icon and its label. Switch it off for a strip that sets the glyph above the label and owns that spacing itself.

  • No Outer WrapperDefaultOff

    Drops the outer container so the layout row is the outermost element, and any class or id you set lands on that row.

  • Panel Area ClassesDefaultEmpty

    Class names on the area holding the panels, most often to set the space between it and the tab strip.

  • Side Rail ColumnDefaultEmpty

    Grid column for the tab strip when the tabs are vertical. Defaults to col-md-3.

  • Side Layout Row ClassesDefaultEmpty

    Replaces the row classes wrapping a vertical tab layout, so the rail can keep or drop its gutter and its border independently of the tab style.

  • Panel ColumnDefaultEmpty

    Grid column for the panels when the tabs are vertical. Defaults to col-md-9.

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

Other blocks in Interactive: Accordions, AJAX Buttons, Carousels, Cookie Consent, Countdowns, Flip Cards.

Was this page helpful?