The Adaptavist Group LogoDocumentation

Using Tabs on a Legacy Page

Warning:

Due to a limitation of the Atlassian legacy editor, the more recent updates to the tabs macro don't work with the legacy editor. The experience of creating tabs is different when using the legacy editor. If you are not working on a page you migrated from DC you should consult the Tabs documentation instead.

The Tabs macro allows you to add tabs to provide interactive, categorized, or isolated information to the page. A Tabs macro is added for each tab that you want to display.

Note: You can add more than one group of tabs to a Confluence page.

Create a new set of tabs

  1. Navigate to the page you want to edit.
  2. Click the Edit icon.
  3. Click Insert → View More in the Confluence editor.
  4. Select the Tabs macro in the Select Macro screen. (Alternatively, use / and begin to type tab to access the macro via the quick insert menu.)
  5. Give your tab a name.
  6. Optional: Select an icon to appear at the beginning of your tab. You can choose an icon from four different libraries:
    • Atlassian
    • Emojis
    • Font Awesome
    • Material Design
  7. Select the text alignment. This affects how text inside the tab is shown. By default this is set to left align.
  8. Ensure that the Is this the first tab? toggle is turned on.
    Note:

    The first tab on the page

    For the first tab on the page, this will already be turned on. However, for any subsequent tabs, you will need to turn it on to start a new group of tabs.

  9. Optional: You can add styling to all the tabs that will follow from this first tab.
  10. Select Save.
  11. Add another tab macro for each tab you want to see on the page.

Add a second tab

  1. Navigate to the page you want to edit.
  2. Click the Edit icon.
  3. Click Insert → View More in the Confluence editor.
  4. Select the Tabs macro in the Select Macro screen. (Alternatively, use / and begin to type tab to access the macro via the quick insert menu.)
  5. Give your tab a name.
  6. Optional: Select an icon to appear at the beginning of your tab. You can choose an icon from four different libraries
    • Atlassian
    • Emojis
    • Font Awesome
    • Material Design
  7. Optional: Select the text alignment. This affects how text inside the tab is shown. By default, this is set to left-align.
  8. Ensure that the Is this the first tab? toggle is turned on.
  9. Select Save.

Style your tabs

Any styling options that you choose for the first tab will automatically be applied to the rest of the tabs in that group. There are currently three main ways you can change the appearance of your tabs.

Change the header style

There are three possible header style options.

  • Basic

  • Filled

  • Rounded

Change the accent color

You can change the color used in the header to suit your preferences and you can also choose to add a border in the same color.

Changing the color palette gives you different color options.

Put a border around your content

You can add a border to your tabs. This can be a good way to let your readers know when they've reached the end of a long tab.

Just select Add border from the toggle. The color of the border will be the same as the accent color.

Make tab headings sticky

If your tabs contain a lot of content, you might want the tab headings to stay visible as you scroll. You can turn this on in the first tab in the group by selecting the checkbox at the bottom of the editor.

Change the tab direction

There are two options for the tab direction. To switch between the two options, select Tab group direction.

Horizontal arrangement

Vertical arrangement

Search documentation

Start typing to search the docs.