Template:SubpageNav - Revision history

Anthony: Fixed nav showing all projects (hopefully)

2026-04-05T04:38:16Z

Fixed nav showing all projects (hopefully)

← Older revision		Revision as of 04:38, 5 April 2026
Line 1:		Line 1:
	<templatestyles src="Template:SubpageNav/styles.css" />		<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 ==		== 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.		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.

Anthony: Add for Visual Editor Usage.

2026-03-23T08:30:04Z

Add <templatedata> for Visual Editor Usage.

← Older revision		Revision as of 08:30, 23 March 2026
Line 2:		Line 2:
	<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="{{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>
	== SubpageNav ==		== 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>		<pre>
	{{SubpageNav}}		{{SubpageNav}}
	</pre>		</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 ===		=== With an Icon ===
Line 17:		Line 17:
	</pre>		</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>		<pre>
	{{SubpageNav\|		{{SubpageNav\|
Line 28:		Line 28:

	=== Parameters ===		=== 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 ===		=== Technical Notes ===
	* Styles: [[Template:SubpageNav/styles.css]]		* 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>		</noinclude>

Anthony: Changed
element to div, since nav is not allowed.

2026-03-23T06:43:57Z

Changed <nav> element to div, since nav is not allowed.

← Older revision		Revision as of 06:43, 23 March 2026
Line 1:		Line 1:
	<templatestyles src="Template:SubpageNav/styles.css" />		<templatestyles src="Template:SubpageNav/styles.css" />
	<div class="subpage-nav-wrapper">		<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>
	<~~nav~~ class="subpage-nav" 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>
	</~~nav~~>
	</div><noinclude>
	== SubpageNav ==		== 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 for any wiki page. Works on root pages and any depth of subpage. Auto-populates all subpages with full dropdown support for nested paths.

Anthony: Fixes to major bugs - Rewrite

2026-03-23T06:21:15Z

Fixes to major bugs - Rewrite

@@ 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>
 </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!
 </noinclude>

Anthony: Trying to simply the template to only need "{{SubpageNav}}"

2026-03-22T12:29:41Z

Trying to simply the template to only need "{{SubpageNav}}"

← Older revision		Revision as of 12:29, 22 March 2026
Line 7:		Line 7:
	</div>		</div>
	<div class="subpage-nav-links">		<div class="subpage-nav-links">
	{{{1\|}}}		{{#if:{{{1\|}}}
			\| {{{1}}}
			\| <div class="subpage-auto-list">{{Special:PrefixIndex/{{{root\|{{FULLPAGENAME}}}}}/ \|stripprefix=1}}</div>
			}}
	</div>		</div>
	</div>		</div>
	</div><noinclude>		</div><noinclude>
	== SubpageNav ==		== 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>		<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>		</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>		</noinclude>

Anthony: Changing format to work with a style page and gadget

2026-03-22T12:24:06Z

Changing format to work with a style page and gadget

@@ 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">

Anthony: Created page with "
'''Project Navigation''' {{Special:PrefixIndex/{{FULLPAGENAME}}/ |stripprefix=1}}
"

2026-03-22T11:07:08Z

Created page with "<div class="project-nav-box" style="border: 1px solid #ccc; padding: 10px; background: #f9f9f9;"> '''Project Navigation''' {{Special:PrefixIndex/{{FULLPAGENAME}}/ |stripprefix=1}} </div>"

New page

<div class="project-nav-box" style="border: 1px solid #ccc; padding: 10px; background: #f9f9f9;">
'''Project Navigation'''
{{Special:PrefixIndex/{{FULLPAGENAME}}/ |stripprefix=1}}
</div>