Tabs

1. Add tabs macro to a page

1. Edit the page and type /tabs, then choose Responsive Tabs. You can also find it in the macro browser (+ › Apps).
2. Type inside the macro box. Start each tab with a heading. The heading becomes the tab’s name; everything below it, up to the next heading, becomes that tab’s content.
3. Publish the page.

For example, this content inside the macro:

gives three tabs: Overview, Installation and FAQ.

A tab can hold anything a Confluence page can: text, tables, images, panels, task lists, code blocks, status lozenges, Jira issues and other macros.

While you edit, you see the content, not the tabs. Confluence shows the macro’s content so you can change it. The tabs appear when you publish or preview the page.

2. Which headings become tabs

By default, the largest heading you used starts each tab:

• Write Heading 1s, and each Heading 1 is a tab.
• Write only Heading 2s, and each Heading 2 is a tab.

Smaller headings stay ordinary content, so you can use subheadings inside a tab.

To choose the level yourself, for example to keep a Heading 1 as a title above Heading 2 tabs, open the configuration and set New tab at to a heading level.

3. Content above the first heading

Anything before the first heading isn’t part of a tab. It appears above the tabs, which makes it a good place for a short introduction.

1. Configure the tabs

Select the macro while editing and click the Edit (pencil) icon. The configuration opens with a live preview at the top, so you see each change before saving.

1.1. Colours

1.2. Layout

Open first remembers the tab’s position, so renaming that tab doesn’t change it. If you remove tabs so the position no longer exists, the first tab opens.

2. Add icons to tabs

Each tab can have an icon. There are 701 icons to choose from.

2.1. With the icon picker

1. Open the configuration.
2. Under Tab icons, find the tab and click Choose (or Change).
3. Type in the search box, for example rocket or calendar, and click an icon.
4. Click Save.

The picker remembers icons by tab name. Reordering tabs keeps their icons; renaming a tab removes its icon, and the panel tells you so you can pick again.

2.2. By typing it in the heading

Put the icon’s name in curly braces at the start of the heading:

Heading: {home} Overview
Heading: {calendar} Schedule
Heading: {file-pdf} Reports

The {…} part is removed from the tab name. An icon typed in a heading takes priority over one chosen in the picker. If the name isn’t recognised, the tab simply has no icon.

Icon names: most icons use their Font Awesome 4.5 names, such as rocket, paper-plane, database, car or shopping-cart. The icon set of the Data Center app is included unchanged (home, calendar, file-pdf, success, warning…). A few Font Awesome icons whose name was already used by a Data Center icon start with fa-: fa-search, fa-star, fa-user, fa-calendar, fa-flag, fa-link. The quickest way to find a name is the picker’s search box.

1 – Overview

Add macro to build a responsive and custom tabs. You need to set macro parameters and add some Tabs element.

2 – Insert macro

To insert the Tabs Group macro to a page:

1. In the Confluence editor, choose Insert > Other Macros.

2. Find and select the required macro.

Speeding up macro entry with autocomplete: Type { and the beginning of the macro name, to see a list of suggested macros. Details are in Using Autocomplete.
To edit an existing macro: Click the macro placeholder and choose Edit. A macro dialog window will open, where you can edit the parameters of the macro.

3 – Parameters

The full list of parameters is shown in the following table.

4 – Examples

1 – Overview

This macro can only be used with Tabs Group macro.

2 – Insert macro

To insert the Tabs Element macro to a page:

1. In the Confluence editor, choose Insert > Other Macros.

2. Find and select the required macro.

Speeding up macro entry with autocomplete: Type { and the beginning of the macro name, to see a list of suggested macros. Details are in Using Autocomplete.
To edit an existing macro: Click the macro placeholder and choose Edit. A macro dialog window will open, where you can edit the parameters of the macro.

3 – Parameters

The full list of parameters is shown in the following table.

A use case

We want to change the color of the item “blue” listed in the navigation color.

Solution

Add the following CSS and change “@blue” by your desired hex color:

Case

We want to add a new color.

Solution

In two steps:

1. Add a class name in the CSS class macro parameter like mycustomclass
2. Add the following CSS: