Template:Sidebar: Difference between revisions
Template:Infobox>Primefac TFD closed as keep (XFDcloser) |
m 1 revision imported |
||
(No difference)
| |||
Latest revision as of 21:23, 1 October 2026
 | This template is used on approximately 321,000 pages. To avoid major disruption and server load, any changes should be tested in the template's /sandbox or /testcases subpages, or in your own user subpage. The tested changes can be added to this page in a single edit. Consider discussing changes on the talk page before implementing them. |
 | This template does not display in the mobile view of Wikipedia; it is desktop only. See Template:Navbox visibility for a brief explanation. |
 | This template uses Lua: |
This template is a metatemplate for the creation of sidebar templates, i.e. boxes that are vertically aligned navigation templates. Sidebars, like infoboxes, are usually positioned on the right-hand side of a page.
{{Sidebar with collapsible lists}} is a version of {{Sidebar}} that adds collapsibility to its sections, i.e. the means to show or hide sections by clicking links beside their headings.
Templates using the classes class=navbox ({{navbox}}) or class=nomobile ({{sidebar}}) are not displayed in article space on the mobile web site of English Wikipedia. Mobile page views accounted for 60% to 70% of all page views from 2020 through 2025. Briefly, these templates are not included in articles because 1) they are not well designed for mobile, and 2) they significantly increase page sizes—bad for mobile downloads—in a way that is not useful for the mobile use case. You can review/watch phab:T124168 for further discussion.
Note that WP:LEADSIDEBAR discourages the placement of sidebars in the lead section of articles, though they may be included on a case-by-case basis.
Usage
| {{{topimage}}} |
| {{{pretitle}}} |
| {{{title}}} |
|---|
| {{{image}}} |
| {{{above}}} |
| {{{heading1}}} |
| {{{content1}}} |
| {{{heading2}}} |
| {{{content2}}} |
| {{{heading3}}} |
| {{{content3}}} |
| …… etc …… |
| {{{below}}} |
<syntaxhighlight lang="wikitext"> Lua error in Module:Navbar at line 58: Invalid title {{subst:PAGENAME}}. </syntaxhighlight>
Parameters
No parameters are mandatory. If {{navbar}} links are to function correctly (unless their appearance is suppressed; see the navbar parameter below), the parameter name needs to be set (to the name of the sidebar's page). (This does not apply if the Lua module that produces {{Sidebar}}, Module:Sidebar, is being used directly.)
| Parameter | Explanation |
|---|---|
<syntaxhighlight lang="wikitext" inline style="display: none;" />|above=
|
Same as the <syntaxhighlight lang="wikitext" inline style="display: none;" />|above= offered by {{Navbox}}.
|
<syntaxhighlight lang="wikitext" inline style="display: none;" />|name=
|
The sidebar's name, i.e. the name following "Template:" in the title shown at the top of the sidebar's page. Required if the V T E {{navbar}} links at the bottom of the sidebar are to function correctly, unless their appearance is suppressed (see the navbar parameter below) or {{Sidebar}} is not being used as a wrapper for Module:Sidebar. When {{Sidebar}} is used as a wrapper, setting <syntaxhighlight lang="wikitext" inline style="display: none;" /> |name={{subst:PAGENAME}} is recommended.
|
<syntaxhighlight lang="wikitext" inline style="display: none;" />|float=
|
Accepts the values none and left. The former aligns the box left without floating and the latter with floating behavior. The default float is right and does not need specifying. Prefer this parameter (and passing it to any using templates such as with {{Helpbox}}) to specifying your own floats in TemplateStyles.
|
<syntaxhighlight lang="wikitext" inline style="display: none;" />|outertitle=
|
Use to place a title for the sidebar immediately above the sidebar. |
<syntaxhighlight lang="wikitext" inline style="display: none;" />|topimage=
|
Use to place an image at the top of the sidebar, i.e. above <syntaxhighlight lang="wikitext" inline style="display: none;" />|title= (if used). Full wiki syntax is expected (i.e. [[File:...]]). To add a caption below the image, use <syntaxhighlight lang="wikitext" inline style="display: none;" /> |topcaption=. Per WP:SIDEBAR this field should only be used to define a generic image for a sidebar, not to provide custom images for individual articles: sidebars are not displayed on mobile. |
<syntaxhighlight lang="wikitext" inline style="display: none;" />|pretitle=
|
Use to place a line such as "Part of the X series on" before the title. |
<syntaxhighlight lang="wikitext" inline style="display: none;" />|title=
|
Use to place a title for the sidebar at the top of the sidebar. (If <syntaxhighlight lang="wikitext" inline style="display: none;" />|topimage= is used, it will appear immediately below it).
|
<syntaxhighlight lang="wikitext" inline style="display: none;" />|image=
|
Use to place an image between the <syntaxhighlight lang="wikitext" inline style="display: none;" />|title= (if used) and first section. As with <syntaxhighlight lang="wikitext" inline style="display: none;" />|topimage=, full wiki syntax is expected (i.e. [[File:...]]). To add a caption below the image, use <syntaxhighlight lang="wikitext" inline style="display: none;" /> |caption=. To add alternative text per WP:ALT use [[File:...|alt=...]]
|
<syntaxhighlight lang="wikitext" inline style="display: none;" />|headingn=<syntaxhighlight lang="wikitext" inline style="display: none;" /> |contentn=
|
The nth heading / content. contentn is required if headingn is also to appear. |
<syntaxhighlight lang="wikitext" inline style="display: none;" />|templatestyles=
|
See #TemplateStyles. |
|
Classes can be used to make styles easier to target for TemplateStyles. <syntaxhighlight lang="wikitext" inline style="display: none;" /> <syntaxhighlight lang="wikitext" inline style="display: none;" /> These classes can also be used for microformats. Dot before a class-name can be omitted: <syntaxhighlight lang="wikitext" inline style="display: none;" /> |
<syntaxhighlight lang="wikitext" inline style="display: none;" />|below=
|
Same as the <syntaxhighlight lang="wikitext" inline style="display: none;" />|below= offered by {{Navbox}}.(Use, for example, to add one or more portal links to the bottom of the template (shown, by default, in bold).) |
<syntaxhighlight lang="wikitext" inline style="display: none;" />|navbar=
|
When <syntaxhighlight lang="wikitext" inline style="display: none;" />|name= is specified, {{navbar}} is shown at the bottom of the sidebar. Setting <syntaxhighlight lang="wikitext" inline style="display: none;" />|navbar=off or <syntaxhighlight lang="wikitext" inline style="display: none;" />|navbar=none will suppress the links showing.
|
TemplateStyles
The TemplateStyles parameters <syntaxhighlight lang="wikitext" inline style="display: none;" />|templatestyles=, <syntaxhighlight lang="wikitext" inline style="display: none;" />|child templatestyles=, and <syntaxhighlight lang="wikitext" inline style="display: none;" />|grandchild templatestyles= take the pagename of a TemplateStyles page and turn it into a TemplateStyles tag. The TemplateStyles tag is a much more powerful way to add styling to a sidebar.
Some rules of use:
- Always add a template-specific class in <syntaxhighlight lang="wikitext" inline style="display: none;" />
|class=so that the styles added to one sidebar will not "leak" into another sidebar. For example, Template:DYK tools has <syntaxhighlight lang="wikitext" inline style="display: none;" />|class=dyk-toolsand the Template:DYK tools/styles.css page targets.dyk-toolsfor all of its added styling. - Do not assume Template:Sidebar will continue to have a table structure (i.e., do not target
tableor any other table HTML in the TemplateStyles page). The table structure is soft-deprecated and will go away at some point in the future.
These tags are loaded in this order: Core templatestyles (Module:Sidebar/styles.css), templatestyles, child, and then grandchild, which can be used to 'cascade' the styles.
- <syntaxhighlight lang="wikitext" inline style="display
- none;" />
|templatestyles= - This parameter is intended for a template or module calling {{sidebar}} directly.
- <syntaxhighlight lang="wikitext" inline style="display
- none;" />
|child templatestyles= - This parameter is intended for a template or module which calls a sidebar with <syntaxhighlight lang="wikitext" inline style="display: none;" />
|templatestyles=. - <syntaxhighlight lang="wikitext" inline style="display
- none;" />
|grandchild templatestyles= - This parameter is intended for a template or module which calls a sidebar with <syntaxhighlight lang="wikitext" inline style="display: none;" />
|child templatestyles=.
The canonical list of classes output with each kind of element of a sidebar (i.e. output for all <syntaxhighlight lang="wikitext" inline style="display: none;" />|contentn=, or all cases of <syntaxhighlight lang="wikitext" inline style="display: none;" />|above=) can be found in Module:Sidebar/configuration in the "class" table. The below is a non-authoritative but otherwise sufficient list for most generic styling:
.sidebar- The top-level sidebar class.
.sidebar-outer-title- The class associated with a <syntaxhighlight lang="wikitext" inline style="display: none;" />
|outertitle=. .sidebar-top-image- The class associated with a <syntaxhighlight lang="wikitext" inline style="display: none;" />
|topimage=. .sidebar-top-caption- The class associated with a <syntaxhighlight lang="wikitext" inline style="display: none;" />
|topcaption=. .sidebar-pretitle.sidebar-pretitle-with-top-image- The classes associated with a <syntaxhighlight lang="wikitext" inline style="display: none;" />
|pretitle=. Only one of these will be output per sidebar, depending on whether <syntaxhighlight lang="wikitext" inline style="display: none;" />|topimage=is present. .sidebar-title.sidebar-title-with-pretitle- The classes associated with a <syntaxhighlight lang="wikitext" inline style="display: none;" />
|title=. Only one of these will be output per sidebar, depending on whether <syntaxhighlight lang="wikitext" inline style="display: none;" />|pretitle=is present. .sidebar-image- The class associated with a <syntaxhighlight lang="wikitext" inline style="display: none;" />
|image=. .sidebar-caption- The class associated with a <syntaxhighlight lang="wikitext" inline style="display: none;" />
|caption=. .sidebar-above- The class associated with a <syntaxhighlight lang="wikitext" inline style="display: none;" />
|above=. .sidebar-heading- The class associated with a <syntaxhighlight lang="wikitext" inline style="display: none;" />
|headingn=. Every heading will have this class. .sidebar-content.sidebar-content-with-subgroup- The classes associated with <syntaxhighlight lang="wikitext" inline style="display: none;" />
|contentn=. Every content group will have one of these classes, depending on whether the specific content has a subgroup. .sidebar-below- The class associated with a <syntaxhighlight lang="wikitext" inline style="display: none;" />
|below=. .sidebar-navbar- The class associated with a <syntaxhighlight lang="wikitext" inline style="display: none;" />
|navbar=.
Example TemplateStyles parameter use
For an example of a sidebar which does not need to support children templates of its own (whether because it has no children or because it wants no children):
<syntaxhighlight lang="wikitext">
Page Template:Sidebar/example/styles.css has no content.| Child Example |
|---|
</syntaxhighlight>
For an example of a sidebar which does have its own children and an example of one of the children (grandchild templates have a similar use):
<syntaxhighlight lang="wikitext">
Page Template:Sidebar/example/styles.css has no content.| Title Child Example |
|---|
</syntaxhighlight> <syntaxhighlight lang="wikitext"> Template:Sidebar/child example </syntaxhighlight>
Handling long links
{{Normalwraplink}} may be used to handle individual links that should wrap within the sidebar or otherwise need to be made to wrap, in order to prevent the sidebar from becoming too wide. Use {{normalwraplink|longlinkname}}, where <syntaxhighlight lang="wikitext" inline style="display: none;" />|longlinkname is the long link without its square brackets.
Use the <syntaxhighlight lang="wikitext" inline style="display: none;" />|wraplinks=true parameter to enable link wrapping (disabling <syntaxhighlight lang="css" class="tpl-codett" style="border:none; padding: 0px 0px; color:var(--color-base, #202122); background:transparent; " inline="1">nowraplinks</syntaxhighlight> CSS class) for the whole template.
Nesting
One sidebar template can be nested (embedded) into another one by using the <syntaxhighlight lang="wikitext" inline style="display: none;" />|child= parameter. This feature can be used to create a modular sidebar, or to create more well-defined and logical sections.
| Top-level title | ||
|---|---|---|
First subsection
|
||
Second subsection
|
||
| "below" text |
<syntaxhighlight lang="wikitext">
| Top-level title | ||
|---|---|---|
First subsection
|
||
Second subsection
|
||
| "below" text |
</syntaxhighlight>
Note in the examples above that the child sidebar is placed in a <syntaxhighlight lang="text" class="" style="" inline="1">content</syntaxhighlight> field, not a <syntaxhighlight lang="text" class="" style="" inline="1">heading</syntaxhighlight> field. Notice also that the section subheadings do not appear in bold if this is not explicitly specified. To obtain bold section headings, move the titles to the <syntaxhighlight lang="text" class="" style="" inline="1">heading</syntaxhighlight> field, using
| Top-level title | ||
|---|---|---|
| First subsection | ||
|
||
| Second subsection | ||
|
||
| "below" text |
<syntaxhighlight lang="wikitext">
| Top-level title | ||
|---|---|---|
| First subsection | ||
|
||
| Second subsection | ||
|
||
| "below" text |
</syntaxhighlight>
Deprecated parameters
The following parameters are deprecated in favor of TemplateStyles and templates/modules using them are categorized into Category:Sidebars with styles needing conversion. The category page has further conversion information.
A specific real conversion example is Template:DYK tools where the styles were moved to Template:DYK tools/styles.css.
| Parameter | Explanation | TemplateStyles replacement class |
|---|---|---|
<syntaxhighlight lang="wikitext" inline style="display: none;" />|style= or <syntaxhighlight lang="wikitext" inline style="display: none;" />|bodystyle=
|
Additional CSS for the whole sidebar. | Class assigned to the template in <syntaxhighlight lang="wikitext" inline style="display: none;" />|class=
|
<syntaxhighlight lang="wikitext" inline style="display: none;" />|width=
|
Width for the whole sidebar. | <syntaxhighlight lang="css" class="" style="" inline="1">width</syntaxhighlight> attribute in the class assigned to the template in <syntaxhighlight lang="wikitext" inline style="display: none;" />|class=
|
<syntaxhighlight lang="wikitext" inline style="display: none;" />|basestyle=
|
Additional CSS for a grabbag of parameters: <syntaxhighlight lang="wikitext" inline style="display: none;" />|pretitle=, <syntaxhighlight lang="wikitext" inline style="display: none;" />|title=, <syntaxhighlight lang="wikitext" inline style="display: none;" />|headingn=, and <syntaxhighlight lang="wikitext" inline style="display: none;" />|listtitlen= (for {{sidebar with collapsible lists}}).
|
See related parameters for targeting pretitle, title, all headings, and all lists. Applies before the specific style parameter so must be placed above that parameter's declarations if any in the TemplateStyles sheet. |
<syntaxhighlight lang="wikitext" inline style="display: none;" />|outertitlestyle=
|
Additional CSS for <syntaxhighlight lang="wikitext" inline style="display: none;" />|outertitle=.
|
<syntaxhighlight lang="css" class="" style="" inline="1">.sidebar-outer-title</syntaxhighlight> |
<syntaxhighlight lang="wikitext" inline style="display: none;" />|topimagestyle=
|
Additional CSS for <syntaxhighlight lang="wikitext" inline style="display: none;" />|topimage=.
|
<syntaxhighlight lang="css" class="" style="" inline="1">.sidebar-top-image</syntaxhighlight> |
<syntaxhighlight lang="wikitext" inline style="display: none;" />|topcaptionstyle=
|
Additional CSS for <syntaxhighlight lang="wikitext" inline style="display: none;" />|topcaption=.
|
<syntaxhighlight lang="css" class="" style="" inline="1">.sidebar-topcaption</syntaxhighlight> |
<syntaxhighlight lang="wikitext" inline style="display: none;" />|pretitlestyle=
|
Additional CSS for <syntaxhighlight lang="wikitext" inline style="display: none;" />|pretitle=.
|
<syntaxhighlight lang="css" class="" style="" inline="1">.sidebar-pretitle</syntaxhighlight> or <syntaxhighlight lang="css" class="" style="" inline="1">.sidebar-pretitle-with-top-image</syntaxhighlight> |
<syntaxhighlight lang="wikitext" inline style="display: none;" />|titlestyle=
|
Additional CSS for <syntaxhighlight lang="wikitext" inline style="display: none;" />|title=.
|
<syntaxhighlight lang="css" class="" style="" inline="1">.sidebar-title</syntaxhighlight> or <syntaxhighlight lang="css" class="" style="" inline="1">.sidebar-title-with-pretitle</syntaxhighlight> |
<syntaxhighlight lang="wikitext" inline style="display: none;" />|imagestyle=
|
Additional CSS for <syntaxhighlight lang="wikitext" inline style="display: none;" />|image=.
|
<syntaxhighlight lang="css" class="" style="" inline="1">.sidebar-image</syntaxhighlight> |
<syntaxhighlight lang="wikitext" inline style="display: none;" />|captionstyle=
|
Additional CSS for <syntaxhighlight lang="wikitext" inline style="display: none;" />|caption=.
|
<syntaxhighlight lang="css" class="" style="" inline="1">.sidebar-caption</syntaxhighlight> |
<syntaxhighlight lang="wikitext" inline style="display: none;" />|abovestyle=
|
Additional CSS for <syntaxhighlight lang="wikitext" inline style="display: none;" />|above=.
|
<syntaxhighlight lang="css" class="" style="" inline="1">.sidebar-above</syntaxhighlight> |
<syntaxhighlight lang="wikitext" inline style="display: none;" />|headingstyle=
|
Additional CSS for section headings. | <syntaxhighlight lang="css" class="" style="" inline="1">.sidebar-heading</syntaxhighlight> |
<syntaxhighlight lang="wikitext" inline style="display: none;" />|headingnstyle=
|
Additional CSS for <syntaxhighlight lang="wikitext" inline style="display: none;" />|headingn=.
|
Class assigned to the heading in <syntaxhighlight lang="wikitext" inline style="display: none;" />|headingnclass=
|
<syntaxhighlight lang="wikitext" inline style="display: none;" />|contentstyle=
|
Additional CSS for all section content. | <syntaxhighlight lang="css" class="" style="" inline="1">.sidebar-content</syntaxhighlight> and/or <syntaxhighlight lang="css" class="" style="" inline="1">.sidebar-content-with-subgroup</syntaxhighlight> |
<syntaxhighlight lang="wikitext" inline style="display: none;" />|contentnstyle=
|
Additional CSS for <syntaxhighlight lang="wikitext" inline style="display: none;" />|contentn=.
|
Class assigned to the content in <syntaxhighlight lang="wikitext" inline style="display: none;" />|contentnclass=
|
<syntaxhighlight lang="wikitext" inline style="display: none;" />|belowstyle=
|
Additional CSS for <syntaxhighlight lang="wikitext" inline style="display: none;" />|below=.
|
<syntaxhighlight lang="css" class="" style="" inline="1">.sidebar-below</syntaxhighlight> |
<syntaxhighlight lang="wikitext" inline style="display: none;" />|navbarstyle=
|
Additional CSS for the generated navbar. | <syntaxhighlight lang="css" class="" style="" inline="1">.sidebar-navbar</syntaxhighlight> |
<syntaxhighlight lang="wikitext" inline style="display: none;" />|navbarfontstyle=
|
Additional CSS passed to the navbar module to target the VTE (colors usually). | <syntaxhighlight lang="css" class="" style="" inline="1">.sidebar-navbar li, .sidebar-navbar a</syntaxhighlight> |
Tracking category
- Category:Pages using sidebar with the child parameter (1)
- Category:Sidebars with styles needing conversion (1)
See also
- Last pre-Lua version
- {{Sidebar with collapsible lists}}
- {{Infobox}}
- {{Side box}}
- Wikipedia:UBLIST, for help using unbulleted lists within content.
No description.
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| title | title | no description | Unknown | suggested |
| float | float | no description | Unknown | optional |
| class | class | no description | Unknown | optional |
| child templatestyles | child templatestyles | no description | Unknown | optional |
| topimage | topimage | no description | Unknown | suggested |
| image | image | no description | File | suggested |
| caption | caption | no description | Unknown | optional |
| above | above | no description | Unknown | optional |
| heading1 | heading1 | no description | Unknown | suggested |
| content1 | content1 | no description | Unknown | suggested |
| heading2 | heading2 | no description | Unknown | suggested |
| content2 | content2 | no description | Unknown | suggested |
| heading3 | heading3 | no description | Unknown | optional |
| content3 | content3 | no description | Unknown | optional |