Tabs

Tabs are UI elements that allow multiple contents within a single window. Tabs are used as a navigation for switching between sets of content. With tabs, it is possible to keep a large amount of data in a much smaller area than you usually need.

MacroSuite - Tabs

Example


How to use

To add the Tabs macro to a Confluence page: 

  • Choose “+” in the Confluence editor

  • Search “tabs” and select the MacroSuite - Tabs.

Alternatively, type '/' on the Confluence page to see a list of suggestions and type 'Tabs.' Intuitive configuration dialogue helps users to create and customize tabs fast and easily.

 

Tabs alignment

Select tabs alignment. By default, tabs are left aligned.

Tabs styles

Choose from three different tabs styles.

Create tabs

Use dropdown to create tabs. To change the icon and text, use inline editing option.

Icon

Click on icon and choose from more than 5000 icons available and attract even more attention. To change the icon position or remove label, use the “Icon” dropdown in the macro configuration.

Editor

Most of the native Confluence macros are available within the tabs editor.

Due to Atlassian limitations, it is not possible to insert and show third party macros within tabs.

Supported macros:

  • Text formatting

  • Content alignment

  • Bullets and numbering

  • Links

  • Images

  • Code snippet

  • Info panel

  • Date

  • Quote

  • Status

  • Table

Import Confluence pages

Use the option to add and edit whole Confluence pages within the tabs macro.


Roadmap

The Tabs macro will receive updates to improve performance and user experience. We will introduce the following features soon:

  • Colour and font configuration (active, inactive, and hover) RELEASED!

  • Tabs width RELEASED!

  • Preview mode with configuration options RELEASED!

  • Add and manage action points and decisions in tabs

If you have any questions, need more detailed information, or want to share feature suggestions, please feel free to contact us via our service desk.

 


Tabs with Easy HTML

Tab headers

Hover Tabs