Tab Strip
A tab strip whose panels are ordinary blocks elsewhere on the page. It is shown in the block inserter as Canvas Tab Strip and registered as canvas-core/tab-nav.
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
TabsDefaultEmpty
The buttons in the strip, in the order they appear. Each one names the panel it opens.
Each row of Tabs takes:
LabelDefault
TabInline markup is allowed, so a label can be a glyph plus a caption span.
Panel IDDefaultEmpty
The HTML Anchor of the panel this tab opens.
Tab IDDefaultEmpty
A name of your own for this button, which its panel points back at so assistive technology can pair the two.
IconDefaultEmpty
Glyph shown before the label on this tab.
ImageDefaultEmpty
Shown before the label: the shape a category rail uses.
Image URLDefaultEmpty
Used only when no picture is chosen above.
Image DescriptionDefaultEmpty
Alternative text for the picture. Left empty, a chosen picture uses the description stored with it in the Media Library.
Image SizeDefaultThumbnail
Which stored size the picture is served at. The thumbnail is square-cropped, so a wide product shot or wordmark needs a larger one.
ChoicesThumbnailMediumLargeFull Size
Image Width (px)DefaultEmpty
How wide the picture is drawn. Setting both sizes keeps the strip from jumping while the picture loads.
Image Height (px)DefaultEmpty
How tall the picture is drawn.
Image ClassesDefaultEmpty
Class names on the picture, most often to round it off.
Image When OpenDefaultEmpty
A second picture shown in place of the first while this tab is the open one, for a strip whose icons change colour when selected. Both pictures are drawn and the design's stylesheet hides whichever does not apply.
Image Wrapper ClassesDefaultEmpty
Class names on a box drawn around this tab's picture or picture pair, which is what a design keys its swap rule off.
Label ClassesDefaultEmpty
Class names on a span drawn around the label text, for a tab that stacks its wording under its picture.
Open by DefaultDefaultOff
Start with this tab selected when the page loads. Set it on one tab only.
Extra Tab ClassesDefaultEmpty
Class names on this tab's own control, for a layout the rest of the strip does not need.
Extra Item ClassesDefaultEmpty
Class names on the list item around this tab, most often for spacing.
Tab StyleDefaultDefault
The look of the tab strip. Choose Unstyled when you are supplying the whole appearance through the class fields below.
ChoicesDefaultBorderedAltAlt Top & BottomAlt Bottom BorderPillsPlain (.nav only)Unstyled (no base class)
DirectionDefaultHorizontal
Whether the tabs run across the page or stack into a side rail. Vertical Bordered adds a rule between the rail and the panels.
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 strip 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.
Bootstrap ToggleDefaultPill
The Canvas tab styles all use the pill toggle; tab is Bootstrap's plain one.
ChoicesPillTab
Style
Strip ClassesDefaultEmpty
Class names added to the tab strip, most often to set the space between it and the panels.
Tab Control ClassesDefaultEmpty
Replaces nav-link on every control, for a rail styled as a list group.
Layout
Strip ElementDefaultList (default)
A strip whose controls are not list items uses a plain container.
ChoicesList (default)Plain containerNavigation landmark
Wrap Each Tab in a List ItemDefaultOn
Off places the controls directly in the strip, with no .nav-item wrapper.
Tab Control ElementDefaultButton (default)
Whether each tab is drawn as a button or as a link. A link points at its panel by address, which is what a design styled as a menu expects.
ChoicesButton (default)Link
ARIA OrientationDefaultEmpty
Tells assistive technology which way the strip runs, so a side rail is announced and keyed as a column. Set it to match the Direction above.
ChoicesUnset (empty)VerticalHorizontal
ARIA on Each TabDefaultOn
Announce each control as a tab, name the panel it opens and say whether it is the selected one. Leave it on unless your own markup already does this.
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 Interactive: Accordions, AJAX Buttons, Carousels, Cookie Consent, Countdowns, Flip Cards.