Template:SubpageNav: Difference between revisions

Revision as of 12:29, 22 March 2026

           SubpageNav

styles.css

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.

Auto-Populate Usage

Just drop this at the top of your page:

{{SubpageNav}}

It will automatically fetch all subpages. The Javascript gadget will parse paths containing slashes (like Guides/Basic) and automatically turn them into dropdown menus!

@@ Line 7: / Line 7: @@
          </div>
          <div class="subpage-nav-links">
-             {{{1|}}}
+             {{#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 with deeply nested pages. Supports dropdown menus via standard wikitext bulleted lists.
+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.
-Styles are loaded from [[Template:SubpageNav/styles.css]] and mobile toggling is handled by [[MediaWiki:Gadget-subpagenav.js]].
+=== Auto-Populate Usage ===
+Just drop this at the top of your page:
-=== Usage ===
 <pre>
-{{SubpageNav
+{{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>
+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!
-=== 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>