Custom nested menu

23 January 2014, 14:13

Keywords: link, menu, custom

We will see here how to easily create a mixed nested menu like this one in Textpattern:

Menu (up to you to style it)

Breadcrumb

Solution

To structure the menu, we define the following link-type categories (their nesting can be of any depth):

Menu
|  Services
|  |  Design
|  |  Web
|  Textpattern

Next, we create few (internal or external) links within each category (etc_link_helper is handy for that). Finally, we create a category-type menu form, that will be parsed recursively:

<txp:linklist category='<txp:category />' wraptag="" break="li" />
<txp:category_list type="link" parent='<txp:category />' exclude='<txp:category />' children="0" break="li">
	<txp:category title="1" />
	<txp::menu wraptag="ul" />
</txp:category_list>

And voilà! The menu (let’s store it in a variable) is now obtained with

<txp:variable name="menu">
<txp:category_list type="link" categories="menu" children="0" form="menu" wraptag="ul" break="" />
</txp:variable>

To highlight the current link, pass the menu to etc_query :

<txp:etc_query
	data='<txp:variable name="menu">'
	replace='//a[@href="<txp:etc_url />"]@@class=active'
/>

And if you need a breadcrumb, call

<txp:etc_query
	data='<txp:variable name="menu">'
	query='//a[@href="<txp:etc_url />"]/..'
	replace="a@@class=active"
>
	{ancestor::li&={text()}&raquo;} {a}
</txp:etc_query>

File(s)