Sometimes a popup selector menu makes sense for a site design, and as we can expect with our favourite CMS Textpattern there is a tag that perform this function – <txp:popup />.

However, the txp:popup tag does not offer a means of excluding or selecting a particular section or category.

Output from the tag

First, lets take a look at the output from the tag. If we add the tag as-is to our page – <txp:popup /> – this is what we see in the page source:

<form method="get" action="http://yoursite.com/"><div>
Browse<br />
<select name="c" onchange="submit(this.form);">
	<option value="" selected="selected">&nbsp;</option>
	<option value="Category-one">Category One</option>
	<option value="Category-two">Category Two</option>
	<option value="Category-three">Category Three</option>
</select>
<noscript><div><input type="submit" value="Go" /></div></noscript>
</div>
</form>

By default, the tag retrieves all of your categories.

Getting around the lack of a selection/exclusion option

So, how to get around the lack of options for this tag? Quite simple – just copy the output from the tag and enter the categories that you want to display. Like so:

<form method="get" action="http://yoursite.com/"><div>
<h3>Browse our categories</h3>
<select name="c" onchange="submit(this.form);">
	<option value="" selected="selected">&nbsp;</option>
	<option value="Category-one">Category One</option>
	<option value="Category-three">Category Three</option>
</select>
<noscript><div><input type="submit" value="Go" /></div></noscript>
</div>
</form>

Place the code in a form and call it in your page with an <txp:output_form> tag. The upside is you can choose the categories you want to display, the downside is you have to update the form whenever you add/remove a category.

Its a simple tip, but quite useful if you use popop selectors.