Template:SubpageNav: Difference between revisions

Revision as of 06:21, 23 March 2026

</nav>

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.

Basic Usage (auto-populate)

Drop this at the top of your page — it finds its own root and lists all subpages automatically:

{{SubpageNav}}

Works on the root page AND any subpage. On Example Project/About/More Details the nav will still correctly show Example Project as the brand and list all of its subpages.

With an Icon

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

Manual List (advanced)

Pass a bulleted wikitext list as the first unnamed parameter to fully control the links. 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 extension (e.g. emotes-face-smile-big).
root — Override the root page name (defaults to SubpageNav).
name — Override the display label in the brand area (defaults to root page name).

Technical Notes

Styles: Template:SubpageNav/styles.css
Dropdown & nesting behaviour: 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.

@@ Line 1: / Line 1: @@
 <templatestyles src="Template:SubpageNav/styles.css" />
 <div class="subpage-nav-wrapper">
-    <div class="subpage-nav">
+<nav class="subpage-nav" aria-label="{{ROOTPAGENAME}} navigation">
-        <div class="subpage-nav-brand">
+<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>
-            {{#if:{{{icon|}}}|[[File:{{{icon}}}.png|20px|link={{{root|{{BASEPAGENAME}}}}}]]|}}
+</nav>
-            <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 for any wiki page. 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 (auto-populate) ===
-Just drop this at the top of your page:
+Drop this at the top of your page — it finds its own root and lists all subpages automatically:
 <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. 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.
+=== With an Icon ===
+<pre>
+{{SubpageNav|icon=emotes-face-smile-big}}
+</pre>
+=== Manual List (advanced) ===
+Pass a bulleted wikitext list as the first unnamed parameter to fully control the links. 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 extension (e.g. <code>emotes-face-smile-big</code>).
+* <code>root</code> — Override the root page name (defaults to <code>{{ROOTPAGENAME}}</code>).
+* <code>name</code> — Override the display label in the brand area (defaults to root page name).
+=== Technical Notes ===
+* Styles: [[Template:SubpageNav/styles.css]]
+* Dropdown & nesting behaviour: [[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.
 </noinclude>