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-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>
-    <div class="subpage-nav">
-        <div class="subpage-nav-brand">
-            {{#if:{{{icon|}}}|[[File:{{{icon}}}.png|20px|link={{{root|{{BASEPAGENAME}}}}}]]|}}
-            <span class="subpage-nav-title">[[{{{root|{{BASEPAGENAME}}}}}|{{{name|{{BASEPAGENAME}}}}}]]</span>
-        </div>
-        <div class="subpage-nav-links">
-            {{#if:{{{1|}}}
-            | {{{1}}}
-            | <div class="subpage-auto-list">{{Special:PrefixIndex/{{{root|{{FULLPAGENAME}}}}}/ |stripprefix=1}}</div>
-            }}
-        </div>
-    </div>
-</div><noinclude>
 == SubpageNav ==
-A compact horizontal navigation bar for projects and tutorials. Can be populated manually with a bulleted list, or left entirely blank to auto-populate based on subpages.
+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.
-=== Auto-Populate Usage ===
+=== Basic Usage ===
-Just drop this at the top of your page:
+Drop this at the top of any project or tutorial page:
 <pre>
 {{SubpageNav}}
 </pre>
-It will automatically fetch all subpages. The Javascript gadget will parse paths containing slashes (like <code>Guides/Basic</code>) and automatically turn them into dropdown menus!
+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 ===
+<pre>
+{{SubpageNav|icon=emotes-face-smile-big}}
+</pre>
+=== Manual List ===
+Pass a bulleted wikitext list as the first parameter. Nesting with <code>**</code> creates dropdown menus:
+<pre>
+{{SubpageNav|
+* [[My Project/Overview|Overview]]
+** [[My Project/Overview/Details|Details]]
+* [[My Project/Gallery|Gallery]]
+}}
+</pre>
+=== Parameters ===
+; <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 <code>.png</code> extension.
+; <code>root</code> : Override the root page (defaults to <code>{{ROOTPAGENAME}}</code>).
+; <code>name</code> : Override the brand label in the nav bar.
+=== Technical Notes ===
+* Styles: [[Template:SubpageNav/styles.css]]
+* Dropdown & nesting: [[MediaWiki:Gadget-subpagenav.js]]
+<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>