Tabbed menus for xarpages

Lets say you have a hierarchy of xarpages one level deep. For example, an About page, with a set of child pages. And you want the children to appear on a horizontal tabbed block.

Actually, I haven't tried this with pages more than one level deep. So, first, make the About page an "empty" page, and put the pages you want underneath them.

Create menu block

Create an xarpages menu block, as follows (for example):

• Module / Type : xarpages / menu
• Name: abouttabs
• Title: [empty]
• Instance Template: ;tabs (that's semicolon-t-a-b-s)

press Create Instance, then what I did (your preferences might be different):

• check Hide the root page
• Source of current page: Default - force to use the default page
• Default page: About
• leave other settings at default values

and Update the block definition.

Create tabbed menu templates

Next, copy the file modules/xarpages/blocks/menu.xd to themes/mytheme/modules/xarpages/blocks/menu-tabs.xt, and edit as follows:

• line 19: change reference file="menu" to file="menu-tabs"

Copy the file modules/xarpges/includes/menu.xd to themes/mytheme/modules/xarpages/includes/menu-tabs.xt, and edit as follows:

• line 35: change <ul> to <dl class="xar-tabs">
  
• line 69: change <li> to <dd>
• line 102: change </li> to </dd>
• line 105: change </ul> to </dl>

Create xarpages item template with tab block

Finally add the block to your template. For example, if you have a template mytheme/modules/xarpages/page-html.xt, you might copy it to mytheme/modules/xarpges/page-html-about.xt, add the following line to insert the block

<xar:block instance="abouttabs" />

Then, modify the About page (the parent page) with Item Template set to "about" (references page-html-about.xt). (Status should be "empty"). Press Modify.

That should do it.

This technique uses the default xar-tabs class. Naturally you can override the styles of this class, or substitute a different one.