UI Tab(s) macros

The UI Tabs macro helps you keep your pages compact, by dividing information into different tabs.

Example

In this example, we created one UI Tabs macro that contains three UI Tab macros.

Add the UI Tabs macro to a page

This solution consists of an outer macro which is a container for inner macros (the expendable items). First, add a UI Tabs (with an -s) macro. Inside the UI Tabs macro, place as many UI Tab (without an -s) macros as you want.

There are two ways to add a macro to a page:

Type { plus the macro’s name. Select the macro from the dropdown list.
In the Confluence editor’s top menu, click + > Other macros and search for the macro.

Settings

To change the macro’s settings, click the macro > Edit.

Setting	Description	Available since Toolkit version

Setting	Description	Available since Toolkit version
Title	The title of the expandable item.	2.0

Events

You can programatically listen for events on this macro.

They're triggered with AJS.trigger() and can be subscribed to using AJS.bind.

AJS.bind('event/name', function(){....});

Event	Description	Available since Toolkit version

Event	Description	Available since Toolkit version
`'refined/toolkit/tabs/rendered'`	Triggered after the outer tabs-macro has rendered with its containing individual tab-macros.	2.3.10

Link to a tabbed item

When navigating to a tab, the URL will be updated with a hash reference. This URL can be used to link directly to a tab located on a page. The item will be automatically highlighted and scrolled down to.