Template:Tabs

Template documentation
Note: portions of the template sample may not be visible without values provided.
View or edit this documentation. (About template documentation)
Editors can experiment in this template's sandbox and test case pages.

Description

This template is used to create tabs to help to navigate through subpages.

Dependencies

This template uses the CSS associated to the class .article-tabs on MediaWiki:Common.css and the associated JS codes on MediaWiki:Common.js.

Note: the CSS also uses CSS variables that are unique to The Codex. If you wish to export this template on another wiki, either substitute the CSS variables with normal values or make your own.

Syntax

{{Tabs
 | colorscheme    = 
 | root           = 
 | root title     = 
 | show root      = 
 | root tooltip   = 
 | tab #          = 
 | tab # title    = 
 | tab # tooltip  = 
 | subtab #       = 
}}

Parameters

All parameters are optional.

• colorscheme= name of a color scheme to use from MediaWiki:ColorSchemes.css.
• root= full name of the root page, namespace included, default: {{NAMESPACE}}:{{BASEPAGENAME}}.
• root title= name to display in the tab for the root page link, default: the name used for root=.
• show root= if equals to no the root tab will be hidden.
• root tooltip= tooltip to display.
• tab #= name of a subpage to link with a new tab. A maximum of 20 subpage tabs are supported.
• tab # title= name to display in the tab for the subpage link, default: the name used for tab #=. If tab #= is left empty, but tab # title= is defined, then a tab without link will be displayed.
• tab # tooltip= tooltip to display.
• subtab #= A second {{Tabs}} can be nested to create second-level tabs under tab #=.

Examples

• Gomu Gomu no Mi
• Gomu Gomu no Mi/Techniques
• Gomu Gomu no Mi/Gear Second Techniques

The above example is created with the following code:

{{Tabs
 | root           = Gomu Gomu no Mi
 | root title     = 
 | tab 1          = Techniques
 | tab 1 title    = 
 | tab 2          = Gear Second Techniques
 | tab 2 title    = 
}}

• Gomu Gomu no Mi
• Gomu Gomu no Mi/Techniques
• Gomu Gomu no Mi/Gear Second Techniques

The above example is created with the following code:

{{Tabs
 | colorscheme    = GomuColors
 | root           = Gomu Gomu no Mi
 | tab 1          = Techniques
 | tab 2          = Gear Second Techniques
}}

• Fruit
• Base
• Gear 2nd

The above example is created with the following code:

{{Tabs
 | colorscheme    = GomuColors
 | root           = Gomu Gomu no Mi
 | root title     = Fruit
 | tab 1          = Techniques
 | tab 1 title    = Base
 | tab 1 tooltip  = Base techniques
 | tab 2          = Gear Second Techniques
 | tab 2 title    = Gear 2nd
 | tab 2 tooltip  = Advanced techniques
}}

• Introduction
• Nami/Gallery
• Nami/Personality and Relationships
• Nami/Abilities and Powers
• Nami/History
• Nami/Misc.

• Past and Before the Timeskip
• Nami/History/During and After the Timeskip

Using two {{Tabs}} adjacent to each other will change the style of the second one a bit. The above example is created with the following code:

{{Tabs
 | colorscheme    = StrawHatPiratesColors
 | root           = Nami
 | root title     = Introduction
 | tab 1          = Gallery
 | tab 1 title    = 
 | tab 2          = Personality and Relationships
 | tab 2 title    = 
 | tab 3          = Abilities and Powers
 | tab 3 title    = 
 | tab 4          = History
 | tab 4 title    = 
 | tab 5          = Misc.
 | tab 5 title    = 
}}
{{Tabs
 | colorscheme    = SubTabsColors
 | root           = Nami/History
 | root title     = Past and Before the Timeskip
 | tab 1          = During and After the Timeskip
 | tab 1 title    = 
}}

• Introduction
• Monkey D. Luffy/Gallery
• Monkey D. Luffy/Personality
• Monkey D. Luffy/Relationships
  • Crew
  • Monkey D. Luffy/Relationships/Family
  • Monkey D. Luffy/Relationships/Pirates
  • Monkey D. Luffy/Relationships/Emperors and Crews
  • Monkey D. Luffy/Relationships/World Government
  • Monkey D. Luffy/Relationships/Citizens
  • Monkey D. Luffy/Relationships/Misc.
• Monkey D. Luffy/Abilities and Powers
• Monkey D. Luffy/History
  • East Blue
  • Monkey D. Luffy/History/Paradise
  • Monkey D. Luffy/History/Summit War
  • Monkey D. Luffy/History/Straw Hats Return
  • Monkey D. Luffy/History/New World
  • Monkey D. Luffy/History/Whole Cake
  • Monkey D. Luffy/History/Wano
• Monkey D. Luffy/Misc.

The above example is created with the following code:

{{Tabs
 | colorscheme    = StrawHatPiratesColors
 | root           = Monkey D. Luffy
 | root title     = Introduction
 | tab 1          = Gallery
 | tab 2          = Personality
 | tab 3          = Relationships
 | subtab 3       = 
  {{Tabs
   | colorscheme    = 
   | root           = Monkey D. Luffy/Relationships
   | root title     = Crew
   | tab 1          = Family
   | tab 2          = Pirates
   | tab 3          = Emperors and Crews
   | tab 4          = World Government
   | tab 5          = Citizens
   | tab 6          = Misc.
  }}
 | tab 4          = Abilities and Powers
 | tab 5          = History
 | subtab 5       = 
  {{Tabs
   | colorscheme    = 
   | root           = Monkey D. Luffy/History
   | root title     = East Blue
   | root tooltip   = Past, East Blue Saga
   | tab 1          = Paradise
   | tab 1 title    = 
   | tab 1 tooltip  = Alabasta Saga, Sky Island Saga, Water 7 Saga
   | tab 2          = Summit War
   | tab 2 title    = 
   | tab 2 tooltip  = Thriller Bark Saga, Summit War Saga
   | tab 3          = Straw Hats Return
   | tab 3 title    = 
   | tab 3 tooltip  = During the Timeskip, Fish-Man Island Saga
   | tab 4          = New World
   | tab 4 title    = 
   | tab 4 tooltip  = Dressrosa Saga
   | tab 5          = Whole Cake
   | tab 5 title    = 
   | tab 5 tooltip  = Four Emperors Saga: Zou Arc, Whole Cake Island Arc
   | tab 6          = Wano
   | tab 6 title    = 
   | tab 6 tooltip  = Four Emperors Saga: Levely Arc, Wano Country Arc
  }}
 | tab 6          = Misc.
}}

• Main
• FUNimation/Voice Actors
• Episode List and DVD Releases
  • FUNimation/Seasons 1-3
  • FUNimation/Seasons 4-6
  • FUNimation/Seasons 7-9
  • FUNimation/Seasons 10-12
  • FUNimation/Collections
  • FUNimation/Movies And Specials
  • FUNimation/Release Dub
  • FUNimation/Release Sub

It's possible to rearrange the tabs in a second level, even if the have the same "root", by making a tab without a link and a subtab. The above example is created with the following code:

{{Tabs
 | colorscheme    = 
 | root           = FUNimation
 | root title     = Main
 | tab 1          = Voice Actors
 | tab 1 title    = 
 | tab 2          = 
 | tab 2 title    = Episode List and DVD Releases
 | subtab 2       = 
  {{Tabs
   | colorscheme    = 
   | root           = FUNimation
   | show root      = no
   | tab 1          = Seasons 1-3
   | tab 1 title    = 
   | tab 2          = Seasons 4-6
   | tab 2 title    = 
   | tab 3          = Seasons 7-9
   | tab 3 title    = 
   | tab 4          = Seasons 10-12
   | tab 4 title    = 
   | tab 5          = Collections
   | tab 5 title    = 
   | tab 6          = Movies And Specials
   | tab 6 title    = 
   | tab 7          = Release Dub
   | tab 7 title    = 
   | tab 8          = Release Sub
   | tab 8 title    = 
  }}
}}

Notes

• Use subpages only when absolutely necessary, since they break up the content and it's not a good SEO practice (regardless of the use of this template). Avoid using 2nd level subpages for the same reasons.
• Tab templates should use the "Design" template type.
• This template is displayed on mobile as a simple list of links.
• The basic functionality of making one-level tabs does not require the use of JavaScript.

See also

• Category:Specific Tab Templates.