Navinfoboxes

Infoboxes can be a great place to locate important links relating to a page. This is skeleton code for portable infoboxes and associated styling to effectively and simply add link lists to an infobox.

## Introduction

The concepts and code for the navinfobox was first developed by Kjnoren for the Elliott Kay Wiki, which provides several examples of how it can be used in practice.

A Reconsideration of the Navbox as a Portable and Modular Infobox, or the Navinfobox Blog discusses the reasoning and development behind the various elements.

## Constituent elements

Navinfoboxes are built from the following elements:

Pagelists
Simple lists of links, which can be built as templates or embedded in the page.
Navinfoboxes
A portable infobox that can present one or more pagelists.
Conceptbox
A portable infobox containing nothing but pagelists.
CSS
CSS rules that control the presentation of the pagelists in the portable infoboxes.
## Usage recommendations

This method can easily be used to create full-on navbox replacements and place them in portable infoboxes. Don’t do that!

* Limit yourself to the most important links for each individual page or group of pages.
* A pagelist should preferably not contain more than seven or eight elements, and ideally around five.
* Limit the amount of pagelists to two or three per infobox.
* If a link is usually included elsewhere in the infobox, it does not need to be included a second time through pagelists.
* Pagelists need not be bidirectional. Just because a page includes a pagelist does not mean it must or even should be included in it.

Pagelists are very easy to create and the modular nature of the navinfobox concept means that they can easily be adjusted and tailored for individual pages. Their prominent location means they should be reserved for links that are highly pertinent to the page in question.

## Sample infobox code

### Navinfobox code

The navinfobox code is intended to be added to a standard portable infobox, likely at its end. The sample navinfobox can receive up to two pagelists, since it is assumed other links are already included in the box.

```
<infobox>
 <title source="fullname">
 <default>{{#explode:{{PAGENAME}}|(}}</default>
 </title>
 <group name="navgroup">
 <header>Related pages</header>
 <data source="rellist1">
 <label>'''{{{relcaption1}}}'''</label>
 </data>
 <data source="rellist2">
 <label>'''{{{relcaption2}}}'''</label>
 </data>
 </group>
</infobox>

```

### Conceptbox code

The “conceptbox” is intended to contain nothing but pagelists, which is why it can receive up to three pagelists.

```
<infobox type="prefix-concept" layout="stacked">
 <group name="navgroup">
 <title source="title">
 <default>{{#explode:{{PAGENAME}}|(}}</default>
 </title>
 <data source="rellist1">
 <label>'''{{{relcaption1}}}'''</label>
 </data>
 <data source="rellist2">
 <label>'''{{{relcaption2}}}'''</label>
 </data>
 <data source="rellist3">
 <label>'''{{{relcaption3}}}'''</label>
 </data>
 </group>
</infobox>

```

## Sample CSS code

```
/\* Rules for conceptboxes and navgroup \*/
section[data-item-name="navgroup"] .pi-item {
 display: block;
}

.page-content aside.type-prefix-concept h3.pi-data-label,
.page-content section[data-item-name="navgroup"] h3.pi-data-label {
 font-size: 14px;
 text-align: center;
}

.type-prefix-concept h3.pi-data-label b,
section[data-item-name="navgroup"] h3.pi-data-label b {
 font-weight: 700;
}

.page-content aside.type-prefix-concept .pi-data-value,
.page-content section[data-item-name="navgroup"] .pi-data-value,
.page-content section[data-item-name="navgroup"] .pi-data-value li {
 font-size: 14px;
 text-align: center;
}

.type-prefix-concept .pi-data,
section[data-item-name="navgroup"] .pi-data {
 border-top: solid 1px var(--pi-border-color);
 padding-top: 9px;
}

.type-prefix-concept .pi-data:first-of-type,
section[data-item-name="navgroup"] .pi-data:first-child,
section[data-item-name="navgroup"] h2 + .pi-data {
 border-top: none;
}

.type-prefix-concept .pi-data ul,
section[data-item-name="navgroup"] .pi-data ul,
.type-prefix-concept .pi-data ol,
section[data-item-name="navgroup"] .pi-data ol {
 text-align: center;
 margin-left: 0;
}

.type-prefix-concept.portable-infobox .pi-data li,
.type-prefix-concept.portable-infobox .pi-data li ul,
.portable-infobox section[data-item-name="navgroup"] .pi-data li,
.portable-infobox section[data-item-name="navgroup"] .pi-data li ul {
 display: inline;
 margin: 0;
}

.type-prefix-concept .pi-data li:first-child::before,
section[data-item-name="navgroup"] .pi-data li:first-child::before
{
 content: none;
}

.type-prefix-concept .pi-data li::before,
section[data-item-name="navgroup"] .pi-data li::before
{
 content: " · ";
 margin-left: 0.1em;
 margin-right: 0.1em;
}

.type-prefix-concept .pi-data li ul::before,
section[data-item-name="navgroup"] .pi-data li ul::before {
 content: " ( ";
 margin-left: 0.1em;
 margin-right: 0.1em;
}

.type-prefix-concept .pi-data li ul::after,
 .pi-data li ul::after{
 content: " )";
 margin-left: 0.1em;
 margin-right: 0.1em;
}

.page-content .portable-infobox .type-prefix-concept ul ul,
.page-content .portable-infobox section[data-item-name="navgroup"] ul ul {
 padding-left: 0;
}

/\* Margin workaround when a navgroup is first in the infobox \*/
.portable-infobox section[data-item-name="navgroup"]:first-child {
 margin-top: 0;
}
/\* End rules conceptboxes and navgroups \*/

```

## Sample navinfoboxes

The sample navinfoboxes below use inline inclusions of the pagelists, showing off its simple syntax. The pagelists should however preferably be saved as separate templates for easy maintenance and usage on several pages.

```
{{Infobox navgroupskeleton
* First album
** Disc one
** Disc two
** Disc three
* Second album
** Disc one
** Disc two
** Disc three
* Third album
* First member
* Second member
* Third member

}}

```

Presentation with sample CSS applied:

```
{{Infobox conceptskeleton
* First album
* Second album
* Third album
* Fourth album
* Fifth album
* Sixth album
* Seventh album
* Eighth album
* First member
* Second member
* Third member
* Fourth member
* Fifth member
* Sixth member
* Seventh member
* Eighth member
}}

```

Presentation with sample CSS applied: