Page History

h1. Right-aligned Menu Items

*{excerpt}This tutorial explains how to create right-aligned menu items...{excerpt}*

h2. Overview

This feature requires Theme Builder 2.0 or above.

Items on the menu bar are all left aligned by default, with each item appearing after the next:

{menubar}
{menuitem}{menulink:home}Home{menulink}{menuitem}
{menuseparator}
{menuitem}{menulink:rss}RSS Feed Builder{menulink}{menuitem}
{menuitem}[Contact Us|ADAPTAVIST:Contact Us]{menuitem}
{menubar}

However, there may be times when you want to right-align some menu items, for example let's move the "Contact Us" item to the right:

{menubar}
{menuitem}{menulink:home}Home{menulink}{menuitem}
{menuseparator}
{menuitem}{menulink:rss}RSS Feed Builder{menulink}{menuitem}
{menuseparator:class=spacer menuniq disabled}
{menuitem}[Contact Us|ADAPTAVIST:Contact Us]{menuitem}
{menubar}

This can be achieved as follows...

h2. Step 1 - Adding some CSS

(i) This step is not required for Theme Builder 3.0 and above as the CSS is now part of the theme. If you're using Theme Builder 3.0 or above, skip to Step 2.

The first thing we need to do is add a bit of CSS to the "Custom CSS" area in the theme configuration screen:

{code}
/* Stop menu items wrapping */
div.dynarch-horiz-menu table tr td {
 white-space: nowrap;
}

/* Provide support for menu spacers */
div.dynarch-horiz-menu table tr td.spacer {
 width: 100%;
}
div.dynarch-horiz-menu table tr td.spacer div {
 display:none;
}
{code}

(We'll probably include this CSS by default in future versions of Builder but for now you have to add it in manually)

h2. Step 2 - Adding a spacer menu item

Now that we've added the CSS, we need to add a special form of the [menuseparator macro] to our menu:

{code}
{menuseparator:class=spacer disabled}
{code}

It defines a two classes as follows:

* {{spacer}} - this invokes the CSS we added in Step 1 and causes the separator item to be 100% of the remaining available space in the menu bar, effectively pushing everything after it to the right side of the menu.
* disabled - this tells the menu that the spacer can't be clicked (it's an inactive part of the menu).

For the example shown earlier on this page, the following notation would be used:

{code}
{menubar}
{menuitem}{menulink:home}Home{menulink}{menuitem}
{menuseparator}
{menuitem}{menulink:rss}RSS Feed Builder{menulink}{menuitem}
{menuseparator:class=spacer disabled}
{menuitem}[Contact Us|ADAPTAVIST:Contact Us]{menuitem}
{menubar}
{code}

You can only use this once in the menu - all menu items that appear after it will be right-aligned.

h2. See Also

* [menuseparator macro]
* [menubar macro]
* [menuitem macro]
* [menulink macro]