Some things may look a little different on your site
We are currently transitioning from an old set of blocks to these new ones. Please note that the following documentation is for the new blocks. While some things may look similar, there will be likely be some notable differences, so please use caution when referring to these documents and feel free to reach out if you have any questions.
Introduction
The tabs block gives you a layout with buttons at the top and content underneath. It is useful for organizing content by keeping it separate while keeping it all on the same page.
The Tabs Block provides an efficient way to organize content on your WordPress pages by allowing you to display information in distinct sections, each accessible via a clickable button at the top. This is particularly useful for consolidating related information, such as details about a major, enabling you to present a large amount of content clearly and compactly on a single page without overwhelming the user.
Tabs are great when you have a small number of sections of content that you’re trying to fit on one page. Since all of the headings are displayed clearly at the top, users can jump right to the section they are looking for.
While tabs can be great for organizing content, they’re not always the best tool. Avoid using tabs when:
- Users need to compare content across sections simultaneously: Tabs hide content not currently selected, making it difficult for users to compare information from different sections side-by-side without constant clicking back and forth. If comparison is crucial, a single, scrollable page might be more effective.
- The content in each tab is very short or minimal: If a tab only contains one or two sentences, the overhead of clicking a tab button might outweigh the benefit of organization. In such cases, simply presenting the content directly on the page might be more efficient.
- You have too many tabs: While the block is flexible, an excessive number of tabs can become overwhelming, cluttered, and difficult to navigate, especially on smaller screens. It can also make it challenging to create clear and concise tab labels.
- The content has a linear or sequential flow: If the information is meant to be consumed in a specific order (like a step-by-step tutorial or a story), tabs can disrupt this natural flow. A continuous scrolling layout is usually better for sequential content.
- Tabs are nested within other tabs: Creating “tabs within tabs” can quickly lead to confusion and a poor user experience, making it hard for users to understand where they are in the content hierarchy.
Tab Group
The tab group is a container block for the tabs. If you want to add a tabs section to your page or post, you’ll add this element, then add as many tab items inside as needed. You can choose between blue and UW red for the accent color.
Tab Item
Each section of content will go into a tab item. Tab item content is revealed when the user clicks on the heading. The first tab item will always be displayed on page load.
Heading
The heading for your tab content that will display in a menu bar on the top of the tab group. The user will click on your heading to show the relevant content. It is recommended that tab headings are kept short or they may not appear in the menu as intended. If a heading is too long, it will wrap to the next line.
Content
You can put text, headings, images, and more inside of the tab item. You should not put another tab item or an accordion layout inside of a tab panel.
Custom Anchor
Allows you to enter a custom, unique identifier so you can externally link to this tab on your page. For example, you might put “custom-anchor” in this field. Then, you’ll be able to use it as a link at yoursite.wisc.edu/page-with-tabs#custom-anchor. If you don’t use a custom anchor, one will be automatically generated for you based on the heading.
It is critical that all of your custom anchors are unique (the automatically generated ones will be) or your tab layout may misbehave or experience accessibility issues.
Advanced
Linking to Tabs on Your Page
After creating and publishing a tab layout, you’ll notice that when you click on a tab, the url in the address bar changes. You’ll see #tab-name appended. If you copy and paste this link, you’ll be able to share it with others or use it on your site. When they load the page, the tab you had selected will be identified, toggled, and automatically scroll into view.
If you are going to be using this behavior, consider using custom anchors. While the automatically generated ones will work in the short-term, they may break if the tab title changes or another tab is created with the same title on the page.