Skip to main content

Tabs

Tabs is a page component consisting of clickable headings (tabs) that control the visibility of sections of content. Clicking on a tab heading will show the content associated with that heading.

You can have multiple tabs on a page, but keep in mind the width of the page and the available space when creating additional tabs—if the tab headings do not fit in the available space, they will drop below the first row of tabs, which is not visually pleasing. If you must have more tabs, consider using accordions instead, or splitting the content into multiple pages. Tabbed content preview screenshot



How to

Create tabbed content

  1. Create a new page or edit an existing page.
  2. If you're using the Standard page template: in the Content type section of the page editor, select the Tabbed content option.

    Standard page template
    Tabbed content option

    If you're using the Global page template: in the current Section, select the Tabs option from the Component dropdown.

    Global page template
    Tabs component

    The tab editor will appear.

  3. Enter the first tab heading in the Tab title field and the content for that tab in the Tab content WYSIWYG editor (or content editor) - pronounced WIZ-ee-wig; an acronym for 'what you see is what you get'. A type of content editor similar to a word processor that allows you to format and preview page content..
    Tab title and content
  4. To create another tab, click the green + icon in the Tab section label. Another tab section will appear after the current tab section. Continue adding tabs as required. Adding Tabs Screenshot
  5. You can reorder tabs by clicking on the arrows on each Tab section label. Delete a tab by clicking on the red x icon on each Tab section label.

Tip: expand and collapse individual tab editors as you are working in the page editor to minimize the visual clutter on the screen.

Search the CMS User Guide