Template:Navigation tab/doc
This template displays a navigation tab, which is functionally the same as any other link, but is styled to look like a file folder tab. Generally, you would use this template by setting up another template that calls this one repeatedly—once each for a series of related articles, and then call that template at the top of each of the articles it references.
See Style guide (EIA) for an example of these tabs in action. {{Style guide (EIA) tabs}} has an entry for each chapter of the EIA style guide plus one more for a consolidated page containing all the chapters. Each chapter calls this template on the top, and the tab for the active chapter is highlighted in green while the other tabs are yellow.
Usage
What you type
{{navtab | Template:Navigation tab | Navtab template}}
{{navtab | Style guide (EIA), introduction | Introduction}}
{{navtab | Style guide (EIA), editorial voice | Editorial voice}}
{{navtab | Style guide (EIA), policy-neutral | Policy-neutral writing}}
{{clearleft}}
What you get
Notes
- Note the formatting difference for the Navtab template link that points back to the current page
- If there are too many tabs to fit on one line, they will wrap to multiple lines as necessary.
- At the end of the tab listing, add
{{clearleft}}to make subsequent text start below the tabs, rather than wrapping around them.
Parameters
| Parameter | Notes | Default |
|---|---|---|
|link= or 1st unnamed parameter |
Enter the name of the Saintapedia article you want to link to. Do not add brackets around the name of the article, unless you are using the |manual-link=y parameter, described below. |
None. This parameter is required. |
|text= or 2nd unnamed parameter |
Enter the text to be shown in the tab. | The article name from |link= will be used if |text= is not specified.
|
|image= |
Allows you to specify an image to appear after the |text= entry. The image will be scaled to 30px—the image size should probably be changed to a settable parameter defaulting to 30px or some other size. |
No default |
|manual-link=y |
Setting the manual-link parameter will stop the template from adding brackets around the link, so you will have to add the brackets yourself. Primarily, this is intended for external links that need only a single set of brackets rather than a double set, and so otherwise wouldn't display properly with this template. The |text= parameter is ignored when this parameter is set, so you need to specify the entire link in the |link= parameter, including brackets and display text. You can set |manual-link= to anything and it will have the same effect, but setting it to something like y, Y, yes, or Yes is recommended for clarity. |
No default |
|height= |
Sets a minimum tab height. Should generally be paired with the |image= parameter unless all tabs have images. Set the height a little larger than the image size to allow for padding, say 40px, so that the tab heights match from tab to tab. Note that if the screen width is not wide enough to fit all the tab text on a single line, line wrapping may make some of the tabs taller than others even with the tab height set. |
No default |
|width= |
Sets the tab width. Use this if you want all tabs to be the same width. If the window size is too small to fit a single tab at the requested width, though, it will be squeezed smaller. The width parameter give unusual results when set to percentage values—setting to a width in pixels is recommended. See #Tabs that span the window width, below, for an example of equal width tabs that span the width of the window without using percentages. | No default |
|color= |
Enter a color code or name to be used as the background color for tabs linking to any page other than the page the tab is displayed on. Colors may be specified with a color name (red), a 6-digit hex code with two-digit hex codes for red, green, and blue (#2E8B57), or a 3-digit hex code where each digit gets repeated to make a standard 6-digit code (so #cbe is equivalent to #ccbbee). Available color names and codes are available at many locations on the web; one good option is web colors .
|
#f9f9e0
|
|highlight= |
Enter a color name or code to be used as the background color for the active tab (the tab where the link is to the page it is used on) | The value from |color=, if specified, or #ddffdd if not.
|
|border-color= |
Enter a color name or code to be used as the border color for tabs other than the active tab. | #ddb
|
|border-highlight= |
Enter a color name or code to be used as the border color for the active tab. | The value from |border-color=, if specified, or #cec if not.
|
|border-style= |
The line style for the border. Options are solid, dotted, dashed, double, groove, ridge, inset, outset, none, and hidden. |
solid
|
|border-width= |
The width of the border. | 1px
|
|border-radius= |
The rounding of the upper left and right corners of the tab. Set to 0px for rectangular tabs. |
12px
|
|padding= |
Controls the spacing between the tab text and edges. Setting a single padding value will apply to all 4 sides. Setting two values will apply the first value to the top and bottom and the second to the left and right. Setting three values will apply the first to the top, the second to the left and right, and the third to the bottom. Setting four values will set the top, right, bottom, and left padding, respectively. | 2px
|
Tabs that span the window width
The |width= parameter doesn't give the expected results when used with percentages. So you cannot have, for example, 4 equal-width tabs that span the width of the window simply by setting |width=25%. As an alternative, put the tabs in a table that is set to a 100% width, and set the |width= parameter to a larger value than should ever be needed. Here is an example.
What you type
{| width=100%
|- valign=bottom
| {{navtab | Template:Navigation tab | Navtab template | color=#9A7 | highlight=#E5E1D0 | width=1000px | height=40px}}
| {{navtab | Help:Finding information | Finding information | image=File:Magnifying glass.png | color=#9A7 | highlight=#E5E1D0 | width=1000px | height=40px}}
| {{navtab | Help:Editing Saintapedia | How to edit the wiki | image=File:Gedit icon.png | color=#9A7 | highlight=#E5E1D0 | width=1000px | height=40px}}
| {{navtab | Training (Saintapedia) | Training | image=File:Nuvola apps edu miscellaneous (up arrow).svg.png | color=#9A7 | highlight=#E5E1D0 | width=1000px | height=40px}}
|}
What you get
|
|
|
|
|
.svg.png){kind=link}
Alternate coding approach
Rather than repeating the formatting parameters every time {{navtab}} is called, another approach would be to set up a separate template containing the format parameters and calling that. This would give a more readable result, and would also allow you to make style changes for multiple tabs all at once.
So, for the example above, you would setup a template called template:navtab homepage style (or whatever name you preferred) with the following code:
{{navtab | {{{1}}} | {{{2}}} | image={{{image|}}} | color=#9A7 | highlight=#E5E1D0 | width=1000px | height=40px}}
Then you could call that template in place of {{navtab}}, and to get the example above, you'd only need the following:
{| width=100%
|- valign=bottom
| {{navtab homepage style | Template:Navigation tab | Navtab template}}
| {{navtab homepage style | Help:Finding information | Finding information | image=File:Magnifying glass.png }}
| {{navtab homepage style | Help:Editing Saintapedia | How to edit the wiki | image=File:Gedit icon.png }}
| {{navtab homepage style | Training (Saintapedia) | Training | image=File:Nuvola apps edu miscellaneous (up arrow).svg.png }}
|}
What you get
|
|
|
|
|
See also
{{navigation tab/diseases}}—an alternate color scheme for the tabs{{navigation tab/sideways}}—formatting if you want the tabs on the left side of the screen rather than the top{{navigation tab/diseases/sideways}}—a combination of the two above variants