The UI Tabs macro helps you keep your pages compact, by dividing information into different Create easy-to-browse tabs. The look of the macro may differ depending on your Confluence editor’s version. The macro setup works the same.
Example
| Rw ui tabs macro | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
This is a first example paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Risus at ultrices mi tempus imperdiet nulla. Tortor consequat id porta nibh. Donec ultrices tincidunt arcu non. Enim nunc faucibus a pellentesque sit amet porttitor eget dolor. Sem fringilla ut morbi tincidunt augue interdum velit. Sit amet aliquam id diam. Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque elit. In pellentesque massa placerat duis ultricies lacus sed. Arcu bibendum at varius vel pharetra vel turpis nunc.
This is a second example paragraph. Natoque penatibus et magnis dis parturient. Nec ultrices dui sapien eget mi proin. Diam quam nulla porttitor massa id neque aliquam. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat. Vitae sapien pellentesque habitant morbi tristique. Elementum nibh tellus molestie nunc non. Fringilla est ullamcorper eget nulla facilisi etiam dignissim. Nulla facilisi nullam vehicula ipsum a arcu cursus vitae congue. Blandit cursus risus at ultrices mi tempus imperdiet. Arcu non sodales neque sodales ut etiam sit amet. Dui vivamus arcu felis bibendum ut. Et tortor consequat id porta. Cursus euismod quis viverra nibh. Libero enim sed faucibus turpis in eu mi. Integer vitae justo eget magna fermentum iaculis eu. Quis enim lobortis scelerisque fermentum dui faucibus in. Sit amet porttitor eget dolor morbi non. Etiam non quam lacus suspendisse faucibus interdum posuere lorem ipsum.
This is a third example paragraph. Vulputate dignissim suspendisse in est ante in nibh. Gravida cum sociis natoque penatibus et magnis. Aliquet enim tortor at auctor urna nunc id cursus. Sit amet risus nullam eget felis. Vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. A pellentesque sit amet porttitor eget dolor morbi. Ultricies tristique nulla aliquet enim tortor at auctor. Porttitor leo a diam sollicitudin tempor. Etiam tempor orci eu lobortis elementum nibh tellus molestie. Eu volutpat odio facilisis mauris sit amet. Sem integer vitae justo eget. Aliquet risus feugiat in ante metus. A erat nam at lectus urna duis convallis convallis tellus. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Lobortis elementum nibh tellus molestie nunc non blandit massa. |
Add UI Tabs macros to a page
This solution consists of an outer macro which is a container for inner macros (the individual tabs). In the example above, we created one UI Tabs macro that contains three UI Tab macros.
In the Confluence editor’s top menu, click + > View more or Other macros.
Find and select the UI Tabs (with an -s) macro.
Inside the UI Tabs macro, place as many UI Tab (without an -s) macros as you want. Click Insert > View more or Other Macros and select the UI Tab macro. Add content below each UI Tab bar.
| Info |
|---|
In general, we don’t support adding third party macros within the UI Tab(s) macros. As we continually work on improving our apps, please let us know your suggestions for added third party macro support if this is critical to you. |
Edit the macro
...
|
Add tabs to a page
Hit the
/key or click the + in the editor toolbar.Find and select the Refined Tab Container macro.
Place a Refined tab macros inside the container, and add content under it. Repeat this step to create multiple tabs.
In general, we don’t support third party macros inside tab Containers. One exception is the EazyBI macro: see which settings are needed to achieve this.
Edit the macro
Click the macro > the pencil icon to change the macro’s title.
Limitations
Due to Atlassian limitations, smart links within tabs are shown as the full URL on the published page. We suggest adding links to text instead.