Skip to main content
Skip table of contents

Tab Design Customization

As of autumn 2021, it is possible to create your own tab designs in Navitabs Cloud.

This page will explain how to create and use custom tab designs in the various Navitabs macros.

Since this is a new app feature, an administrator needs to carry out a manual update of the Navitabs app. Only then will the new feature be available to the users.

Create and manage tab designs

Use the Tab Design menu to manage existing tab designs and create new ones.

Tab Design menu for Navitabs

Accessing the Tab Design settings

There are two ways to access the Tab Design:

  • As an admin: Access the Navitabs settings via the app menu Confluence Settings .

  • Within any Navitabs macro, select the option “Create a new tab design” (group restrictions might prevent this option from appearing).

Setting a default tab design (admin only)

An administrator can define which design is the default, preselected tab design when a macro is used on a page for the first time. Without any changes, the design “Confluence Tabs” is used as the default.

The tab design on the top will always be the default design

Dragging any other tab design to the top of the list will set that design as the default. This has the following consequences:

  • Existing Navitabs macros with the previous default design will be updated to the new design.

  • Existing Navitabs macros with a specified design will keep their design even if the default changes.

  • The new default design will always be preselected in the macros and marked as “Default”.

More administrator options

The administrator can

  • hide the Navitabs standard designs (Confluence Tabs & Navitabs Default) so they are not listed as available designs in the macros. This is done by clicking on the eye icon on the right side.

  • delete custom designs using the trash ico.

  • rearrange the order of the tab designs with drag&drop.

Customizing a tab design

This can be done in three ways:

  • Select the button “Create new tab design” and create a design from scratch

  • Select the edit option of an existing design.

  • Copy an existing design and edit it.

An administrator can decide to restrict these actions to members of specified user groups (see next section).

  1. Give your design a name (optional).

  2. Choose a template (Confluence tabs vs. Navitabs Default).

  3. Edit the design using the different options (divider, font color, etc.). You will always see a preview of the design both for horizontal and vertical tabs.

  4. Save your new tab design.

The new tab design will now be available for all users.

Manage permission for tab design

By default, all Confluence users can access the menu "Tab Design", modify existing tabs designs or create new designs.

Alternatively, an administrator can specify Confluence groups whose members can access the menu “Tab Design”, modify existing tabs design or create new designs. This is done in the “Access Permissions” menu below the “Tab Design” menu. Changes are saved automatically and effective immediately.

Access Permission for tab designs

Use tab designs in Navitabs macros

In the Tab Wizard macro

(info) This macro replaces the legacy macros Labeltabs, Childtabs and Tabs.

  1. Edit the Tab Wizard macro.

  2. Under “Tab Design”, use the drop-down menu to see a list of all available tab designs.

  3. Choose another tab design from the list. Check the preview.

  4. Select “Save” in the macro overlay.

  5. (Re-)Publish your page. The tabs will be changed to the new design.

Alternatively, if none of the tab designs in the list is suitable, you can create a new tab design.

In the Tab Group macro

  1. Edit the Tab Group macro.

  2. Under “Tab Design”, use the drop-down menu to see a list of all available tab designs.

  3. Choose another tab design from the list. Check the preview.

  4. Select “Save” in the macro overlay.

  5. (Re-)Publish your page. The tabs within the Tab Group macro will be changed to the new design.

Alternatively, if none of the tab designs in the list is suitable, you can create a new tab design.

In the Tabs macro editor

:note: This macro has been replaced by the option Tab Wizard | Create-your-own-tabs, which also includes the option to style the tabs. Existing Tabs macros can still be edited and the tab layout can be changed. When creating new tab navigations, use the Tab Wizard.

  1. Edit the Tabs macro. The macro editor opens as a new interface.

  2. On the line with the tabs, select the blue icon with the brush.

  3. Under “Tab Design”, select “Switch to other tab design”.

  4. Choose another tab design. Check the preview.

  5. Select “Save” in the Tabs macro editor.

  6. (Re-)Publish your page. The tabs will be changed to the new design.

Tab Design menu in Tabs editor

Alternatively, if none of the tab designs in the list is suitable, you can create a new tab design.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.