Tabs are UI elements that allow multiple contents to be contained 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.

Example

[{"label":"What are tabs","id":"1","content":{"version":1,"type":"doc","content":[{"type":"paragraph","content":[{"type":"date","attrs":{"timestamp":"1658448000000"}},{"type":"text","text":" "}]},{"type":"codeBlock","attrs":{}},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"type":"text","text":"Info"}]}]},{"type":"panel","attrs":{"panelType":"note"},"content":[{"type":"paragraph","content":[{"type":"text","text":"NOte"}]}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[]}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[]}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[]}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[]}]},{"type":"table","attrs":{"isNumberColumnEnabled":false,"layout":"default"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{},"content":[{"type":"blockquote","content":[{"type":"paragraph","content":[{"type":"date","attrs":{"timestamp":"1657670400000"}},{"type":"text","text":" "}]}]}]},{"type":"tableHeader","attrs":{},"content":[{"type":"paragraph","content":[]}]},{"type":"tableHeader","attrs":{},"content":[{"type":"paragraph","content":[]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{},"content":[{"type":"paragraph","content":[]}]},{"type":"tableCell","attrs":{},"content":[{"type":"paragraph","content":[]}]},{"type":"tableCell","attrs":{},"content":[{"type":"paragraph","content":[]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{},"content":[{"type":"paragraph","content":[]}]},{"type":"tableCell","attrs":{},"content":[{"type":"paragraph","content":[]}]},{"type":"tableCell","attrs":{},"content":[{"type":"paragraph","content":[]}]}]}]},{"type":"paragraph","content":[]}]},"icon":"atlaskit/ArrowRightIcon"},{"label":"When we use tabs","id":"2","content":{"version":1,"type":"doc","content":[{"type":"table","attrs":{"isNumberColumnEnabled":false,"layout":"default"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{},"content":[{"type":"paragraph","content":[{"type":"text","text":"Table","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{},"content":[{"type":"paragraph","content":[]}]},{"type":"tableHeader","attrs":{},"content":[{"type":"paragraph","content":[]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{},"content":[{"type":"paragraph","content":[]}]},{"type":"tableCell","attrs":{},"content":[{"type":"paragraph","content":[]}]},{"type":"tableCell","attrs":{},"content":[{"type":"paragraph","content":[]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{},"content":[{"type":"paragraph","content":[]}]},{"type":"tableCell","attrs":{},"content":[{"type":"paragraph","content":[]}]},{"type":"tableCell","attrs":{},"content":[{"type":"paragraph","content":[]}]}]}]},{"type":"paragraph","content":[]},{"type":"codeBlock","attrs":{},"content":[{"type":"text","text":"Code"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Bullets"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"sasaassasa"}]}]},"icon":"material-design/AccessTime"},{"label":"Why we use tabs","id":"l7qpmpzgp","content":{"version":1,"type":"doc","content":[{"type":"blockquote","content":[{"type":"paragraph","content":[{"type":"text","text":"Quote"}]}]},{"type":"paragraph","content":[]},{"type":"paragraph","content":[{"type":"date","attrs":{"timestamp":"1656028800000"}},{"type":"text","text":" "}]},{"type":"paragraph","content":[]},{"type":"paragraph","content":[{"type":"text","text":"sasasasasasa"}]}]},"icon":"bootstrap/CheckCircle"},{"label":"Tab 4 - Page Loaded","id":"1d3gfm0jh","content":{"type":"doc","content":[{"type":"layoutSection","marks":[{"type":"breakout","attrs":{"mode":"full-width"}}],"content":[{"type":"layoutColumn","attrs":{"width":66.66},"content":[{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Shared with your team. Learn about ","type":"text"},{"text":"space permissions","type":"text","marks":[{"type":"link","attrs":{"href":"https://confluence.atlassian.com/confcloud/assign-space-permissions-724764762.html"}}]},{"text":" and ","type":"text"},{"text":"restrictions","type":"text","marks":[{"type":"link","attrs":{"href":"https://confluence.atlassian.com/confcloud/add-or-remove-page-restrictions-724764891.html"}}]},{"text":". ","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"emoji","attrs":{"id":"1f44b","text":"đź‘‹","shortName":":wave:"}},{"text":" Greetings!","type":"text"}]},{"type":"paragraph","content":[{"text":"Think of your personal space as a folder of storing all the documents that don't currently belong anywhere else. It's all yours. ","type":"text"},{"text":"Customize","type":"text","marks":[{"type":"strong"}]},{"text":" this page by clicking the edit button ","type":"text"},{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"inline-external-image","parameters":{"src":"https://confluence.atlassian.com/images/icons/edit_pencil.png","width":"","height":""}}},{"text":" on top.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"What's inside this space?","type":"text"}]},{"type":"paragraph","content":[{"text":"Sample Pages","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/~62ded5934913d0b73488d71a/pages/631603381/Sample+Pages"}}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Meeting notes","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/~62ded5934913d0b73488d71a/pages/631603380/Meeting+notes"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Decision","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/~62ded5934913d0b73488d71a/pages/631603389/Decision"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Product requirements","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/~62ded5934913d0b73488d71a/pages/631603396/Product+requirements"}}]}]}]}]}]},{"type":"layoutColumn","attrs":{"width":33.33},"content":[{"type":"paragraph"},{"type":"paragraph","content":[{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"livesearch","parameters":{"macroParams":{"spaceKey":{"value":"@self"},"_parentId":{"value":"631603382"},"placeholder":{"value":"Search in this space"}},"macroMetadata":{"macroId":{"value":"b31ebe7d-404f-4e88-9bdd-65ccd143cf18"},"schemaVersion":{"value":"1"},"placeholder":[{"type":"icon","data":{"url":"https://caelor.atlassian.net/wiki/download/resources/confluence.extra.livesearch/images/search.png"}}],"title":"Livesearch"}}}}]},{"type":"paragraph"},{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"recently-updated","parameters":{"macroParams":{"_parentId":{"value":"631603382"},"theme":{"value":"sidebar"}},"macroMetadata":{"macroId":{"value":"52a90acf-8307-4563-bc2b-79e5448ef44d"},"schemaVersion":{"value":"1"},"title":"Recently Updated"}}}}]}]}],"version":1},"pageId":"631603382"}]

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)

  • Tabs width

  • Preview mode with configuration options

  • 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
MacroSuite News
[{"label":"Tab 1","id":"1","content":{"type":"doc","content":[{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"Click ","type":"text"},{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"inline-external-image","parameters":{"src":"https://confluence.atlassian.com/images/icons/edit_pencil.png","width":"","height":""}}},{"text":" to edit this page. To delete, open the ","type":"text"},{"text":"···","type":"text","marks":[{"type":"strong"}]},{"text":" menu and select ","type":"text"},{"text":"Delete","type":"text","marks":[{"type":"strong"}]},{"text":".","type":"text"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"emoji","attrs":{"id":"atlassian-blue_star","text":":blue_star:","shortName":":blue_star:"}},{"text":" Date","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":2},"content":[{"type":"emoji","attrs":{"id":"atlassian-blue_star","text":":blue_star:","shortName":":blue_star:"}},{"text":" Participants","type":"text"}]},{"type":"paragraph","content":[{"text":"List meeting participants using their @ mention names","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph"}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"@ mention a person to add them as an attendee and they will be notified.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"emoji","attrs":{"id":"atlassian-blue_star","text":":blue_star:","shortName":":blue_star:"}},{"text":" Goals","type":"text"}]},{"type":"paragraph","content":[{"text":"List goals for this meeting (e.g., Set design priorities for FY19)","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"emoji","attrs":{"id":"atlassian-blue_star","text":":blue_star:","shortName":":blue_star:"}},{"text":" Discussion topics","type":"text"}]},{"type":"table","attrs":{"layout":"default"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"background":"#deebff","rowspan":1,"colwidth":[120]},"content":[{"type":"paragraph","content":[{"text":"Time","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"background":"#deebff","rowspan":1,"colwidth":[120]},"content":[{"type":"paragraph","content":[{"text":"Item","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"background":"#deebff","rowspan":1,"colwidth":[127]},"content":[{"type":"paragraph","content":[{"text":"Presenter","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"background":"#deebff","rowspan":1,"colwidth":[392]},"content":[{"type":"paragraph","content":[{"text":"Notes","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[120]},"content":[{"type":"paragraph"}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[120]},"content":[{"type":"paragraph"}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[127]},"content":[{"type":"paragraph"}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[392]},"content":[{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Add notes for each discussion topic","type":"text"}]}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[120]},"content":[{"type":"paragraph","content":[{"type":"hardBreak"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[120]},"content":[{"type":"paragraph","content":[{"type":"hardBreak"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[127]},"content":[{"type":"paragraph","content":[{"type":"hardBreak"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[392]},"content":[{"type":"paragraph","content":[{"type":"hardBreak"}]}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"emoji","attrs":{"id":"atlassian-blue_star","text":":blue_star:","shortName":":blue_star:"}},{"text":" Action items","type":"text"}]},{"type":"paragraph","content":[{"text":"Add action items to close the loop on open questions or discussion topics:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":" ","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"emoji","attrs":{"id":"atlassian-blue_star","text":":blue_star:","shortName":":blue_star:"}},{"text":" Decisions","type":"text"}]},{"type":"paragraph","content":[{"text":"Type /decision to record the decisions you make in this meeting:","type":"text"}]},{"type":"decisionList","attrs":{"localId":"c12e20ae-3629-4cc4-98e7-7e01fd45d565"},"content":[{"type":"decisionItem","attrs":{"state":"DECIDED","localId":"fea5946d-12c1-4174-9ef8-d3e222b33608"}}]}],"version":1},"icon":"","loadOrImport":"load","pageId":"631603380"},{"label":"Tab 2","id":"2","content":{"content":[{"type":"paragraph","content":[]}],"type":"doc","version":1},"icon":""}]