2 - Menu Customisation

The menus are customised to make them easier to use and also allow space-level and user-level customisation...

Obviously, we need to start with the menubar macro which wraps the rest of the menu notation and turns it in to an active menu on-screen.

{menubar:id=mainmenu}

... rest of menu goes here ...

{menubar}

The menu notation is put in to the navigation panel, rather than the more usual menu panel, as we're using the menu panel to optionally display a banner message throughout the entire site.

We'll discuss each of the top-level menus in turn...

My

Inside the menubar macro the first menu, for logged in users at least, is the "My" menu:

{show-to:group=confluence-users}{menuitem}{approve-relationships:FRIENDSHIP.FRIEND}{menuicon:flag_red}{approve-relationships}{menuitem}
 {menu}{compound-menuitem:home|space=My|flat=true|caption=_My|accesskey=2}
 {compound-menuitem:userspace|icon=user1_earth|caption=Personal Space|checkexists=true}
 {compound-menuitem:home|space=My|icon=presentation|caption=Personal Dashboard}
 {menuseparator}
 {menuitem}{menuicon:users2}{browse-connections:user=@self}Friends{browse-connections}{menuitem}
 {menuitem}{menuicon:user1_time}{browse-connections:waiting|user=@self}Unconfirmed Friends{browse-connections}{menuitem}
 {menuitem}{menuicon:flag_red}{approve-relationships:FRIENDSHIP.FRIEND}Approve friend requests...{approve-relationships}{menuitem}
 {menuseparator}
 {compound-menuitem:history|icon=document_time|caption=Recently viewed pages...}
 {menuseparator}
 {compound-menuitem:profile|icon=vcard|caption=Preferences...}
{menu}{show-to}

We've used the show-to macro above so that only logged in users will see the "My" menu. Where possible we've used the compound-menuitem macro to link to standard features within Confluence such as the users' personal space, view history and profile, etc.

We've also used several features of our Community Bubbles plugin so that users can access some of the social networking features we've started to provide on the site. The Community Bubbles plugin provide several macros that output links to these features and we've wrapped those links in the menuitem macro to incorporate them in to the menu.

Note: This menu assumes you've got a space with a key of "My".

Home

The next menu is the "Home" menu. As the number of spaces on our site has grown, we found ourselves spending more time navigating to our favourite spaces and wanted a way to quickly access those spaces from anywhere in the site - we solved this problem as follows:

{menu}{compound-menuitem:home|flat=true|caption=_Home|accesskey=1}
 {compound-menuitem:favouritespace|caption=%add% space bookmark}
 {menuseparator}
 {wikimenu}{my-favourite-spaces:@self|output=list}{wikimenu}
 {menuseparator}
 {compound-menuitem:dashboard|icon=folder_view|caption=All spaces...|accesskey=3}
{menu}

The first item on the menu allows the user to toggle the space as favourite.

The list of favourite spaces is then output directly in to the menu by the my-favourite-spaces macro (from the Community Bubbles plugin).

At the bottom of the menu we output a link to the dashboard so that people can always get to the full list of spaces if desired.

Space-level menu items

If you look at our website and user guide spaces, you'll see menu items specific to those spaces.

We could have implemented this by creating additional layouts and hard-coding the additional items in to it, however this would have resulted in an ever-increasing number of layouts making ongoing maintenance increasingly difficult.

To solve this problem we decided to allow chunks of menu notation to be imported from the space itself as follows:

{builder-show:page=Space Menu}{menuseparator}
{wikimenu}{import:Space Menu}{wikimenu}{builder-show}

If there is a page within the space called "Space Menu" it will be imported in to the menu. If the page contains a list of links they will be converted in to menu items.

View and Edit Menus

We decided to retain the standard top-level View and Edit menus as we've grown accustomed to them, as have our site visitors. However, we once again made several changes to the default View and Edit menus...

{menuseparator}
{viewmenu}
{builder-show:group=adaptavist-staff}{editmenu}{builder-show}
{menuseparator}

The first change was to hide the Edit menu from view. It contains quite a lot of menu items which are generally only used by Adaptavist. By hiding the menu we not only improve performance of the site but we also simplify the menu for normal users.

We then decided to massively simplify our View menu - most of the links in the default menu won't be needed as we're providing alternate ways of depicting them elsewhere.

The view menu was edited using the Menu Shortcut Macros options on the Menus Tab.

Contact menu

We wanted to ensure that there were links to our contact and support pages regardless of where you are in the site so we next added the Contact menu as shown below:

{menu}{compound-menuitem:wikipage|page=Contact|space=ADAPTAVIST|caption=_Contact|accesskey=4|flat=true}
 {compound-menuitem:wikipage|page=Support Desk|space=ADAPTAVIST|caption=Support Desk}
 {menuseparator}
 {compound-menuitem:wikipage|page=Contact Us|space=ADAPTAVIST|caption=Contact Us}
{menu}

Right-aligned menu items

The remaining items on the menu needed to be shoved over to the right, which is done as follows:

{menuseparator:class=spacer disabled}

Anything that appears after that menuseparator will appear on the right side of the menu. The classes specified in the separator are what causes it to behave differently from the normal separators.

Log in, Log out, Sign up

We obviously need to allow users to sign up for an account, log in and log out. Normally these links are hidden away in the view menu, but we wanted to make them more obvious...

{compound-menuitem:login|icon=user1_into|caption=Log in|accesskey=5}
{compound-menuitem:signup|icon=user1_add|caption=Sign up|accesskey=6}
{compound-menuitem:logout|icon=door2|caption=Log out|accesskey=5}
{menuseparator}

One of the neat things about the menu system and it's macros is that non-relevant links are automatically hidden. As such we don't need to worry about hiding the "sign up" and "log in" links for logged in users - Theme Builder knows they are not relevant and hides them.

Export Options

Next, we wanted to include some export options - a very large portion of the public facing part of our site contains user guides, documentation and other content that people will often want in PDF or Word format. In addition, there are some export options we use internally...

{compound-menuitem:exportPDF|icon=pdfdoc|class=shrink-width|tooltip=Export to Acrobat (.pdf)...}
{compound-menuitem:exportWord|icon=word|class=shrink-width|tooltip=Export to MS Word (.doc)...}
{compound-menuitem:exportMail|icon=document_into|caption=Export|tooltip=Export to Wiki page...}
{compound-menuitem:printableView|icon=printer|class=shrink-width|tooltip=Printer-friendly version}
{menuseparator}

Again, these links are usually tucked away in the View menu but we wanted to put them in a more easily accessible location.

Most of the links only show an icon and have an associated class (shrink-width) used for some design fudging which we'll discuss more in 4 - CSS.

The exportMail link, however, rarely appears so we wanted it to be highly visible when it does - it's the only export link in this area of the menu to show a caption.

User Interest

Finally, we wanted to provide some quick links for marking content as favourite and watching content:

{compound-menuitem:favourite|class=shrink-width|tooltip=Toggle favourite}
{watch-menu:class=shrink-width}
 {compound-menuitem:watchpage|caption=%watch% this %page%}
 {compound-menuitem:watchspace|caption=%watch% entire space}
{watch-menu}

The watch-menu macro displays an eye which lights up whenever you are either watching the current page or the entire space (or both). This allows you to see at a glance if the current content is being watched (regardless of how) whilst allowing fine-grained control from the two links contained within it.