Websites

Resource Guide

Tabs Custom Block

Tabs is a custom block component that allows for tabbed content that can be displayed either vertically or horizontally. Tabs serve as a way of grouping content together, presenting it in easily digestible pieces. These tabs load content during initial page load and not after a tab has been clicked and therefore should not present issues with SEO. 

The image below is an example of three tabs presented horizontally.

horizontal tabs screenshot
Horizontal Tabs example
 

Things to note:

  • Tabs can be displayed vertically or horizontally.
  • Tabs are identifiable by the tab title and therefore must be unique. Tabs should not have the same name.
  • There isn't a limit for the number of tabs but do keep in mind that tabs will begin to wrap (and they are stacked in mobile). It is recommended to keep the number minimal (5 at most). 
  • You can select one tab to be open by default and it doesn't have to be the first tab listed.

To create Tabs

Editors and Site builders are able to create tab custom blocks. It is an option in the Custom Block Library. Once a Tab block has been created, it will be added to the custom block library. They can also be created in Layout as inline blocks as non reusable content (which means these will not be found in the custom block library!). 

Creating Tabs

Custom Block Library Method

If you create a Tab block using this method, it will be considered reusable content and can be placed on multiple pages if necessary. 

  1. From the admin toolbar panel, navigate to Structure ->Block Layout -> Custom Block Library
  2. Click on the +Add custom block button.
  3. From the list of available blocks, click on Tabs.
  4. Give the Tabs custom block a unique block description
  5. Optionally add in an "Introduction". This will allow you to add in content above the listed tabs.
  6. Under "Tabs Info", select whether you want this Tabs block to display vertically. If the check box is left unmarked, the tabs will display horizontally. 
  7. Tab Items will display all tab content. The "Tab Title" will be the title for the tab. Keep these as brief as possible. Tab body content will display once the tab is clicked. 
  8. Notice the "Open by Default" option, this is optionally but if selected, please only select one to be open by default. 
  9. To add more tabs, click "Add Tab". 
  10. To remove a tab, click "Remove" next to the tab you want removed. 
  11. Tabs can be reordered by clicking and holding down the arrow cross hair.
  12. By default, the block is in draft and will not display to those viewing the site, only to authenticated (logged in) users. Once you are ready for the updates to publish, change the state to "Published". 
  13. When done, click "Save". 

Add Tabs to a Basic Page

  1. Open a Basic Page previously created by clicking on the content's title that you want to display the basic block. 
  2. In the Layout tab, click on +Add block where you want the tabs block to be placed. In the right panel, filter for or search for your block under the Custom label. 
  3. Find the block description of the tab block created and click on the block. 
  4. In configurations, optionally display the title when placed on the page. You can also update the text of the displayed title.
  5. Click Add Block.
  6. Make sure you "Save" your page in the Layout tab, this will take you back to View mode. 

The tab block has now been added to the selected region of your page. This block can be placed on multiple pages. Follow the instructions above for each page. Additionally, site builders can use block placement to add a tab block to multiple nodes at once.