Template:SubpageNav: Difference between revisions

Revision as of 12:24, 22 March 2026

           SubpageNav

SubpageNav

A compact horizontal navigation bar for projects and tutorials with deeply nested pages. Supports dropdown menus via standard wikitext bulleted lists.

Styles are loaded from Template:SubpageNav/styles.css and mobile toggling is handled by MediaWiki:Gadget-subpagenav.js.

Usage

{{SubpageNav
| name = My Project
| root = Projects/My Project
| icon = applications-system
| 1 = 
* [[Projects/My Project|Overview]]
* [[Projects/My Project/Install|Installation]]
* Guides
** [[Projects/My Project/Guides/Basic|Basic Setup]]
** [[Projects/My Project/Guides/Advanced|Advanced Configuration]]
* [[Projects/My Project/API|API Reference]]
}}

Parameters

name: The display name of the project shown on the far left.
root: The root page link (where clicking the name takes you).
icon: Optional icon filename (without .png).
1: The unnamed parameter containing your standard bulleted list. Nested bullets (**) automatically become dropdown menus!

@@ Line 1: / Line 1: @@
-<div class="project-nav-box" style="border: 1px solid #ccc; padding: 10px; background: #f9f9f9;">
+<templatestyles src="Template:SubpageNav/styles.css" />
-'''Project Navigation'''
+<div class="subpage-nav-wrapper">
-{{Special:PrefixIndex/{{FULLPAGENAME}}/ |stripprefix=1}}
+    <div class="subpage-nav">
-</div>
+        <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">
+            {{{1|}}}
+        </div>
+    </div>
+</div><noinclude>
+== SubpageNav ==
+A compact horizontal navigation bar for projects and tutorials with deeply nested pages. Supports dropdown menus via standard wikitext bulleted lists.
+Styles are loaded from [[Template:SubpageNav/styles.css]] and mobile toggling is handled by [[MediaWiki:Gadget-subpagenav.js]].
+=== Usage ===
+<pre>
+{{SubpageNav
+| name = My Project
+| root = Projects/My Project
+| icon = applications-system
+| 1 =
+* [[Projects/My Project|Overview]]
+* [[Projects/My Project/Install|Installation]]
+* Guides
+** [[Projects/My Project/Guides/Basic|Basic Setup]]
+** [[Projects/My Project/Guides/Advanced|Advanced Configuration]]
+* [[Projects/My Project/API|API Reference]]
+}}
+</pre>
+=== Parameters ===
+; <code>name</code> : The display name of the project shown on the far left.
+; <code>root</code> : The root page link (where clicking the name takes you).
+; <code>icon</code> : Optional icon filename (without .png).
+; <code>1</code> : The unnamed parameter containing your standard bulleted list. Nested bullets (<code>**</code>) automatically become dropdown menus!
+[[Category:Layout Templates]]
+</noinclude>