Fandom

Community Central

Comments14

Carnage's Guide to Templates: Navboxes

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.

Greetings fellow users, I am going to show you a tutorial on how to create a navigation box. Many people are confused about creating navigation boxes, but this tutorial might help them. There are many styles and methods of creating navigation boxes, but I am going to show you a few methods. If you need help creating the navigation box(es), follow the instructions below.

Method 1 - Basic

This method is the basic method of creating a navigation box. The navigation boxes do not have sub-groups.

Vertical Group Heading

This part of the tutorial shows you how to create the navigation box with vertical group headings. Here are the steps to create the navigation boxes with a vertical group heading:

Normal

This is a basic navigation box. It is one of the easiest methods in this tutorial. Here is the example of the navigation box:

{| style="border: 1px solid black; width: 100%;"
! colspan="2" style="background: #454444; border: 1px solid #454444; color: white;" | Title
|-
! width="25%" style="background: #9A9A9A;" | Group 1
| Content
|-
! width="25%" style="background: #9A9A9A;" | Group 2
| Content
|}

Note: You must not set the width of the group header to more than 30%, and the title header must have a colspan of 2.
Here is the result of the code:

Title
Group 1 Content
Group 2 Content

Collapsible

This is the collapsible navigation box. It is also one of the easiest steps in the tutorial. This navigation box can collapse. Here is the example of the collapsible navigation box:

 
{| class="mw-collapsible mw-collapsed" style="border: 1px solid orange; width: 100%;"
! colspan="2" style="background: #FA8912; border: 1px solid #FA8912; color: navy;" | Title
|-
! width="25%" style="background: #FF9F12;" | Group 1
| Content
|-
! width="25%" style="background: #FF9F12;" | Group 2
| Content
|}

Note: You must have the class="mw-collapsed" in order for the table to be collapsible.
Here is the result of the code:

Title
Group 1 Content
Group 2 Content

Horizontal Group Heading

This part of the tutorial shows you how to create a navigation bow with horizontal group headings. Here are the steps of creating a navigation box with a horizontal group heading:

Normal

This is a basic navigation box. Here is the example of the navigation box:

{| style="width: 100%; border: 1px solid red;"
! style="background: #FF5555; border: 1px solid #FF5555;" | Title
|-
! style="background: #DA8888;" | Group 1
|-
| Content
|-
! style="background: #DA8888;" | Group 2
|-
| Content
|}

Note: You must add a group header under the title header, and add the content cell under the group header.
Here is the result of this code:

Title
Group 1
Content
Group 2
Content

Collapsible

This is a collapsible navigation box. Here is the example of this collapsible navigation box:

{| class="mw-collapsible mw-collapsed" style="border: 1px solid brown; width: 100%;"
! style="background: #874312; border: 1px solid #874312;" | Title
|-
! style="background: #955512;" | Group 1
|-
| Content
|-
! style="background: #955512;" | Group 2
|-
| Content
|}

Here is the result of the code:

Title
Group 1
Content
Group 2
Content

Method 2 - Intermediate

This method is the intermediate method of creating a navigation box. The navigation boxes have sub-groups.

Vertical Groups and Sub-Groups

This part of the tutorial shows you how to create a navigation box with vertical group and sub-group headings. Here are the steps of creating the navigation box:

Normal

This is a basic navigation box with sub-groups. Here is the example of the navigation box:

{| style="border: 1px solid cyan; width: 100%;"
! colspan="3" style="background: #129F9F; border: 1px solid #129F9F;" | Title
|-
! rowspan="2" width="25%" style="background: #228F8F;" | Group 1
! width="15%" style="background: #17AFAF;" | Sub-Group 1
| Content
|-
! width="15%" style="background: #17AFAF;" | Sub-Group 2
| Content
|-
! rowspan="2" width="25%" style="background: #228F8F;" | Group 2
! width="15%" style="background: #17AFAF;" | Sub-Group 1
| Content
|-
! width="15%" style="background: #17AFAF;" | Sub-Group 2
| Content
|}

Note: The rowspan attribute is recommended for use in this navigation box.
Here is the result of the code:

Title
Group 1 Sub-Group 1 Content
Sub-Group 2 Content
Group 2 Sub-Group 1 Content
Sub-Group 2 Content

Collapsible

This is a collapsible navigation box with sub-groups. Here is the example of the navigation box:

{| class="mw-collapsible mw-collapsed" style="width: 100%; border: 1px solid gold;"
! colspan="3" style="background: #FFFF00; border: 1px solid #FFFF00;" | Title
|-
! rowspan="2" width="25%" style="background: #AAAA00;" | Group 1
! width="15%" style="background: #AA9000;" | Sub-Group 1
| Content
|-
! width="15%" style="background: #AA9000;" | Sub-Group 2
| Content
|-
! rowspan="2" width="25%" style="background: #AAAA00;" | Group 2
! width="15%" style="background: #AA9000;" | Sub-Group 1
| Content
|-
! width="15%" style="background: #AA9000;" | Sub-Group 2
| Content
|}

Here is the result of the code:

Title
Group 1 Sub-Group 1 Content
Sub-Group 2 Content
Group 2 Sub-Group 1 Content
Sub-Group 2 Content

Horizontal Groups and Sub-Groups

This part of the tutorial shows you how to create a navigation box with horizontal group and sub-group headings. Here are the steps of creating the navigation box:

Normal

This is a basic navigation box with sub-groups. Here is the example of the navigation box:

{| style="border: 1px solid navy; width: 100%;"
! colspan="2" style="background: #0A0A90; border: 1px solid #0A0A90;" | Title
|-
! colspan="2" style="background: #1A1AAA;" | Group 1
|-
! colspan="1" width="50%" style="background: #21219B;" | Sub-Group 1
! colspan="1" width="50%" style="background: #21219B;" | Sub-Group 2
|-
| colspan="1" | Content
| colspan="1" | Content
|-
! colspan="2" style="background: #1A1AAA;" | Group 2
|-
! colspan="1" width="50%" style="background: #21219B;" | Sub-Group 1
! colspan="1" width="50%" style="background: #21219B;" | Sub-Group 2
|-
| colspan="1" | Content
| colspan="1" | Content
|}

Note: You must use colspan="1" for the sub-groups and the content cells.
Here is the result of the code:

Title
Group 1
Sub-Group 1 Sub-Group 2
Content Content
Group 2
Sub-Group 1 Sub-Group 2
Content Content

Collapsible

This is a collapsible navigation box with sub-groups. Here is the example of the navigation box:

{| class="mw-collapsible mw-collapsed" style="width: 100%; border: 1px solid seagreen;"
! colspan="2" style="border: 1px solid #359535; background: #359535;" | Title
|-
! colspan="2" style="background: #65FD65;" | Group 1
|-
! colspan="1" width="50%" style="background: #45FF45;" | Sub-Group 1
! colspan="1" width="50%" style="background: #45FF45;" | Sub-Group 2
|-
| colspan="1" | Content
| colspan="1" | Content
|-
! colspan="2" style="background: #65FD65;" | Group 2
|-
! colspan="1" width="50%" style="background: #45FF45;" | Sub-Group 1
! colspan="1" width="50%" style="background: #45FF45;" | Sub-Group 2
|-
| colspan="1" | Content
| colspan="1" | Content
|}

Here is the result of the code:

Title
Group 1
Sub-Group 1 Sub-Group 2
Content Content
Group 2
Sub-Group 1 Sub-Group 2
Content Content

Method 3 - Advanced

This is the advanced method of creating a navigation box. This navigation box has some groups without sub-groups and groups with sub-groups.

Vertical

This is the navigation box with vertical groups with or without sub-groups. Here are the steps of creating the navigation box:

Normal

This is the basic navigation box. Here is the example of the navigation box:

{| style="width: 100%; border: 1px solid indigo;"
! colspan="3" style="background: #600A60; border: 1px solid #600A60;" | Title
|-
! rowspan="2" width="25%" style="background: #852A85;" | Group 1
! width="15%" style="background: #AF65AF;" | Sub-Group 1
| Content
|-
! width="15%" style="background: #AF65AF;" | Sub-Group 2
| Content
|-
! width="25%" style="background: #852A85;" | Group 2
| colspan="2" | Content
|-
! rowspan="2" width="25%" style="background: #852A85;" | Group 3
! width="15%" style="background: #AF65AF;" | Sub-Group 1
| Content
|-
! width="15%" style="background: #AF65AF;" | Sub-Group 2
| content
|}

Here is the result of the code:

Title
Group 1 Sub-Group 1 Content
Sub-Group 2 Content
Group 2 Content
Group 3 Sub-Group 1 Content
Sub-Group 2 Content

Collapsible

This is the collapsible navigation box. Here is the example of the navigation box:

{| class="mw-collapsible mw-collapsed" style="width: 100%; border: 1px solid silver;"
! colspan="3" style="background: slategray; border: 1px solid slategray;" | Title
|-
! rowspan="2" width="25%" style="background: gray;" | Group 1
! width="15%" style="background: mediumslategray;" | Sub-Group 1
| Content
|-
! width="15%" style="background: mediumslategray;" | Sub-Group 2
| Content
|-
! width="25%" style="background: gray;" | Group 2
| colspan="2" | Content
|-
! rowspan="2" width="25%" style="background: gray;" | Group 3
! width="15%" style="background: mediumslategray;" | Sub-Group 1
| Content
|-
! width="15%" style="background: mediumslategray;" | Sub-Group 2
| Content
|}

Here is the result:

Title
Group 1 Sub-Group 1 Content
Sub-Group 2 Content
Group 2 Content
Group 3 Sub-Group 1 Content
Sub-Group 2 Content

Method 4 - Expert

This part of the tutorial is the expert level method of creating a navigation box. Here are the steps of creating this navigation box:

Collapsible Sections

{| class="mw-collapsible mw-collapsed" style="width: 100%; border: 1px solid slategray; color: teal; border-spacing: 0; border-collapse: collapse;"
! style="background: #454545; border: 1px solid #434343;" | Title
|-
|
{| class="mw-collapsible mw-collapsed" width="100%"
! colspan="3" style="background: #656575;" | H-Group 1
|-
! width="25%" rowspan="2" style="background: #757585;" | V-Group 1
! width="15%" style="background: #858585;" | Sub-Group 1
| Content
|-
! width="15%" style="background: #858585;" | Sub-Group 2
| Content
|}
|-
|
{| class="mw-collapsible mw-collapsed" width="100%"
! colspan="3" style="background: #656575;" | H-Group 2
|-
! width="25%" rowspan="2" style="background: #757585;" | V-Group 2
! width="15%" style="background: #858585;" | Sub-Group 1
| Content
|-
! width="15%" style="background: #858585;" | Sub-Group 2
| Content
|}
|}

Here is the result of the code:

Title
H-Group 1
V-Group 1 Sub-Group 1 Content
Sub-Group 2 Content
H-Group 2
V-Group 2 Sub-Group 1 Content
Sub-Group 2 Content

Parser Functions

Here is the example of the navigation box done with parser functions:

{| style="width: 100%; border: 1px solid green;"
! colspan="2" style="background: seagreen; border: 1px solid seagreen;" | Title
|-
{{#if:{{{content<includeonly>|</includeonly>}}} |
! width="25%" style="background: lime;" {{!}} Group 1
{{!}} {{{content|Content}}}
{{!}}-
}}
{{#if:{{{content2<includeonly>|</includeonly>}}} |
! width="25%" style="background: lime;" {{!}} Group 2
{{!}} {{{content2|Content}}}
{{!}}-
}}
|}

Here is the result of the code:

Title
Group 1 Content
Group 2 Content

Collapsible Navboxes with Parser Functions

This is the collapsible navigation box used with parser functions. This is one of the most difficult steps in this tutorial. Here is the example of these navboxes:

Type 1

{| class="mw-collapsible mw-collapsed" style="width: 100%; border: 1px solid gold;"
! colspan="2" style="background: yellow; border: 1px solid yellow;" | Title
|-
{{#if:{{{content3<includeonly>|</includeonly>}}} |
! width="25%" style="background: orange;" {{!}} Group 1
{{!}} {{{content3|Content}}}
{{!}}-
}}
{{#if:{{{content4<includeonly>|</includeonly>}}} |
! width="25%" style="background: orange;" {{!}} Group 2
{{!}} {{{content4|Content}}}
{{!}}-
}}
|}

Here is the result of the code:

Title
Group 1 Content
Group 2 Content

Type 2

{| class="mw-collapsible mw-collapsed" style="border: 1px solid orange; width: 100%; border-spacing: 0;"
! colspan="3" style="background: darkgreen; border: 1px solid darkgreen;" | Title
|-
|{{#if:{{{content5<includeonly>|</includeonly>}}} |
{{{!}} class="mw-collapsible mw-collapsed" style="width: 100%;"
! colspan="3" style="background: teal;" {{!}} V-Group 1
{{!}}-
! rowspan="2" width="25%" style="background: seagreen;" {{!}} H-Group 1
! width="15%" style="background: lime;" {{!}} Sub-Group 1
{{!}} {{{content5|Content}}}
{{!}}-
! width="15%" style="background: lime;" {{!}} Sub-Group 2
{{!}} {{{content5-2|Content}}}
{{!}}-
{{!}}}
}}
{{#if:{{{content6<includeonly>|</includeonly>}}} |
{{{!}} class="mw-collapsible mw-collapsed" style="width: 100%;"
! colspan="3" style="background: teal;" {{!}} V-Group 2
{{!}}-
! rowspan="2" width="25%" style="background: seagreen;" {{!}} H-Group 2
! width="15%" style="background: lime;" {{!}} Sub-Group 1
{{!}} {{{content6|Content}}}
{{!}}-
! width="15%" style="background: lime;" {{!}} Sub-Group 2
{{!}} {{{content6-2|Content}}}
{{!}}-
{{!}}}
}}
|}

Here is the result of the code:

Title
V-Group 1
H-Group 1 Sub-Group 1 Content
Sub-Group 2 Content
V-Group 2
H-Group 2 Sub-Group 1 Content
Sub-Group 2 Content

Type 3

{| class="mw-collapsible mw-collapsed" style="width: 100%; border: 1px solid red; border-spacing: 0;"
! style="background: firebrick; border: 1px solid firebrick;" | Title
|-
|{{#if:{{{content7<includeonly>|</includeonly>}}} |
{{{!}} class="mw-collapsible mw-collapsed" style="width: 100%; border-spacing: 0;"
! style="background: maroon;" colspan="2" {{!}} Group 1
{{!}}-
{{!}} {{#if:{{{subgroup1<includeonly>|</includeonly>}}} |
{{{!}} class="mw-collapsible mw-collapsed" style="width: 100%;"
! style="background: tomato;" {{!}} Sub-Group 1
{{!}}-
{{!}} {{{subgroup1|{{{content7}}}}}}
{{!}}}
}}
{{!}} {{#if:{{{subgroup2<includeonly>|</includeonly>}}} |
{{{!}} class="mw-collapsible mw-collapsed" style="width: 100%;"
! style="background: tomato;" {{!}} Sub-Group 2
{{!}}-
{{!}} {{{subgroup2|{{{content7-2}}}}}}
{{!}}}
}}
{{!}}-
}}
{{!}}}
|}

Here is the result of the code:

Title
Group 1
Sub-Group 1
{{{content7}}}
Sub-Group 2
{{{content7-2}}}

CSS

For people who wants to style the navigation box with CSS, this is the right section. You must have class="navbox" on your table for the CSS to work. Here the CSS for the navigation box:

.navbox {
    border: 1px solid orange;
    width: 100%;
}
 
.navbox tr:first-child > th {
    border: 1px solid navy;
    background: navy;
}
 
.navbox tr th {
    background: cadetblue;
}

You must insert the code to your wiki's MediaWiki:Wikia.css, and/or your MediaWiki:Common.css.

Conclusion

Some of the navigation boxes are easy, and some of them are hard. This blog is beneficial to the users who need assistance with navigation box. If you have any questions, ideas, and/or feedback, feel free to comment on this blog.


This blog is created by Ultimate Dark Carnage

Also on Fandom

Random Wiki