Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

What are step by step instructions for creating tabs in confluence

I'm new to confluence and want to create a page with multiple tabs.  I tried using the AUI Tab Group, AUI Pages Tab with no luck

1 answer

1 accepted

Adding a Tab Macro

You can use the Tabs macro in any Confluence page or blog.

To insert Tabs into your page, follow the steps below:

  1. Start in edit mode of the page or blog you'd like to add the tabs to
  2. Click on the "+" at the top of the page
  3. Find "Tabs Control" from the drop down list or click "Other macros"
  4. Search for Tabs Control in the search bar
  5. Insert the Tabs Control macro. The Tabs Control macro adds the space where the tabs will appear. the 
  6. Repeat the same steps inserting Tabs Panel into the Tabs Control. Each Tabs Panel macro adds an individual tab that contains content.
  7. Enter the content underneath each Tabs Panel. This content will appear within the tab when the page is published.
  8. Save your page and the tabs will appear

 

Add a Tab or Accordion Menu

  1. To add a tab or accordion menu using the Classic Editor, position your cursor in the location you would like to add the menu and select the tab/ accordion menu button from the toolbar.

    To add a tab or accordion menu using Zuse Create, make sure you understand creating pages using Zuse Create. Insert a new module on your page and select tab or accordion menu.
  2. In the dialogue that pops up, select the Tab or Accordion radio button to specify which type of menu you'd like to use. If you are using an Accordion menu, using the check boxes you can also choose whether to include "open/close all" buttons and if you would like to use the simple toggle style (with the triangular expandable bullets).
  3. Next, you can add items (the tabs or accordions). There are two types of items, simple and pages. Simple items are text with options similar to what you get in the Classic Editor. Page items are pages, which can be created using the Classic Editor or Zuse Create, so they can contain any of the features a page can contain (including multiple columns, images and module features).
  4. To make a simple item, click the Add new item button, and populate the text. Select the Done Editing button when you have completed editing that item.
  5. To add a page item, you must have already built the page you want to use. Once you have built the page you want to serve as your tab, publish it. (For ease of organization, make the page that will become a tab a child of the page the tab menu appears on.) In the Tab/ Accordion Menu editor, choose the Add page item button. Choose the site of the page you want to display, and then select the page. Select the Done Editing button to collapse the item.
  6. You can edit or remove an item by selecting either of the options on the menu.
  7. When using the Classic Editor, once you save your menu, Shortcode will be added to your editor to specify the accordions/tabs. It should start with [tabs] or [accordion] and end with [ / tabs] or [ / accordion]. To avoid corrupting the shortcode, don't edit the text that was inserted by the button.

Using Anchors with Tabs or Accordions

Occasionally, you may want to link to a specific tab or accordion on your page. (For example, this link goes directly to the Staff tab of the Office Snapshot. Normally, the first tab would be open instead of the staff tab.) You can do this by using anchors.

  1. Set up the anchor on the tab.
    1. Open the Tab / Accordion Menu module to edit.
    2. Edit the item you want to link directly to.
    3. Choose the show extras link. 
    4.  Add a word with no spaces as the Anchor.

    5. Save the module.
  2. To link directly to the tab, add a /#anchor to the URL of the page with the tabs. For example, https://www.wisconsin.edu/offices/office-for-academic-and-student-affairs/ is the office snapshot and by adding #staff to the end, https://www.wisconsin.edu/offices/office-for-academic-and-student-affairs/#staff, I link directly to the staff tab.

Suggest an answer

Log in or Sign up to answer
TAGS
Community showcase
Published in Confluence

Confluence Mythbusters: Does Atlassian even use Confluence?

Hi, Confluence collaborators! As part of #Confluence-Collaboratory month, we’ve created a very special Mythsbusters segment, where we're dive into an interesting myth and uncover the truth behind i...

1,509 views 7 29
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you