Content Formatting Macros for Confluence Server and DC

Tabs

Tabs is a pair of macros allowing you to add AUI-styled Tabs which provide interactive and categorised information to the page.

Usage

  1. Go to the form you wish to edit.

  2. Click Edit.

  3. Click Insert More Content, and select Other Macros.

  4. Select the Tabs Container macro from the provided list.

    tabs 01
  5. Complete the desired fields.

    Parameter Description Type Default Required

    Tab Direction

    Defines whether the tabs appear either:

    • Horizontal (across the top of the tabs container)

    • Vertically (down the left of the container)

    string

    none

    check

    ID

    Specifies a CSS ID to be added

    string

    none

    error

    CSS Class

    Specifies a CSS Class to be added

    string

    none

    error

    Title

    Text to display in a tool tip

    string

    none

    error
  6. The macro will then appear on the page.

    tabs 02
  7. Place the Tabs Page macro inside the Tabs Container macro.

  8. Click Insert More Content, and select Other Macros.

  9. Select the Tabs Page macro.

  10. Complete the desired fields.

    Parameter Description Type Default Required

    Title

    The title being attached to this tab

    string

    none

    check

    ID

    Specifies a CSS ID to be added

    string

    none

    error

    CSS Class

    Specifies a CSS Class to be added

    string

    none

    error

    Lazy loading

    Allows the lazy loading of tabbed content. It gets triggered when the tab is activated

    boolean

    false

    error

    Lazy Loading limitations:

    • Inline comments in tabbed content do not work with Lazy Loading enabled.

    • Lazy Loading does not work with the Jira Macro.

    • Lazy Loading does not work with MS Word Macro.

  11. The macro will then appear on the page.

    tabs 03
  12. Continue adding Tabs Page macros to the Tabs Container macro for each tab required. When saved, an AUI-styled Horizontal Navigation bar will appear on the page.

    Anchor to tab:

    Please define individual ID’s for tabs. Once the Tab macro is inserted, the ID should be defined, which will act as an anchor tag. There’s no need to insert the Anchor macro explicitly to the body content of the Tab page macro.

    On the page being linked to the Tabs page, please click Insert > Link > Advanced > Paste the full link of the page containing TABS followed by "#" and the ID of the tab to be linked.

Style Reference

Horizontal Tabs

tabs 04

Vertical Tabs

tabs 05