Add tabs to a page

The Tabs macro helps you organize information into separate sections, keeping pages clean and easy to navigate. For example, you can use tabs to separate different parts of a project, such as project details, team updates, and task lists. You can also create tabs for different reader groups, such as beginners, intermediate users, and advanced users, each with its own content.

Ingredients

Guide

1. From the macro browser or using the keyboard shortcut (/ for the new editor or { for the legacy editor), select Composition - Tabs.

   Open

   

2. Add tabs with titles.

   Open

   

   1. To add a tab, click the Plus () icon next to the last tab.

   2. To title a tab, click it and enter a title in the Give this tab a title field.

   3. To customize the look and feel of the tabs, click the Expand arrow () on the left.

3. In the Tabs customization panel on the left, configure your design preferences for the tabs.

   Open

   

   1. From the Tab position menu, specify the position of the tabs on the page.

      • Top: Positions the tabs at the top of the page.

      • Side: Positions the tabs on the left side of the page.

   2. From the Tab style menu, choose the visual theme for your tabs.

      • Default: Displays the tab titles in colored text. The title of the active tab is underlined and displayed in a darker shade.

      • Blocks: Displays the tab titles in colored boxes. The title box of the active tab is displayed in a darker shade.

      • Top highlight: Displays the tab titles in colored text. The title of the active tab is overlined and displayed in a darker shade.

   3. Under Tab font size, adjust the size of the tab titles - Small, Medium, or Large.

   4. Under Tabs color, customize the colors for active and inactive tabs.
      The first line shows the dark shades for the active tabs, and the second line shows the light shades for the inactive tabs.

   5. When you’re ready, click the Collapse arrow () to close the Tabs customization panel.

4. Click each tab and add its content.

   Open

   

   1. The tab editor toolbar is similar to the standard Confluence toolbar.

   2. You can use most of the Confluence macros. For details, see Tabs | Supported features.

   3. If you want to add a table with more than 16 columns, the editor may not display all the columns when resizing the page. To avoid this problem, enable the Full page editor option to resize the columns efficiently after publication.

   4. When you’re ready, click Insert.

5. Publish the page with the tabs.

Interactive demo

You can try it yourself by clicking through the demo below.