Page History

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

h2. Overview

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}
{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:

{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

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 spacer menu item in to our menu. For the example shown earlier on this page, the following notation was used:

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

As you can see, the [menuseparator macro] has been used to include our spacer. It defines a few specific classes as follows:

* spacer - this invokes the CSS we added in Step 1 and causes the separator item to be 100% width, effectively pushing everything after it to the right side of the menu.
* disabled - this tells the menu not to make the spacer clickable

h2. See Also

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