Template:Navbox
| This template is used on approximately 3,070,000 pages, or roughly 5% of all 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. |
The {{Navbox}} template provides the framework for creating standard Wikipedia navigational templates quickly and easily, with little more than one or more lists of wikilinks. It comes equipped with default styles that are appropriate for the vast majority of use cases, and while they can be customized, doing so is not recommended. Using this template, or one of its "Navbox suite" sister templates (links at right), is highly recommended for standardization of form and function as well as convenience.
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.
Usage
Please remove the parameters that are left blank.
{{Navbox
| name = {{subst:PAGENAME}}{{subst:Void|Do not change anything on this line.}}
| state = {{{state|}}}
| listclass = hlist
| title =
| above =
| group1 =
| list1 =
| group2 =
| list2 =
| group3 =
| list3 =
| group4 =
| list4 =
<!-- Additional numbered group…/list… parameters -->
| image =
| imageleft =
| below =
}}<noinclude>
{{Navbox documentation}}
<!-- Place any category links for the template here -->
</noinclude>
Parameters
Commonly used
The navbox uses lowercase parameter names, as shown in the box above. The required |name= and |title= parameters will create a one-line box if no other parameters are defined. Note that the |above=, |below= and |groupN= (etc.) parameters are optional.
The basic and most common parameters are as follows (see the § Parameter descriptions section below for the full list):
|name=– the navbox template page name (Wikipedia location).
|title=– contents of the title bar, such as[[Widget stuff]].
|listclass=– custom CSS classes (space-delimited if more than one) for all|listN=cells, usually assigned the valuehlistto enable the horizontal formatting of lists; alternatively, use|bodyclass=to define classes for the entire navbox's<div>container tags.
|state=– controls when a navbox is expanded or collapsed.
|titlestyle=– custom CSS declarations appended to the full-width title bar'sstyle="…"attribute, for example:|titlestyle=background-color: var(--background-color-neutral, #eaecf0); color: var(--color-base, #202122);.
|groupstyle=– custom CSS declarations appended to thestyle="…"attributes of the table cells for all of the|groupN=parameters, for example:|groupstyle=background-color: var(--background-color-disabled, #dadde3); color: var(--color-progressive, #36c);.
|above=– content to appear under the title bar and above the|groupN=/|listN=rows (such as a list of wikilinks related to general aspects of the navbox subject).
|image=– an optional right-side image, formatted as a typicallyFile:namespace wikilink, such as[[File:XX.jpg|80px.|alt=Alternate text|link=]]
|imageleft=– an optional left-side image, formatted in the same manner as the|image=parameter described above.
|groupN=– the content shown in the table cell at the immediate left of|listN=(if any|groupN=parameter is left undefined, the corresponding|listN=parameter will receive a full-width, center-aligned table cell (by way ofstyle="text-align: center;").|listN=– a wikilist formatted series of page links.
|below=– optional content to appear at the bottom of the navbox directly beneath the|groupN=/|listN=rows.
Descriptions
The following is a complete list of parameters for using {{Navbox}}. In most cases, the only required parameters are |name=, |title= and |list1=, though "child" navboxes do not even require those. For consistency and ease of use, this template shares numerous common parameters with its sister templates in the Navbox suite, {{Navbox with columns}} and {{Navbox with collapsible groups}}. Parameters marked with a preceding superscript orange star (★…) are common to all Navbox suite templates.
Setup
- ★
|name= - The name of the template, which is needed for the links to work properly on all pages where the template is transcluded; the shortcut value
{{subst:PAGENAME}}can be assigned as it will be automatically replaced with the correct value when saved. This parameter is only required if the|title=parameter is defined but neither the|border=or|navbar=parameters (which disable the navbar) are as well.
- ★
|state=autocollapsecollapsedexpandedplainoff |state=autocollapse(default) – The navbox is collapsed if there are two or more additional collapsible elements on the transcluding page, otherwise it will be expanded. For the technically-minded, perform a full-text search forautocollapseon MediaWiki:Common.js to review the underlying JavaScript.|state=collapsed– The navbox always loads in the collapsed state.|state=expanded– The navbox always loads in the expanded state.|state=plain– The navbox always loads in the expanded state and the {{Code[hide]}} link on the right is suppressed, while the title remains centered (CSSpadding:is used to offset the V • T • E links).|state=off– As above, the navbox always loads in the expanded state with no[hide]link on the right, however no CSS padding is used to keep the title centered. This is for advanced use only; theplainoption should suffice for most instances where the[show]/[hide]button needs to be hidden.
- To have the navbox load in the expanded state when not transcluded and in the collapsed state when it is, use
<noinclude>tags to wrap the value for the non-transcluded behavior (e.g.,<noinclude>expanded</noinclude>).
- Frequently, editors will wish to override a navbox's default initial state in transcluding pages on a case-by-case basis. This is easily accomplished by duplicating the
{{{state}}}parameter in the new navbox and adding a fallback value to it of the desired default behavior keyword wrapped in<includeonly>tags. This allows any explicitly-defined values for the parameter to be passed through as-is to Template:Navbox without affecting the non-transcluded default state.
- For example,
|state=will show the navbox expanded when viewing it on its own template page and yet remain auto-collapsed anywhere else it is transcluded without an explicit value defined for{{{state<includeonly>|desired_default</includeonly>}}}{{{state}}}.
- For example,
- A more determinative approach is with
|state=, where the parameter value passed to {{Navbox}} on the template's own page would be{{{state|<includeonly>desired_transcluded_default</includeonly><noinclude>desired_non-transcluded_default</noinclude>}}}desired_non-transcluded_defaultwhile remainingdesired_transcluded_defaultwherever the navbox is transcluded.- Example 1: {{Aesthetics}} with
autocollapseas the default initial state. Most articles transclude it alongside other navboxes so it collapses automatically, but it's expanded on its own template page because it is the only navbox present. - Example 2: {{Historical currencies of Hungary}} whose default initial state is
expandedas implemented in the template source code with|state=. All transcluding articles show the content by default, unless there is a hypothetical article that specifies{{{state<includeonly>|expanded</includeonly>}}}{{Historical currencies of Hungary|state=collapsed}}when transcluding. - Example 3: {{Alveolata}} with
collapsedas the default initial state, from the parameter configuration|state=. All transcluding articles will show the template as collapsed by default, but the template will still be uncollapsed when displayed on its own page.{{{state<includeonly>|collapsed</includeonly>}}}
- Example 1: {{Aesthetics}} with
- A more determinative approach is with
- The template {{Collapsible option}} explains how to use the
{{{state}}}parameter. It can be added to a<noinclude>...</noinclude>section after the template definition, or to the instructions on the {{Documentation subpage}}.
- ★
|navbar=plainoff |navbar=plain– Removes the links on the left side of the titlebar and automatically recalculates the CSS padding values to keep the title visually centered.|navbar=off– Removes the links, but does not alter the CSS padding to compensate (this is for advanced use only; theplainoption should suffice for most instances where a navbar is not desired).
- It is strongly recommended that the navbar should not be hidden so that users can easily edit the template as needed, and to keep a standard style across pages.
- ★
|border=childsubgroupnone |border=childor|border=subgroup– Allows the navbox to be used as a borderless child that nests cleanly within another navbox, removing the outer border and the lateral padding so that it fits into one of the|listN=areas of the parent navbox.|border=none– Removes the outer border and lateral padding from the navbox so it may be used as the child of another container (do not use thenoneoption inside of another navbox, only thechild/subgroupkeyword values are appropriate for nesting navboxes).- If unset (default), then a regular navbox is displayed with a one-pixel-wide border. An alternate way to specify the border to be a subgroup style is with the first unnamed/positional parameter alias, as
{{Navbox|child|…}}
- ►
Cells
- ★
|title= - Text that appears centered in the top row of the table, usually a succinct description of the template's topic. This should not include any line breaks, but if a second line is needed, use
{{-}}to ensure the title remains properly centered. Though this parameter is not technically mandatory, using {{Navbox}} is rather pointless without a title.
- ★
|above= - A full-width cell displayed between the titlebar and first
|groupN=/|listN=row, i.e. above the template's body (groups, lists and image). In navboxes without an image, this parameter behaves in the same way as the|list1=parameter without the|group1=parameter.
- ★
|groupN= - (i.e.
|group1=,|group2=, etc.) When defined, its value appears in a header cell displayed to the left of the corresponding|listN=parameter. If undefined,|listN=uses the full width of the navbox and is center-aligned.
- ★
|listN= - (i.e.
|list1=,|list2=, etc.) The fundamental content elements of the navbox, usually each consisting of a list of wikilinks. They are rendered using inline formatting—though the text can be entered on separate lines if the entire list is enclosed within<div>tags—and may be preceded by a header cell whose content is defined by the corresponding|groupN=parameter. The|list1=parameter is required, and any additional|listN=parameters that may be defined are each displayed on a separate row. The keyword valueschildorsubgroupare also available to denote that the element is a nested or "child" navbox instance (does not work with {{Navbox with columns}} or {{Navbox with collapsible groups}}).
- List entries should be separated using a newline followed by an asterisk (*). If instead, multiple asterisks precede an entry, it will be presented as a nested parenthetical to the previous entry, with each additional asterisk serving to increment the level of imbrication.
- ★
|image= - An image to be displayed in a cell below the title bar and to the right of the body rows (the groups/lists); requires the
|list1=parameter to be defined. This parameter expects a value in the form of a standard file wikilink, e.g.,[[File:Xxx.jpg|80px. N.B.: Including the location token|alt=|class=|link=]]|rightin the file wikilink produces appropriate visual separation for the image from the list cells' zebra striping as well as individual list items.- ►
- ★
|imageleft= - An image to be displayed in a cell below the title bar and to the left of the body rows (the groups/lists); requires the
|list1=parameter to be defined and that all|groupN=parameters are unset. Valid values for this parameter must satisfy the same requirements as for the|image=parameter.
- ★
|below= - A full-width cell displayed below the body rows (the groups, lists and images). If neither the
|image=or|imageleft=parameters are defined, this parameter behaves in the same way as the final|listN=parameter when its corresponding|groupN=parameter is unset. An example of a common use case for this parameter can be found at this 2025 version of Template:Hosiery. Links placed here that lead to pages outside of the main namespace are customarily identified by prepending {{Icon|namespace}} and a non-breaking space to them, following the format:{{Icon|category}}{{Spaces|1|nbsp}}[[:Category:Example|Example]].
Style
Custom styles are generally advised against in the interest of consistency among pages and templates on Wikipedia, but the option to modify the default CSS styles is provided through parameters detailed below.
- ★
|bodystyle= - Additional CSS declarations to append to the template body defaults; this option should be used sparingly as it can lead to visual inconsistencies. Some examples:
|bodystyle=background-color: var(--background-color-disabled, #dadde3); color: var(--color-emphasized, #101418);|bodystyle=clear:bothleftrightnone; float:leftrightnone;|bodystyle=width: [Nem, N%, Npx, auto];
- ★
|basestyle= - A convenience parameter that greatly simplifies changing the general color scheme of a navbox by appending a set of additional CSS declarations to the defaults for the
|title=,|above=,|below=and all of the|groupN=cells; note that this parameter has no impact on any of the|listN=cells, though. Example:|basestyle=background-color: var(--background-color-content-added, #a3d3ff); color: var(--color-inverted, #fff);
- ★
|titlestyle= - Additional CSS declarations to append to the defaults for the
|title=table cell, most often to customize its background and font colors. Examples:|titlestyle=background-color: var(--background-color-option-orange, #ffead4); color: var(--color-base, #202122);|titlestyle=background: none; color: inherit;– for no background color
- ★
|groupstyle= - Additional CSS declarations to append to the defaults for each of the
|groupN=cells, overriding any declarations that have been applied to the entire navbox. Examples:|groupstyle=background-color: var(--background-color-option-maroon, #f6ebeb); color: var(--color-neutral, #404244);|groupstyle=text-align:leftcenterrightjustify; vertical-align:topmiddlebottom;
- ★
|groupNstyle= - Additional CSS declarations to append to the defaults for a specific
|groupN=parameter table cell, in addition to any declarations inherited from the|groupstyle=parameter. This parameter should only be used when absolutely necessary in order to maintain standardization and simplicity. Example:|group1style=background-color: var(--background-color-option-lime, #e3f2e4); color: var(--color-destructive, #bf3c2c);
|groupwidth=- A valid CSS length value (typically consisting of numeric and unit suffix components) specifying a uniform width for the
|groupN=cells, in cases where a lack of content in the list cells may cause group cells to be expand undesirably; may be overridden by the|groupNstyle=parameter. Example:|groupwidth=8rem
- ★
|liststyle= - Additional CSS declarations to append to the defaults for all
|listN=parameter table cells; individual declarations can be overridden by declarations of the same CSS properties in the|oddstyle=and|evenstyle=parameters, if specified.
- ★
|listNstyle= - Additional CSS declarations to append to the defaults for a specific
|listN=parameter table cell, in addition to any declarations inherited from the|liststyle=parameter. This parameter should only be used when absolutely necessary in order to maintain standardization and simplicity. Example:|list1style=background-color: var(--background-color-success-subtle, #dff2eb); color: var(--color-subtle, #54595d);
- ★
|listpadding= - One or more valid CSS length values (typically consisting of numeric and unit suffix components) specifying the amount of padding in each
|listN=parameter table cell. This value must be valid for the CSSpadding:shorthand property as-is, and override the default of 0.25em on the left/right and 0 on the top/bottom. Due to the technical intricacies of this template's structure, it is not possible to set thepadding:property as part of the|liststyle=parameter but only with this one. Examples:|listpadding=0 0.5em– sets the top/bottom padding width to 0 and the left/right width to 0.5em|listpadding=0– removes all padding for every list cell
|evenstyle=,|oddstyle=- Additional CSS declarations to append to the defaults for only the even- or odd-numbered
|listN=parameter table cells, respectively, overriding any CSS declarations inherited from the|liststyle=parameter. The default behavior is to produce a zebra stripe appearance by slightly darkening the background of the even-numbered|listN=cells, in order to improve readability; this should not be changed except in extraordinary circumstances.
|evenodd=swapevenoddoff|evenodd=swap– reverses the zebra striping pattern, slightly darkening the backgrounds of odd-numbered|listN=cells, instead.|evenodd=– forces alleven, odd|listN=cells to use the style for the named group, creating a uniform appearance.|evenodd=off– disables zebra stripe styling altogether and sets all of the|listN=cells transparent.
- ★
|abovestyle=, - ★
|belowstyle= - Additional CSS declarations to append to the defaults for the table cells defined by the
|above=or|below=parameters, respectively; typically used to customize theme colors or text alignment. Examples:|abovestyle=background-color: var(--background-color-error, #f54739); color: var(--color-inverted, #fff);|belowstyle=text-align:leftcenterrightjustify;
- ★
|imagestyle=, - ★
|imageleftstyle= - Additional CSS declarations to append to the table cell defaults for the
|image=and|imageleft=parameters. These styles should only be used in exceptional circumstances, such as fixing width problems that can arise when all the|listN=parameters have too few entries. Example:|imagestyle=width: [Nem, N%, Npx, auto];
Default styles
The style parameters shown below are those that editors using {{Navbox}} customize most often; the other more complex style settings were left out of this list to keep it concise. If you need to discover defaults for any omitted parameters, consult the single source of truth for these styles at Module:Navbox and Module:Navbox/styles.css.
| Parameter | Declarations |
|---|---|
|bodystyle=
| background-color: #fdfdfd; color: inherit; vertical-align: middle; width: 100%;
|
|titlestyle=
| background-color: #ccf; line-height: 1.5em; padding: 0.25em 1em; text-align: center;
|
|abovestyle=
| background-color: #ddf; line-height: 1.5em; padding: 0.25em 1em; text-align: center;
|
|belowstyle=
| background-color: #ddf; line-height: 1.5em; padding: 0.25em 1em; text-align: center;
|
|groupstyle=
| background-color: #ddf; line-height: 1.5em; padding: 0.25em 1em; text-align: right; white-space: nowrap;
|
|liststyle=
| border-color: #fdfdfd; border-left: var(--spacing-12, 2px) var(--border-style-base, solid); text-align: left/center;
|
|evenstyle=
| background-color: #f7f7f7; color: inherit; line-height: 1.5em;
|
|oddstyle=
| background-color: transparent; color: inherit; line-height: 1.5em; |
Since |oddstyle= has a transparent background, odd list table cells will have the color defined by the |bodystyle= parameter: #fdfdfd by default (white with a hint of gray). Individual |listN= cells whose corresponding |groupN= is also defined default to text-align: left;, and if it is not the default becomes text-align: center;. Since only the |bodystyle= parameter has a default declaration for the vertical-align: property, all the others inherit it.
Class
|bodyclass=- Additional CSS classes to append to the defaults for the navbox as a whole.
|titleclass=- Additional CSS classes to append to the defaults for the title bar table cell.
|aboveclass=- Additional CSS classes to append to the defaults for the above parameter table cell.
|belowclass=- Additional CSS classes to append to the defaults for the below parameter table cell.
|groupclass=,|listclass=- Additional CSS classes to append to the defaults for group or list table cells. The most common use for the listclass parameter is to add the
hlistclass that will cause lists to render horizontally. All of these parameters will accept that class, but in the event that it needs to be added to more than one of the class parameters, it is preferable that it is added only to|bodyclass=hlistinstead, from where it will propagate automatically to all of the others.
- {{Navbox}} automatically adds the class
nowraplinksto the listN table cells, but that can be overridden manually as needed by setting|listclass=wraplinks.- The use of the
{{Nowrap begin}}, {{·}} and {{•}}templates as wrappers for navbox parameter values in order to produce horizontally-formatted lists isdeprecatedin favor of adding thehlistclass to this template's listclass parameter; see Template:Flatlist § Technical details for a technical explanation of how the class works.
- The use of the
Advanced
|innerstyle=- A very advanced parameter to be used only for advanced meta-templates employing the navbox. Internally, the navbox uses an outer table to draw the border, and then an inner table for everything else (title, above, groups, lists, below, images, etc.). The bodystyle parameter sets the CSS declarations for the outer table which are then inherited by the inner table, but in advanced cases (i.e. meta-templates) it may be necessary to directly set the style for the inner table. This parameter provides access to that inner table so that its CSS declarations can be manipulated; use at your own risk.
|nowrapitems=- Defining any non-null value for this parameter applies the
nowrapclass to each entry in all of the listN parameters and likewise to any lists within the above and below parameters.
|orphan=- Defining any non-null value to this parameter within a nested or "child" navbox fixes odd/even zebra striping inconsistencies and removes it from Category:Navbox orphans.
Microformats
This template supports the addition of microformat information. This is done by adding "class" attributes to various data cells, indicating what kind of information is contained within. To flag a navbox as containing hCard information about a person, for example, add these classes to the following parameters:
|bodyclass=vcard|titleclass=fn
- Alternatively, they can be applied to individual elements like this:
|title=The books of Iain Banks
Visit WikiProject Microformats for more information on adding microformat information to Wikipedia, and the microformat article for more information on microformats in general.
Table layout
Without image, above and below
This table is generated by {{Navbox}} without the image, above and below parameters defined (the gray list background color is added for illustration only):
With image, above and below
This table is generated by {{Navbox}} with the image, above and below parameters defined (the gray list background color is added for illustration only):
With image, but without groups
This table is generated by {{Navbox}} with image, imageleft, listN defined but without defining the groupN, above and below parameters (the gray list background color is added for illustration only):
Examples
No image
{{Navbox
| name = Navbox/doc
| title = [[MSC Malaysia]]
| listclass = hlist
| group1 = Centre
| list1 =
* [[Cyberjaya]]
| group2 = Area
| list2 =
* [[Klang Valley]]
| group3 = Major landmarks
| list3 =
* [[Cyberjaya]]
* [[Kuala Lumpur International Airport]]
* [[Kuala Lumpur Sentral station]]
* [[Kuala Lumpur Tower]]
* [[Petronas Towers]]
* [[Putrajaya]]
* [[Technology Park Malaysia]]
| group4 = Infrastructure
| list4 =
* [[Express Rail Link]]
* [[Maju Expressway]]
| group5 = Prime applications
| list5 =
* [[E-government]]
* [[Malaysian identity card]]
}}
With image
{{Navbox
| name = Navbox/doc
| state = expanded
| title = [[miHoYo]] / HoYoverse
| image = [[File:MiHoYo.svg|100px|link=]]
| bodyclass = hlist
| group1 = ''[[Honkai]]'' series
| list1 = {{Navbox|subgroup
| group1 = Games
| list1 = <!-- In order of release, not alphabetical. -->
* ''[[Honkai Impact 3rd]]''
* ''[[Honkai: Star Rail]]''
* ''[[Honkai: Nexus Anima]]''
| group2 = [[List of Honkai: Star Rail characters|Characters]]
| list2 =
* [[Acheron (Honkai: Star Rail)|Acheron]]
* [[Aventurine (Honkai: Star Rail)|Aventurine]]
* [[Castorice]]
* [[Cyrene (Honkai: Star Rail)|Cyrene]]
* [[Dan Heng]]
* [[Firefly (Honkai: Star Rail)|Firefly]]
* [[Kafka (Honkai: Star Rail)|Kafka]]
* [[March 7th (Honkai: Star Rail)|March 7th]]
* [[Phainon (Honkai: Star Rail)|Phainon]]
* [[Robin (Honkai: Star Rail)|Robin]]
* [[Sparkle (Honkai: Star Rail)|Sparkle]]
* [[Welt Yang]]
}}
| group2 = ''[[Genshin Impact]]''
| list2 = {{Navbox|subgroup
| group1 = [[Locations of Genshin Impact|Locations]]
| list1 = <!-- In order of release, not alphabetical. -->
* [[Mondstadt]]
* [[Liyue (Genshin Impact)|Liyue]]
* [[Inazuma (Genshin Impact)|Inazuma]]
* [[Sumeru (Genshin Impact)|Sumeru]]
* [[Fontaine (Genshin Impact)|Fontaine]]
* [[Natlan]]
* [[Nod-Krai]]
| group2 = [[List of Genshin Impact characters|Characters]]
| list2 = <!-- Do not include Aloy, as she is not a miHoYo character. -->
* [[Alhaitham (Genshin Impact)|Alhaitham]]
* [[Arataki Itto]]
* [[Arlecchino (Genshin Impact)|Arlecchino]]
* [[Dehya]]
* [[Furina (Genshin Impact)|Furina]]
* [[Gaming (Genshin Impact)|Gaming]]
* [[Hu Tao]]
* [[Kaedehara Kazuha]]
* [[Mavuika]]
* [[Paimon (Genshin Impact)|Paimon]]
* [[Raiden Shogun]]
* [[Venti (Genshin Impact)|Venti]]
* [[Wanderer (Genshin Impact)|Wanderer]]
* [[Xiao (Genshin Impact)|Xiao]]
* [[Yae Miko]]
* [[Yun Jin]]
* [[Zhongli (Genshin Impact)|Zhongli]]
| group3 = Related
| list3 =
* [[Music of Genshin Impact|Music]]
* ''[[Genius Invokation TCG]]''
}}
| group3 = Other games
| list3 = <!-- In order of release, not alphabetical. -->
* ''[[Tears of Themis]]''
* ''[[Zenless Zone Zero]]''
** [[List of Zenless Zone Zero characters|Characters]]
* ''[[Petit Planet]]''
* ''[[Varsapura]]''
| group4 = People
| list4 =
* [[Cai Haoyu]]
* [[Chen Yupeng]]
* [[Liu Wei (businessman, born 1987)|Liu Wei]]
* [[HOYO-MiX]]
| below = {{Flatlist|
* {{Icon|category}} [[:Category:MiHoYo games|miHoYo games]]
* {{Icon|category}} [[:Category:Genshin Impact|''Genshin Impact'']]
** {{Icon|category}} [[:Category:Genshin Impact characters|characters]]
** {{Icon|category}} [[:Category:Genshin Impact locations|locations]]
* {{Icon|category}} [[:Category:Honkai: Star Rail|''Honkai: Star Rail'']]
** {{Icon|category}} [[:Category:Honkai: Star Rail characters|characters]]
}}
}}
Child navboxes
It is possible to place multiple navboxes within a single border. These can either be specified inline or by using a nested or "child" navbox template, although the latter method can result in a significantly large post-expand include size.
To specify nested or "child" navboxes inline, set the listN parameter value as child or subgroup. Elements of the child navbox can be specified by prepending childN_, subgroupN_ or just N_ to the parameter names (e.g., 1_list1). Another level of nested navboxes can be added with an additional prefix (e.g., 1_1_list1). The basic code for doing this is as follows (which adds a subgroup for the first group/list):
{{Navbox
| name = {{subst:PAGENAME}}
| title = Title
| group1 = [optional]
| list1 = child
| 1_title = [optional]
| 1_group1 = [optional]
| 1_list1 = child
| 1_1_title = [optional]
| 1_1_group1 = [optional]
| 1_1_list1 =
…list contents…
…
…
}}
To specify child navboxes using a nested template supply child as the value to its first unnamed/positional parameter, or set the |border= parameter. The basic code for doing this is as follows (which adds a subgroup for the first group/list):
{{Navbox
| name = {{subst:PAGENAME}}
| title = Title
| group1 = [optional]
| list1 = {{Navbox|child
…child navbox parameters…
}}
…
}}
Subgroups example
This example shows two subgroups and an even deeper nested sub-subgroup created using child or subgroup keywords (they are equivalent and interchangeable); the striping is alternated automatically. To remove the striping altogether, set the |childN_liststyle=background-color: transparent; parameter in each one.
Relationship with other Navbox templates
This navbox template works in conjunction with two other templates: {{Navbox with columns}} and {{Navbox with collapsible groups}}. All three of these templates share common parameters for consistency and ease of use (they are marked with a preceding superscript orange star (★…) in the parameter descriptions above). Most importantly, they can all be used as child templates of one another. Using the inline notation, the N_type parameter can be set to the values with columns or with collapsible groups to activate the compatibility for that type of child navbox, as shown in the example below.
Deeply nested navbox example source code |
|---|
{{Navbox
| name = Template:Navbox/doc
| title = Navbox with nested regular Navbox, Navbox with Collapsible Groups, and Navbox with Columns
| listclass = hlist<!-- Note that this applies to the child navboxes unless explicitly set otherwise. -->
| group1 = Regular Navbox
| list1 = subgroup
| 1_group1 = Group 1
| 1_list1 =
* List 1.1
* List 1.2
| 1_group2 = Group 2
| 1_list2 =
* List 2.1
* List 2.2
| group2 = Navbox with Collapsible Groups
| list2 = subgroup
| 2_type = with collapsible groups
| 2_group1 = Group 1
| 2_list1 =
* List 1.1
* List 1.2
| 2_group2 = Group 2
| 2_list2 =
* List 2.1
* List 2.2
| group3 = Navbox with Columns
| list3 = subgroup
| 3_type = with columns
| 3_col1header = Column 1
| 3_col1 =
* List 1.1
* List 1.2
| 3_col2header = Column 2
| 3_col2 =
* List 2.1
* List 2.2
| list11 = subgroup
| 11_title = Regular Navbox
| 11_group1 = Group 1
| 11_list1 =
* List 1.1
* List 1.2
| 11_group2 = Group 2
| 11_list2 =
* List 2.1
* List 2.2
| list12 = subgroup
| 12_title = Navbox with Collapsible Groups
| 12_type = with collapsible groups
| 12_group1 = Group 1
| 12_list1 =
* List 1.1
* List 1.2
| 12_group2 = Group 2
| 12_list2 =
* List 2.1
* List 2.2
| list13 = subgroup
| 13_title = Navbox with Columns
| 13_type = with columns
| 13_col1header = Column 1
| 13_col1 =
* List 1.1
* List 1.2
| 13_col2header = Column 2
| 13_col2 =
* List 2.1
* List 2.2
}}
|
You can also nest these or other navbox templates by assigning the keyword child as the value of the first unnamed/positional parameter or the named |border= parameter (e.g., {{Navbox|child|…}}, {{Navbox with columns|1=child|…}} or {{Navbox with collapsible groups|border=child|…}}). Note that this style of nesting can lead to a large increase in the template's post-expand include size.
Multiple visibility toggles
The example below is generated using a regular navbox for the main container with its |listN= parameters all assigned the value child (e.g., |list1=child, |list2=child, …). The v · t · e links are hidden automatically because the "child" or "subgroup" keyword is used, so defining |navbar=plain for each of them is not necessary. The code N_state = {{#ifeq:{{{selected|}}}|ABBREVIATION|uncollapsed|{{{stateN|collapsed}}}}} is used to replicate the |abbrN=ABBREVIATION functionality of {{Navbox with collapsible groups}}.
Technical details
- The links are produced by Template:Navbar; if you have questions about them, it is probably best to ask at its talk page.
- The two-pixel-wide border between groups and lists is drawn using the
border-left:property of the list cells. Thus, if you wish to change the background color of the template (for example|bodystyle=background-color: purple;), then you'll need to make theborder-left-color:property for all list parameters have the same value (i.e.|liststyle=border-left-color: purple;). If you wish to have a border around each list cell, then the 2px border between the list cells and group cells will disappear; you'll have to come up with your own solution. - Adjacent navboxes have only a one-pixel-wide border between them; if you set the top or bottom margin with the
|style=or|bodystyle=parameters, then this will not work. - The default
margin-left:andmargin-right:properties of the outer navbox table are set toauto. If you wish to use navbox as a float, you will need to manually set the margin-* property values because the auto value is incompatible with the float property. For example, add the following code to use the navbox as a float:|bodystyle=float: right; margin-left: 1em; margin-right: 0; width: 22em; - Navbox templates, including this one, are a major contributor to the post-expand include size of pages, and can cause pages to exceed the limit and not render correctly. There are a multiple known methods for mitigating this.
{{Navbox}}can be replaced with{{#invoke:Navbox|navbox}}, which approximately halves the include size.- Nesting other templates inside of a navbox can cause the include size to increase by a factor of two or more. Using the inline child syntax documented at § Child navboxes mitigates this, but only for plain navboxes, navboxes with columns and navboxes with collapsible groups (but not any other navbox types).
Copying to other wikis
If you are trying to copy Template:Navbox to your local wiki, be aware that there are several prerequisites that must be installed or copied over as well:
- The Scribunto and TemplateStyles extensions must be installed and activated.
- Module:Navbox and its module and TemplateStyles dependencies, listed at Module:Navbox/doc
- Optionally, the JavaScript code that enables support for the
mw-collapsibleclass states (autocollapse, innercollapse and outercollapse) may be copied from MediaWiki:Common.js, if dynamic collapsing is desired.
Navbox documentation
| Most templates built using {{Navbox}} don't require a unique documentation subpage, but rather should transclude {{Navbox documentation}} in lieu of the generic {{Documentation}} template. |
Tracking categories
TemplateData
TemplateData for Navbox
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| Name | name | The name of the template. Needed for "View • Talk • Edit" links to work properly.
| Page name | suggested |
| Default expansion state | state | Controls when a navbox is expanded or collapsed
| Line | suggested |
| Title | title | Text in the title bar; centered in the top row of the table. Usually the template's topic.
| Content | suggested |
| Title CSS classes | titleclass | Additional CSS classes to declare for the title table row
| Line | optional |
| Title CSS style | titlestyle | Additional CSS declarations to define for the full-width title table cell | Line | optional |
| Body CSS classes | bodyclass | Additional CSS classes to declare for the navbox's containing block element
| Line | optional |
| Body CSS styles | bodystyle | Additional CSS declarations to append inline to the style attribute of the navbox's containing block element
| Line | optional |
| Border status | border1 | When assigned either the 'child' or 'subgroup' keyword values, alters navbox styling to support nesting within another navbox template
| Line | optional |
| List padding size | listpadding | A valid CSS length value specifying the padding in each list cell
| Line | optional |
| List class | listclass | CSS class for the list cells, usually hlist for horizontal lists. Alternatively, use bodyclass for the whole box.
| Line | optional |
| List CSS styles | liststyle | Custom CSS style declarations to apply to all lists. The default value for the text-align: property is left for lists with a corresponding |groupN= parameter defined and center for lists that do not.
| Line | optional |
| Prevent line breaks inside list items | nowrapitems | Applies the nowrap class to each list item individually in the |above=, |below= and all |listN= parameters
| Boolean | optional |
| Alternating list background striping | evenodd | This template uses a slightly lighter background color for even-numbered |listN= parameters for ease of reading. If this parameter is assigned the keyword value swap, then lighter background is applied to odd-numbered |listN= parameters instead. Assigning the keyword values even or odd forces all rows to be displayed uniformly according to that row style, while the keyword value off disables the row striping effect entirely.
| Line | optional |
| evenstyle | evenstyle | Line | optional | |
| oddstyle | oddstyle | Line | optional | |
| Non-list CSS styles | basestyle | Additional CSS declarations to append inline to the style attributes of the 'title', 'above', 'below' and 'group' table cells | Line | optional |
| Above | above | Full-width cell displayed between the titlebar and first group/list, i.e. above the template's body (groups, lists and image) | Content | suggested |
| Above CSS classes | aboveclass | Additional CSS classes to declare for the 'above' table cell | Line | optional |
| abovestyle | abovestyle | Line | optional | |
| groupwidth | groupwidth | Line | optional | |
| Group CSS classes | groupclass | Additional CSS classes to define for all group name table cells | Line | optional |
| groupstyle | groupstyle | Line | optional | |
| Group 1 | group1 | If specified, text appears in a header cell displayed to the left of list 1. If omitted, list 1 uses the full width of the navbox. | Content | suggested |
| group1style | group1style | Line | optional | |
| List 1 | list1 | Body of the template; usually a list of links. Format is inline. At least one list parameter is required; each additional list is displayed in a separate row of the table. Each listn may be preceded by a corresponding groupn parameter. Entries should be separated using a newline and an asterisk. If two asterisks are used, it provides nesting within the previous entry with brackets. | Content | required |
| list1style | list1style | Line | optional | |
| Group 2 | group2 | If specified, text appears in a header cell displayed to the left of list 2. If omitted, list 2 uses the full width of the navbox. | Content | suggested |
| List 2 | list2 | Body of the template; usually a list of links. Format is inline. At least one list parameter is required; each additional list is displayed in a separate row of the table. Each listn may be preceded by a corresponding groupn parameter. Entries should be separated using a newline and an asterisk. If two asterisks are used, it provides nesting within the previous entry with brackets. | Content | suggested |
| List 3 | list3 | Body of the template; usually a list of links. Format is inline. At least one list parameter is required; each additional list is displayed in a separate row of the table. Each listn may be preceded by a corresponding groupn parameter. Entries should be separated using a newline and an asterisk. If two asterisks are used, it provides nesting within the previous entry with brackets. | Content | optional |
| Group 3 | group3 | If specified, text appears in a header cell displayed to the left of list 3. If omitted, list 3 uses the full width of the navbox. | Content | optional |
| Group 4 | group4 | If specified, text appears in a header cell displayed to the left of list 4. If omitted, list 4 uses the full width of the navbox. | Content | optional |
| List 4 | list4 | Body of the template; usually a list of links. Format is inline. At least one list parameter is required; each additional list is displayed in a separate row of the table. Each listn may be preceded by a corresponding groupn parameter. Entries should be separated using a newline and an asterisk. If two asterisks are used, it provides nesting within the previous entry with brackets. | Content | optional |
| Group 5 | group5 | If specified, text appears in a header cell displayed to the left of list 5. If omitted, list 5 uses the full width of the navbox. | Content | optional |
| List 5 | list5 | Body of the template; usually a list of links. Format is inline. At least one list parameter is required; each additional list is displayed in a separate row of the table. Each listn may be preceded by a corresponding groupn parameter. Entries should be separated using a newline and an asterisk. If two asterisks are used, it provides nesting within the previous entry with brackets. | Content | optional |
| Group 6 | group6 | If specified, text appears in a header cell displayed to the left of list 6. If omitted, list 6 uses the full width of the navbox. | Content | optional |
| List 6 | list6 | Body of the template; usually a list of links. Format is inline. Each listn may be preceded by a corresponding groupn parameter. Entries should be separated using a newline and an asterisk. If two asterisks are used, it provides nesting within the previous entry with brackets. | Content | optional |
| Right-side image | image | Image to be displayed in a cell below the title and to the right of the body
| Content | suggested |
| Image CSS classes | imageclass | Additional CSS classes to declare for the (right) image table cell | Line | optional |
| imagestyle | imagestyle | Line | optional | |
| Left-side image | imageleft | Image to be displayed in a cell below the title and to the left of the body. For the image to display properly, list1 parameter must be specified and no groups can be specified.
| Content | optional |
| imageleftstyle | imageleftstyle | Line | optional | |
| Below | below | Full-width cell displayed below the template's body. | Content | suggested |
| Below CSS classes | belowclass | Additional CSS classes to declare for the below table cell | Line | optional |
| belowstyle | belowstyle | Line | optional | |
| Navbar status | navbar |
| Line | optional |
| navboxclass | navboxclass | Line | optional | |
| innerstyle | innerstyle | Line | optional | |
| orphan | orphan |
| Boolean | optional |
See also
- {{Navbox/testcases}} — For additional examples of template code.
- {{Navbox decade list}} — To create a row of ten evenly spaced year links.
- {{Navbox documentation}} — Shows the standard documentation using {{Documentation}}.
- {{Navboxes}} — Groups several navigation boxes together.
- {{Nobold}} — To display text at normal font-weight within a context where the default font-weight is bold, e.g. header cells in tables.
- {{Sidebar}} — Vertically-aligned navigation templates.
- Help:Line-break handling — A guide for handling line breaks/word wrapping on Wikipedia, such as the wrapping within list entries used in navboxes.
- Wikimedia Documentation: Codex design token colors — Reference for valid, approved Wikimedia CSS variables for dark-mode-aware color values
- Wikipedia:Template documentation — Guide to creating documentation for new templates
{{Nowrap begin}}, {{·}} and {{•}}aredeprecatedin favor of this template's built-in|listclass=hlistparameter for producing horizontally-formatted lists; see Template:Flatlist § Technical details for a technical explanation of how thehlistclass works.
| Template | Collapsible | Image | Groups | Style (body) parameter/s |
|---|---|---|---|---|
| {{Navbox}} | collapsible | Left/right of body | Yes | Yes |
| {{Navbox with collapsible groups}} | collapsible | Left/right of body and/or in each list | Yes | Yes |
| {{Navbox with columns}} | collapsible | Left/right of columns | No | Yes |
| Type | CSS classes | JavaScript | Collapses when | Custom initial state | Nesting |
|---|---|---|---|---|---|
| Collapsible tables | mw-collapsible | jQuery.makeCollapsible | 2 or more autocollapse on page | Yes | Yes |