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
Tabs macro | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||
[{"label":"What are tabs","id":"1","content":{"version":1,"type":"doc","content":[{"type":"paragraphmediaSingle","content":[{"type":"date","attrs":{"timestamplayout":"1658448000000center"}},{"typecontent":"text","text":" "}]},[{"type":"codeBlockmedia","attrs":{}},{"type":"panelexternal","attrsurl":{"panelType":"info"},"content":[https://caelor.atlassian.net/wiki/download/attachments/303366145/Screenshot%202022-08-12%20at%2017.21.16.png?version=1&modificationDate=1660549025122&cacheVersion=1&api=v2"}}]},{"type":"paragraph","content":[{"type":"textdate","textattrs":{"timestamp":"Info1658448000000"}]}]},{"type":"panel","attrs":{"panelType":"noteinfo"},"content":[{"type":"paragraph","content":[{"type":"text","text":"NOteInfo"}]}]},{"type":"paneltable","attrs":{"panelTypeisNumberColumnEnabled":false,"layout":"infodefault"},"content":[{"type":"paragraphtableRow","content":[]}]},{"type":"paneltableHeader","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[]}]},{"type":"paneltext","attrstext":{"panelType":"info"}User Story","contentmarks":[{"type":"paragraph","content":[strong"}]}]}]},{"type":"paneltableHeader","attrs":{},"content":[{"panelTypetype":"infoparagraph"},"content":[{"type":"paragraphtext","contenttext":["Requirements"}]}]},{"type":"tabletableHeader","attrs":{},"isNumberColumnEnabledcontent":false,[{"layouttype":"defaultparagraph"},"content":[{"type":"tableRowtext","contenttext":["Scope"}]}]}]},{"type":"tableHeadertableRow","attrs":{},"content":[{"type":"blockquote"tableCell","attrs":{},"content":[{"type":"paragraph","content":[]}]},{"type":"datetableCell","attrs":{},"timestampcontent":"1657670400000"}},[{"type":"textparagraph","textcontent":" "}[]}]}]},{"type":"tableHeadertableCell","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":"tableRowparagraph","content":[{"type]}]},"icon":"tableCellatlaskit/ArrowRightIcon"},{"attrslabel":{}"When we use tabs","contentid":[{""2","content":{"version":1,"type":"paragraphdoc","content":[]}]},{"type":"tableCelltable","attrs":{"isNumberColumnEnabled":false,"layout":"default"},"content":[{"type":"paragraphtableRow","content":[]}]},{"type":"tableCelltableHeader","attrs":{},"content":[{"type":"paragraph","content":[]}]}]}]},{"type":"paragraphtext","contenttext":[]}]}"Table","iconmarks":[{"atlaskit/ArrowRightIcon"},{"label":"When we use tabs","id":"2","content":{"version":1,type":"strong"}]}]}]},{"type":"tableHeader","attrs":{},"content":[{"type":"docparagraph","content":[]}]},{"type":"tabletableHeader","attrs":{},"isNumberColumnEnabledcontent":false,[{"layouttype":"defaultparagraph"},"content":[]}]}]},{"type":"tableRow","content":[{"type":"tableHeadertableCell","attrs":{},"content":[{"type":"paragraph","content":[]}]},{"type":"texttableCell","textattrs":"Table","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{},"{},"content":[{"type":"paragraph","content":[]}]},{"type":"tableHeadertableCell","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":"tableRowparagraph","content":[]},{"type":"tableCellcodeBlock","attrs":{},"content":[{"type":"paragraphtext","contenttext":[]"Code"}]},{"type":"tableCellbulletList","attrscontent":{}[{"type":"listItem","content":[{"type":"paragraph","content":[]}]},{{"type":"tableCelltext","attrs":{},"contenttext":[{"type":"paragraph","content":[]Bullets"}]}]}]},{"type":"paragraph","content":[]},{"type":"codeBlocktext","attrstext":{"sasaassasa"}]}]},"contenticon":["material-design/AccessTime"},{"typelabel":"textWhy we use tabs","textid":"Codel7qpmpzgp"}]},{"typecontent":"bulletList","content":[{"typeversion":"listItem"1,"content":[{"type":"paragraphdoc","content":[{"type":"text","text":"Bullets"}]}]}]},{"typeicon":"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
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.
Note |
---|
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)
Status colour Green title RELEASED! Tabs width
Status colour Green title RELEASED! Preview mode with configuration options
Status colour Green title 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
theme | {"label":"solarized_dark","value":"solarized_dark"} |
---|---|
contentByMode | {"html":"<div id=\"London\" class=\"tabcontent\">\n <h1>London</h1>\n <p>London is the capital city of England.</p>\n</div>\n\n<div id=\"Paris\" class=\"tabcontent\">\n <h1>Paris</h1>\n <p>Paris is the capital of France.</p>\n</div>\n\n<div id=\"Tokyo\" class=\"tabcontent\">\n <h1>Tokyo</h1>\n <p>Tokyo is the capital of Japan.</p>\n</div>\n\n<div id=\"Oslo\" class=\"tabcontent\">\n <h1>Oslo</h1>\n <p>Oslo is the capital of Norway.</p>\n</div>\n\n<button class=\"tablink\" onclick=\"openCity('London', this, 'red')\" id=\"defaultOpen\">London</button>\n<button class=\"tablink\" onclick=\"openCity('Paris', this, 'green')\">Paris</button>\n<button class=\"tablink\" onclick=\"openCity('Tokyo', this, 'blue')\">Tokyo</button>\n<button class=\"tablink\" onclick=\"openCity('Oslo', this, 'orange')\">Oslo</button>\n<br>\n<br>\n<br><br>\n<br>\n\n","javascript":"function openCity(cityName, elmnt, color) {\n // Hide all elements with class=\"tabcontent\" by default */\n var i, tabcontent, tablinks;\n tabcontent = document.getElementsByClassName(\"tabcontent\");\n for (i = 0; i < tabcontent.length; i++) {\n tabcontent[i].style.display = \"none\";\n }\n\n // Remove the background color of all tablinks/buttons\n tablinks = document.getElementsByClassName(\"tablink\");\n for (i = 0; i < tablinks.length; i++) {\n tablinks[i].style.backgroundColor = \"\";\n }\n\n // Show the specific tab content\n document.getElementById(cityName).style.display = \"block\";\n\n // Add the specific color to the button used to open the tab content\n elmnt.style.backgroundColor = color;\n}\n\n// Get the element with id=\"defaultOpen\" and click on it\ndocument.getElementById(\"defaultOpen\").click();","css":"/* Style the tab buttons */\n.tablink {\n background-color: #555;\n color: white;\n float: left;\n border: none;\n outline: none;\n cursor: pointer;\n padding: 14px 16px;\n font-size: 17px;\n width: 25%;\n}\n\n/* Change background color of buttons on hover */\n.tablink:hover {\n background-color: #777;\n}\n\n/* Set default styles for tab content */\n.tabcontent {\n color: white;\n display: none;\n padding: 50px;\n text-align: center;\n}\n\n/* Style each tab content individually */\n#London {background-color:red;}\n#Paris {background-color:green;}\n#Tokyo {background-color:blue;}\n#Oslo {background-color:orange;}"} |
Hover Tabs
theme | {"label":"solarized_dark","value":"solarized_dark"} |
---|---|
contentByMode | {"html":"<!-- Tab links -->\n<div class=\"tab\">\n <button class=\"tablinks\" onclick=\"openCity(event, 'London')\">London</button>\n <button class=\"tablinks\" onclick=\"openCity(event, 'Paris')\">Paris</button>\n <button class=\"tablinks\" onclick=\"openCity(event, 'Tokyo')\">Tokyo</button>\n</div>\n\n<!-- Tab content -->\n<div id=\"London\" class=\"tabcontent\">\n <h3>London</h3>\n <p>London is the capital city of England.</p>\n</div>\n\n<div id=\"Paris\" class=\"tabcontent\">\n <h3>Paris</h3>\n <p>Paris is the capital of France.</p>\n</div>\n\n<div id=\"Tokyo\" class=\"tabcontent\">\n <h3>Tokyo</h3>\n <p>Tokyo is the capital of Japan.</p>\n<br>\n<br>\n\n<br>\n<br>\n<br>\n<br>\n<br>\n<br>\n<br>\n","javascript":"function openCity(evt, cityName) {\n // Declare all variables\n var i, tabcontent, tablinks;\n\n // Get all elements with class=\"tabcontent\" and hide them\n tabcontent = document.getElementsByClassName(\"tabcontent\");\n for (i = 0; i < tabcontent.length; i++) {\n tabcontent[i].style.display = \"none\";\n }\n\n // Get all elements with class=\"tablinks\" and remove the class \"active\"\n tablinks = document.getElementsByClassName(\"tablinks\");\n for (i = 0; i < tablinks.length; i++) {\n tablinks[i].className = tablinks[i].className.replace(\" active\", \"\");\n }\n\n // Show the current tab, and add an \"active\" class to the button that opened the tab\n document.getElementById(cityName).style.display = \"block\";\n evt.currentTarget.className += \" active\";\n}","css":"/* Style the tab */\n.tab {\n overflow: hidden;\n border: 1px solid #ccc;\n background-color: #f1f1f1;\n}\n\n/* Style the buttons that are used to open the tab content */\n.tab button {\n background-color: inherit;\n float: left;\n border: none;\n outline: none;\n cursor: pointer;\n padding: 14px 16px;\n transition: 0.3s;\n}\n\n/* Change background color of buttons on hover */\n.tab button:hover {\n background-color: #ddd;\n}\n\n/* Create an active/current tablink class */\n.tab button.active {\n background-color: #ccc;\n}\n\n/* Style the tab content */\n.tabcontent {\n display: none;\n padding: 6px 12px;\n border: 1px solid #ccc;\n border-top: none;\n}"} |
MacroSuite News
Cp content card macro | ||
---|---|---|
|
defaultColor | #42526e |
---|---|
activeColor | #0052CC |
width | 30 |
hoverColor | #0065FF |
tabType | no-icon |
style | style-1 |
alignment | left |
bootstrap/CheckCircle"}] |
How to use
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.
Supported macros:
| ||
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)
Status colour Green title RELEASED! Tabs width
Status colour Green title RELEASED! Preview mode with configuration options
Status colour Green title 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.
Button macro | ||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Tabs with Easy HTML
Tab headers
Easy html macro | ||||
---|---|---|---|---|
| ||||
Hover Tabs
Easy html macro | ||||
---|---|---|---|---|
| ||||