Template:SubpageNav: Difference between revisions

Latest revision as of 04:38, 5 April 2026

SubpageNav

A compact, minimal horizontal navigation bar. Works on root pages and any depth of subpage. Auto-populates all subpages with full dropdown support for nested paths.

Basic Usage

Drop this at the top of any project or tutorial page:

{{SubpageNav}}

Works on the root page and any subpage depth. On Example Project/About/More Details the nav correctly shows Example Project as the brand and lists all of its subpages.

With an Icon

{{SubpageNav|icon=emotes-face-smile-big}}

Manual List

Pass a bulleted wikitext list as the first parameter. Nesting with ** creates dropdown menus:

{{SubpageNav|
* [[My Project/Overview|Overview]]
** [[My Project/Overview/Details|Details]]
* [[My Project/Gallery|Gallery]]
}}

Parameters

1: Optional manual wikitext list. If omitted, auto-populates via Special:PrefixIndex.
icon: Icon filename without File: prefix or .png extension.
root: Override the root page (defaults to SubpageNav).
name: Override the brand label in the nav bar.

Technical Notes

Styles: Template:SubpageNav/styles.css
Dropdown & nesting: MediaWiki:Gadget-subpagenav.js

Adds a compact horizontal subpage navigation bar. Auto-detects all subpages and builds dropdown menus for nested paths. Works correctly from any depth of subpage.

Template parameters[Edit template data]
This template prefers inline formatting of parameters.
Parameter		Description	Type	Status
Manual link list	`1`	Optional. A bulleted wikitext list of links. Nesting with ** creates dropdown menus. If omitted, subpages are auto-detected.	Content	optional
Icon	`icon`	Icon filename without File: prefix or .png extension (e.g. emotes-face-smile-big).	String	optional
Root page	`root`	Override the root page used for the brand link and subpage lookup. Defaults to {{ROOTPAGENAME}}.	Page name	optional
Display name	`name`	Override the brand label shown in the nav bar. Defaults to the root page name.	String	optional

@@ Line 1: / Line 1: @@
 <templatestyles src="Template:SubpageNav/styles.css" />
-<div class="subpage-nav-wrapper"><div class="subpage-nav" role="navigation" aria-label="{{ROOTPAGENAME}} navigation"><div class="subpage-nav-brand">{{#if:{{{icon|}}}|[[File:{{{icon}}}.png|20px|link={{{root|{{ROOTPAGENAME}}}}}]]|}}<span class="subpage-nav-title">[[{{{root|{{ROOTPAGENAME}}}}}|{{{name|{{ROOTPAGENAME}}}}}]]</span></div><div class="subpage-nav-links">{{#if:{{{1|}}}| {{{1}}}|<div class="subpage-auto-list">{{Special:PrefixIndex/{{{root|{{ROOTPAGENAME}}}}}/ |stripprefix=1}}</div>}}</div></div></div><noinclude>
+<div class="subpage-nav-wrapper"><div class="subpage-nav" role="navigation" aria-label="{{#titleparts:{{PAGENAME}}|2}} navigation"><div class="subpage-nav-brand">{{#if:{{{icon|}}}|[[File:{{{icon}}}.png|20px|link={{{root|{{#titleparts:{{PAGENAME}}|2}}}}}]]|}}<span class="subpage-nav-title">[[{{{root|{{#titleparts:{{PAGENAME}}|2}}}}}|{{{name|{{#if:{{#titleparts:{{PAGENAME}}|1|2}}|{{#titleparts:{{PAGENAME}}|1|2}}|{{PAGENAME}}}}}}}]]</span></div><div class="subpage-nav-links">{{#if:{{{1|}}}| {{{1}}}|<div class="subpage-auto-list">{{Special:PrefixIndex/{{{root|{{#titleparts:{{PAGENAME}}|2}}}}}/ |stripprefix=1}}</div>}}</div></div></div><noinclude>
 == SubpageNav ==
-A compact, minimal horizontal navigation bar for any wiki page. Works on root pages and any depth of subpage. Auto-populates all subpages with full dropdown support for nested paths.
+A compact, minimal horizontal navigation bar. Works on root pages and any depth of subpage. Auto-populates all subpages with full dropdown support for nested paths.
-=== Basic Usage (auto-populate) ===
+=== Basic Usage ===
-Drop this at the top of your page — it finds its own root and lists all subpages automatically:
+Drop this at the top of any project or tutorial page:
 <pre>
 {{SubpageNav}}
 </pre>
-Works on the root page AND any subpage. On <code>Example Project/About/More Details</code> the nav will still correctly show <code>Example Project</code> as the brand and list all of its subpages.
+Works on the root page and any subpage depth. On <code>Example Project/About/More Details</code> the nav correctly shows <code>Example Project</code> as the brand and lists all of its subpages.
 === With an Icon ===
@@ Line 17: / Line 17: @@
 </pre>
-=== Manual List (advanced) ===
+=== Manual List ===
-Pass a bulleted wikitext list as the first unnamed parameter to fully control the links. Nesting with <code>**</code> creates dropdown menus:
+Pass a bulleted wikitext list as the first parameter. Nesting with <code>**</code> creates dropdown menus:
 <pre>
 {{SubpageNav|
@@ Line 28: / Line 28: @@
 === Parameters ===
-* <code>1</code> — Optional manual wikitext list. If omitted, auto-populates via Special:PrefixIndex.
+; <code>1</code> : Optional manual wikitext list. If omitted, auto-populates via Special:PrefixIndex.
-* <code>icon</code> — Icon filename without <code>File:</code> prefix or extension (e.g. <code>emotes-face-smile-big</code>).
+; <code>icon</code> : Icon filename without <code>File:</code> prefix or <code>.png</code> extension.
-* <code>root</code> — Override the root page name (defaults to <code>{{ROOTPAGENAME}}</code>).
+; <code>root</code> : Override the root page (defaults to <code>{{ROOTPAGENAME}}</code>).
-* <code>name</code> — Override the display label in the brand area (defaults to root page name).
+; <code>name</code> : Override the brand label in the nav bar.
 === Technical Notes ===
 * Styles: [[Template:SubpageNav/styles.css]]
-* Dropdown & nesting behaviour: [[MediaWiki:Gadget-subpagenav.js]]
+* Dropdown & nesting: [[MediaWiki:Gadget-subpagenav.js]]
-* The gadget hides the raw PrefixIndex output on load and replaces it with a clean nested list. No flash of unstyled content.
-* The currently-viewed page is highlighted in the nav and its parent dropdowns are opened automatically.
+<templatedata>
+{
+    "description": "Adds a compact horizontal subpage navigation bar. Auto-detects all subpages and builds dropdown menus for nested paths. Works correctly from any depth of subpage.",
+    "params": {
+        "1": {
+            "label": "Manual link list",
+            "description": "Optional. A bulleted wikitext list of links. Nesting with ** creates dropdown menus. If omitted, subpages are auto-detected.",
+            "type": "content",
+            "required": false
+        },
+        "icon": {
+            "label": "Icon",
+            "description": "Icon filename without File: prefix or .png extension (e.g. emotes-face-smile-big).",
+            "type": "string",
+            "required": false
+        },
+        "root": {
+            "label": "Root page",
+            "description": "Override the root page used for the brand link and subpage lookup. Defaults to {{ROOTPAGENAME}}.",
+            "type": "wiki-page-name",
+            "required": false
+        },
+        "name": {
+            "label": "Display name",
+            "description": "Override the brand label shown in the nav bar. Defaults to the root page name.",
+            "type": "string",
+            "required": false
+        }
+    },
+    "format": "inline"
+}
+</templatedata>
 </noinclude>