How to Create a Navbox

This page is under going major revision

What are Navboxes?

Navboxes are nothing more than a table saved as a template. Navboxes are usually at the bottom of the article and usually only contain links to topics or locations. See the example at the bottom of this article.

How to create a Navbox

Again an Navbox is a table. If you know how to create tables in Wikitext or HTML, it is not difficult. If you do not know Wikitext or HTLM, you will probably need someone who does to help you. If you would like to learn these two programs, see Wikitext or HTML Programming. Neither of these programming languages are difficult.

Step One - Create the table

• We are going to assume you know a little Wikitext and HTML in this tutorial. We will begin by creating a simple table. The coding will be displayed in both Wikitext and HTML side by side so can see the difference.
• It is recommended that you create infobox tables in HTML as there fewer problems as you will see.
• We will be creating a navbox as shown below. User:Ccsmith/sandbox/navbox

Links to {{{name}}} - related articles

• It does not look like much because you still have fill it in with the links or other information that you may want to display for your readers.

Here is the coding in HTML and Wikitext for the above Navbox:

Wikitext

HTML

{| style="width:100%; border:1px solid blue; border-collaspe:separate; border-spacing:5px; " {{!}}- {{!}} colspan="2" style="text-align:center; background-color:{{{title background color}}};{{!}} "Links to {{{name}}} - related articles {{!}}- {{#if:{{Ifempty|{{{group title1|}}}}}| {{!}} style="text-align:right; width:15%; background-color:{{{left column background color}}};{{!}} "'''{{{group title1}}}'''|}} {{#if:{{Ifempty|{{{group title1-item1|}}}}}| {{!}} style="text-align:left; background-color:{{{right column background color}}}; "> {{#if:{{{group title1-item1|}}}|{{{group title1-item1}}}{{·}}|}} {{#if:{{{group title1-item2|}}}|{{{group title1-item2}}}{{·}}|}} {{#if:{{{group title1-item3|}}}{{·}}|{{{group title1-item3}}}{{·}}|}} {{#if:{{{group title1-item4|}}}|{{{group title1-item4}}}{{·}}|}} {{#if:{{{group title1-item5|}}}|{{{group title1-item5}}}{{·}}|}}|}} |}

<table style="width:100%; border:1px solid blue; border-collaspe:separate; border-spacing:5px; "> <tr> <td colspan="2" style="text-align:center; background-color:{{{title background color}}}; ">Links to {{{name}}} - related articles </td> </tr> <tr> {{#if:{{Ifempty|{{{group title1|}}}}}| <td style="text-align:right; width:15%; background-color:{{{left column background color}}}; ">'''{{{group title1}}}'''|}} </td> {{#if:{{Ifempty|{{{group title1-item1|}}}}}| <td style="text-align:left; background-color:{{{right column background color}}}; "> {{#if:{{{group title1-item1|}}}|{{{group title1-item1}}}{{·}}|}} {{#if:{{{group title1-item2|}}}|{{{group title1-item2}}}{{·}}|}} {{#if:{{{group title1-item3|}}}{{·}}|{{{group title1-item3}}}{{·}}|}} {{#if:{{{group title1-item4|}}}|{{{group title1-item4}}}{{·}}|}} {{#if:{{{group title1-item5|}}}|{{{group title1-item5}}}{{·}}|}}|}}</td> </tr> </table>

Create the table

• The coding is scrunched up so let us spread it out a bit and break down the table coding.
• First step is to create the table that will become part of the template:

Wikitext	HTML
{| style=" width:100%; border:1px solid blue; border-collaspe:separate; border-spacing:5px; "	<table style=" width:100%; border:1px solid blue; border-collaspe:separate; border-spacing:5px; ">
{{!}}- {{!}} colspan="2" style=" text-align:center; background-color:{{{title background color}}}; {{!}} "Links to {{{name}}} - related articles	<tr> <td colspan="2" style=" text-align:center; background-color:{{{title background color}}}; ">Links to {{{name}}} - related articles </td> </tr>
{{!}}- {{#if:{{Ifempty|{{{group title1|}}}}}| {{!}} style=" text-align:right; width:15%; background-color:{{{left column background color}}}; {{!}} "'''{{{group title1}}}'''|}}	<tr> {{#if:{{Ifempty|{{{group title1|}}}}}| <td style=" text-align:right; width:15%; background-color:{{{left column background color}}}; "> '''{{{group title1}}}'''|}} </td>
{{#if:{{Ifempty|{{{group title1-item1|}}}}}| {{!}} style="text-align:left; background-color:{{{right column background color}}}; "> {{#if:{{{group title1-item1|}}}|{{{group title1-item1}}}{{·}}|}} {{#if:{{{group title1-item2|}}}|{{{group title1-item2}}}{{·}}|}} {{#if:{{{group title1-item3|}}}|{{{group title1-item3}}}{{·}}|}} {{#if:{{{group title1-item4|}}}|{{{group title1-item4}}}{{·}}|}} {{#if:{{{group title1-item5|}}}|{{{group title1-item5}}}{{·}}|}} |}}	<td> {{#if:{{Ifempty|{{{group title1-item1|}}}}}| <td style="text-align:left; background-color:{{{right column background color}}}; "> {{#if:{{{group title1-item1|}}}|{{{group title1-item1}}}{{·}}|}} {{#if:{{{group title1-item2|}}}|{{{group title1-item2}}}{{·}}|}} {{#if:{{{group title1-item3|}}}|{{{group title1-item3}}}{{·}}|}} {{#if:{{{group title1-item4|}}}|{{{group title1-item4}}}{{·}}|}} {{#if:{{{group title1-item5|}}}|{{{group title1-item5}}}{{·}}|}} |}} </td> </tr>
|}	</table>

• Notice the table width is set at 100%.
• Second, the code for the border. You can make anything you want.
• Third, the "border-collaspe" coding is for creating a 5 pixel space between the cells of the table.

Coding for title

Wikitext

HTML

{| style="width:100%; border:1px solid blue; border-collaspe:separate; border-spacing:5px; " {{!}}- {{!}} colspan="2" style="text-align:center; background-color:{{{title background color}}};{{!}} "Links to {{{name}}} - related articles {{!}}- {{#if:{{Ifempty|{{{group title1|}}}}}| {{!}} style="text-align:right; width:15%; background-color:{{{left column background color}}};{{!}} "'''{{{group title1}}}'''|}} {{#if:{{Ifempty|{{{group title1-item1|}}}}}| {{!}} style="text-align:left; background-color:{{{right column background color}}}; "> {{#if:{{{group title1-item1|}}}|{{{group title1-item1}}}{{·}}|}} {{#if:{{{group title1-item2|}}}|{{{group title1-item2}}}{{·}}|}} {{#if:{{{group title1-item3|}}}{{·}}|{{{group title1-item3}}}{{·}}|}} {{#if:{{{group title1-item4|}}}|{{{group title1-item4}}}{{·}}|}} {{#if:{{{group title1-item5|}}}|{{{group title1-item5}}}{{·}}|}}|}} |}

<table style="width:100%; border:1px solid blue; border-collaspe:separate; border-spacing:5px; "> <tr> <td colspan="2" style="text-align:center; background-color:{{{title background color}}}; ">Links to {{{name}}} - related articles </td> </tr> <tr> {{#if:{{Ifempty|{{{group title1|}}}}}| <td style="text-align:right; width:15%; background-color:{{{left column background color}}}; ">'''{{{group title1}}}'''|}} </td> {{#if:{{Ifempty|{{{group title1-item1|}}}}}| <td style="text-align:left; background-color:{{{right column background color}}}; "> {{#if:{{{group title1-item1|}}}|{{{group title1-item1}}}{{·}}|}} {{#if:{{{group title1-item2|}}}|{{{group title1-item2}}}{{·}}|}} {{#if:{{{group title1-item3|}}}{{·}}|{{{group title1-item3}}}{{·}}|}} {{#if:{{{group title1-item4|}}}|{{{group title1-item4}}}{{·}}|}} {{#if:{{{group title1-item5|}}}|{{{group title1-item5}}}{{·}}|}}|}}</td> </tr> </table>

Coding for group names

Wikitext

HTML

{| style="width:100%; border:1px solid blue; border-collaspe:separate; border-spacing:5px; " {{!}}- {{!}} colspan="2" style="text-align:center; background-color:{{{title background color}}};{{!}} "Links to {{{name}}} - related articles {{!}}- {{#if:{{Ifempty|{{{group title1|}}}}}| {{!}} style="text-align:right; width:15%; background-color:{{{left column background color}}};{{!}} "'''{{{group title1}}}'''|}} {{#if:{{Ifempty|{{{group title1-item1|}}}}}| {{!}} style="text-align:left; background-color:{{{right column background color}}}; "> {{#if:{{{group title1-item1|}}}|{{{group title1-item1}}}{{·}}|}} {{#if:{{{group title1-item2|}}}|{{{group title1-item2}}}{{·}}|}} {{#if:{{{group title1-item3|}}}{{·}}|{{{group title1-item3}}}{{·}}|}} {{#if:{{{group title1-item4|}}}|{{{group title1-item4}}}{{·}}|}} {{#if:{{{group title1-item5|}}}|{{{group title1-item5}}}{{·}}|}}|}} |}

<table style="width:100%; border:1px solid blue; border-collaspe:separate; border-spacing:5px; "> <tr> <td colspan="2" style="text-align:center; background-color:{{{title background color}}}; ">Links to {{{name}}} - related articles </td> </tr> <tr> {{#if:{{Ifempty|{{{group title1|}}}}}| <td style="text-align:right; width:15%; background-color:{{{left column background color}}}; ">'''{{{group title1}}}'''|}} </td> {{#if:{{Ifempty|{{{group title1-item1|}}}}}| <td style="text-align:left; background-color:{{{right column background color}}}; "> {{#if:{{{group title1-item1|}}}|{{{group title1-item1}}}{{·}}|}} {{#if:{{{group title1-item2|}}}|{{{group title1-item2}}}{{·}}|}} {{#if:{{{group title1-item3|}}}{{·}}|{{{group title1-item3}}}{{·}}|}} {{#if:{{{group title1-item4|}}}|{{{group title1-item4}}}{{·}}|}} {{#if:{{{group title1-item5|}}}|{{{group title1-item5}}}{{·}}|}}|}}</td> </tr> </table>

Coding for items

Wikitext

HTML

{| style="width:100%; border:1px solid blue; border-collaspe:separate; border-spacing:5px; " {{!}}- {{!}} colspan="2" style="text-align:center; background-color:{{{title background color}}};{{!}} "Links to {{{name}}} - related articles {{!}}- {{#if:{{Ifempty|{{{group title1|}}}}}| {{!}} style="text-align:right; width:15%; background-color:{{{left column background color}}};{{!}} "'''{{{group title1}}}'''|}} {{#if:{{Ifempty|{{{group title1-item1|}}}}}| {{!}} style="text-align:left; background-color:{{{right column background color}}}; "> {{#if:{{{group title1-item1|}}}|{{{group title1-item1}}}{{·}}|}} {{#if:{{{group title1-item2|}}}|{{{group title1-item2}}}{{·}}|}} {{#if:{{{group title1-item3|}}}{{·}}|{{{group title1-item3}}}{{·}}|}} {{#if:{{{group title1-item4|}}}|{{{group title1-item4}}}{{·}}|}} {{#if:{{{group title1-item5|}}}|{{{group title1-item5}}}{{·}}|}}|}} |}

<table style="width:100%; border:1px solid blue; border-collaspe:separate; border-spacing:5px; "> <tr> <td colspan="2" style="text-align:center; background-color:{{{title background color}}}; ">Links to {{{name}}} - related articles </td> </tr> <tr> {{#if:{{Ifempty|{{{group title1|}}}}}| <td style="text-align:right; width:15%; background-color:{{{left column background color}}}; ">'''{{{group title1}}}'''|}} </td> {{#if:{{Ifempty|{{{group title1-item1|}}}}}| <td style="text-align:left; background-color:{{{right column background color}}}; "> {{#if:{{{group title1-item1|}}}|{{{group title1-item1}}}{{·}}|}} {{#if:{{{group title1-item2|}}}|{{{group title1-item2}}}{{·}}|}} {{#if:{{{group title1-item3|}}}{{·}}|{{{group title1-item3}}}{{·}}|}} {{#if:{{{group title1-item4|}}}|{{{group title1-item4}}}{{·}}|}} {{#if:{{{group title1-item5|}}}|{{{group title1-item5}}}{{·}}|}}|}}</td> </tr> </table>

Meaning of each line of the code

• Since navboxes usually extend from one side to the other, we have set the width for our navbox to 100%.
• We have installed a 1 pixel solid blue line around our navbox.
• "border-collaspe:separate; border-spacing:5px means we are placing a 5 pixel space between the boxes in the template. See Cell Separation for more details.
• The title of the navbox has to extend both columns of the navbox so that is coded with the colspan="2" code.
• When you save your navbox be sure include the word "navbox" in the title so people will know what kind of template it is for example: {{template:infobox sample}}.

---

Step Two - Create the template

• Since there is only one way to create a template in the Wiki, we will only show the Wikitext coding:

{{Navbox name |title background color= |left column background color= |right column background color= |name= |group title= |item1= |item2= |item3= |item4= |item5= }}