RANGER navboxes

From Support Wiki
(Redirected from Navigation boxes)
Jump to navigation Jump to search

Please note, the support wiki version of RANGER (here) is a development version and may occasionally have some minor regressions. The version on the Default Loadout Wiki should be stable. If RANGER does not support your use case, please contact support!

RANGER (Responsively Arranged Navboxes Guiding Easy Reading) navboxes are standardized navboxes designed by westgrass, Karmaworks, and Mr Pie 5.

Last-update dates (versions on the support wiki may not be stable releases, see the version on the Default Loadout Wiki):

Why RANGER navboxes?

RANGER's primary draw is that it's responsive! Gone are the days of display:none; navboxes on mobile!

If you already have navboxes, RANGER will almost certainly be backwards-compatible, meaning all you need to do is install the RANGER code, and then your existing navboxes will continue to work! RANGER is compatible with:

  • Wikipedia's navbox module (including the {{navbox|child functionality)
  • Most Gamepedia navboxes
  • Fandom's NavboxBuilder

The recommended syntax is similar to Wikipedia's navboxes, but we prefer list1_1 instead of list1={{Navbox|child.

Examples

Patch notes

If the last time your RANGER code was edited is before the most recent date, you may need to re-import the indicated files.

  • No patch notes yet!

Add or update RANGER navboxes on your wiki

Most new wikis made after October 2024 will come with RANGER pre-installed, so you do not need to worry about this! But if you ever need to update, follow these same instructions.

There are 3 files you will need:

If you added the latter file above as a gadget, you will also need to add the following code to Mediawiki:Gadgets-definition. If you copied that file to Mediawiki:Common.css/Vector.css as recommended, you can skip this part. 

* rangerNavboxesStyles[ResourceLoader|default|hidden|type=styles]|navbox.css

How to use RANGER navboxes

  1. Create a template for your navbox, for example {{Example RANGER navbox 1}}.
  2. Populate this code at your template: 
    {{Navbox
| template = <template_title>

| title = 
| striped = even

| group1 = 
| list1 = 

| group2 = 
| list2 = 

}}<noinclude>{{documentation}}</noinclude>
    • Note, | striped = even is optional. If you specify it, RANGER will apply CSS so you can distinguish adjacent rows from each other.
  3. Set title to whatever text you want to appear at the top of the navbox.
  4. Set group1 to whatever text you want to appear at the left of the navbox's first row.
  5. On the blank line below | list1 =, start a * or # list of links.
  6. Repeat steps 4 and 5 for group2 and list2. You can also keep going with group3 and list3, group4 and list4, etc.
  7. Save your new template! You should now be done, enjoy your new navbox!

Sub-lists

RANGER navboxes support sub-lists, which are lists within lists. Historically, these were defined with complex nested templates (i.e. |list1={{navbox|child|...}}), and while RANGER does support that syntax for backward compatibility, it also has a much simpler solution.

Take a look at the following navbox (also demonstrated at {{Navbox}}):

Notice how Weapons is further divided into Swords and Bows? In this example, Swords and Bows are sub-lists.

The following code snippet is what powers that group: 

| group2 = Weapons

| group2.1 = Swords
| list2.1 =
* Wooden Sword
* Rusted Sword
* Steel Sword

| group2.2 = Bows
| list2.2 =
* Shortbow
* Crossbow
* Longbow

To define a sub-list, we start by defining the label with a . and a number in a second parameter. In this case, group2.1 is the label for the first sub-list (.1) in the second group (group2). Then, we define the list itself by following the same syntax with list2.1. Finally, we define our second sub-list in the same way by using group2.2 and list2.2.

This simple parameter format makes the navbox code easy to read without having to worry about nested templates. Plus, this can be extended even further with sub-sub-lists! We could define group2.1.1 for Wooden Swords and group2.1.2 for Steel Swords. You can travel as many layers as you want, but before you make a sub-sub-sub-sub-list with group2.1.1.1.1, remember that the navbox still needs to be readable for both your users and search engines. Navbox responsibly!

Controlling the collapsible

By default, all RANGER navboxes are expanded and collapsible, meaning that they start "opened" (expanded) every time the page loads and users can temporarily "close" (collapse) them if they want to.

This behavior can be controlled when defining a navbox by using the state parameter. For example, setting | state = collapsed will make the navbox start collapsed when the page loads, allowing users to expand them if they so wish. On the other hand, setting | state = plain or | state = off will disable the functionality entirely; the navbox will be expanded when the page loads and users can't collapse it.

Keep in mind that collapsed content (in collapsed navboxes, tabber tabs, etc.) is sometimes considered less "valuable" by search engine algorithms; there is a balance to be struck with regards to making a navbox collapsed by default. Usually, this is done when there are multiple navboxes on a single page, or if a navbox has a lot of links (which may necessitate splitting the navbox into smaller navboxes).

Expanded only on template page

To show the navbox expanded on the template page but then collapse it when placed on articles, add the following line:

| state = <includeonly>collapsed</includeonly>

Page-specific collapsible

To set a default collapsible state that can be overridden on a page-by-page basis, add the following line, replacing DEFAULTSTATE with the desired default state (collapsed, expanded, or plain/off):

| state = {{{state<includeonly>|DEFAULTSTATE</includeonly>}}}

Then, when you add the navbox to a page, simply transclude it as {{Example RANGER navbox 1}} when you want the default behavior, or {{Example RANGER navbox 1|state=NEWSTATE}} when you want a different state, replacing NEWSTATE with the desired state.

Additional functionality

The documentation at {{Navbox}} lists every available parameter, including how to define sections and style the navbox. See the examples for demonstrations on some of these additional parameters.

Forking policy

If you significantly fork the base RANGER navbox code (i.e. make significant edits to the Lua code), we will not provide continued support for your navboxes. You are welcome to do this!! Just know that you're on your own if you do.

If you think RANGER is missing some functionality that you require, please ask for help in the wiki.gg Discord server.

Retrieved from "https://support.wiki.gg/wiki/RANGER_navboxes?oldid=8949"