Alessandro Dotti Contra

Linux/Unix DevOps


TT2 menu template

This is a basic menu template. It could actually be simpler, but I decided to take advantage of blocks to increase readability.

So let's start with an array of hashes, which will describe the menu items:

	items = [
		{description = "Item 1", uri = "page1.html"}
		{description = "Item 2", uri = "page2.html"}
		{description = "Item 3", uri = "page3.html"}
	]

then define a simple block for hyperlinks:

	[% BLOCK link %]
		<a
			class="[% class or "none" %]"
			target="[% openin or "_self" %]"
			href="[% uri %]"
		>
		[% name %]
		</a>
	[% END %]

The link block just defined supports some options: we can specify a custom class, which defaults to none, and a target, which defaults to _self to open the link in the same browser window.

Finally, here's the menu template itself:

	<nav>
	<ul class="menu">
	[% FOREACH item = items %]
		[%- IF item.name == active -%]
			[%- class = "active" -%]
		[%- ELSE -%]
			[%- class = "none" -%]
		[%- END -%]
		<li>
			[% PROCESS link
				name = item.name
				uri = item.uri
				class = class
			%]
		</li>
	[% END %]
	</ul>
	</nav>

The menu is rendered as an unordered list; all the styling is done by the style sheet. If we want to highlight the current item we can use the active parameter to pass the template the name of the item; a special class will be attached to the link.