Page History

h1. Anatomy of Menus

*{excerpt}This tutorial explains the basic structure of menus and how to create them...{excerpt}*

h2. Menu Sections

The menus in {builder} are split in to three sections:

* *Custom Pre-Menu* - these menu items appear _before_ the ??View?? and ??Edit?? menus.
* *View and Edit menus* - these are in-built menus that contain all of the standard {confluence} navigational elements.
* *Custom Post-Menu* - these menu items appear _after_ the ??View?? and ??Edit?? menus.

The standard ??View?? and ??Edit?? menus can be [partially customised|Customising the View and Edit Menus], however you can't make major alterations to them. This is because they contain additional logic that enables and disables items based on the location within a [space|Spaces] (eg. you can't add comments to the site map) and the privileges of the logged in user.

The custom pre- and -post menus, however are completely customisable and we'll cover the basics of defining menus in the remainder of this tutorial...

h2. Custom Menus

The custom menus are constructed using simple [Wiki Markup Editor], more specifically [lists|indents and Lists] and [links].

h3. Buttons on the Menu Bar

The structure of a menus is defined using an ??unordered?? bullet list and the hyperlinks in a menu are defined using, somewhat obviously, links. :)

Here's a quick example:

{noformat}
{menuitem}Home{menuitem}
{menuitem}Builder{menuitem}
{noformat}

If you put that notation in to a page, it would look like this:

{menuitem}Home{menuitem}
{menuitem}Builder{menuitem}

You will notice that nothing is displayed, this is because if a menuitem does not contain a link, it is ignored and removed from the menu. You can make these buttons appear by turning them in to links:

{noformat}
{menuitem}[Home]{menuitem}
{menuitem}[Builder]{menuitem}
{noformat}

Which results in:

{menuitem}[Home]{menuitem}
{menuitem}[Builder]{menuitem}

It should be noted that you can use any type of [link|Links] and also have a different on-screen caption and tooltip if desired, for example:

{noformat}
{menuitem}[Start|Home|Our homepage]{menuitem}
{menuitem}[Adaptavist|http://adaptavist.com|Our website]{menuitem}
{noformat}

Which would give:

{menuitem}[Start|Home|Our homepage]{menuitem}
{menuitem}[Adaptavist|http://adaptavist.com|Our website]{menuitem}

When a linked button on the menu bar is clicked, you will be taken to the location defined by the link.

h3. Pop-Up Menus

As you'll see from the menu bar buttons at the top of this page, most of them display a pop-up menu when the mouse moves over them. To do this, simply increase the indentation of items that you want to move from the menu bar to the pop-up menu:

{noformat}
{menuitem}[Home]{menuitem}
{menu}[Builder]
  {menuitem}[CSS Custom Styles]{menuitem}
  {menuitem}[Installing Builder]{menuitem}
  {menuitem}[Menus]{menuitem}
{menu}
{noformat}

If you put that notation in to a page, it would look like this:

{menuitem}[Home]{menuitem}
{menu}[Builder]
  {menuitem}[CSS Custom Styles]{menuitem}
  {menuitem}[Installing Builder]{menuitem}
  {menuitem}[Menus]{menuitem}
{menu}

h3. Sub-Menus

Just as you increase the indentation to move items from the menu bar to the pop-up menu, you can increase it still further to create sub-menus:

{noformat}
{menuitem}[Home]{menuitem}
{menu}[Builder]
  {sub-menusubmenu}[CSS Custom Styles]
    {menuitem}[Headings CSS]{menuitem}
    {menuitem}[Text Styles CSS]{menuitem}
  {sub-menusubmenu}
  {menuitem}[Installing Builder]{menuitem}
  {menuitem}[Menus]{menuitem}
{menu}
{noformat}

If you put that notation in to a page, it would look like this:

{menuitem}[Home]{menuitem}
{menu}[Builder]
  {sub-menusubmenu}[CSS Custom Styles]
    {menuitem}[Headings CSS]{menuitem}
    {menuitem}[Text Styles CSS]{menuitem}
  {sub-menusubmenu}
  {menuitem}[Installing Builder]{menuitem}
  {menuitem}[Menus]{menuitem}
{menu}

The ??Headings CSS?? and ??Text Styles CSS?? items will now appear on a sub-menu that gets displayed when the mouse is over the ??CSS Custom Styles?? menu item.

You can increase the indentation still further to add sub-menus to sub-menus and so on.

If you don't like typing all the [Wiki Markup Editor], you might consider using [Automated Menu Creation] and let macros do all the work for you!

h3. Menu Spacers

You will have noticed that the menus at the top of this page have spacer bars in them - to create a spacer bar, just use the [Wiki Markup Editor] for a horizontal rule:

{noformat}
{menuitem}[Home]{menuitem}
{menuseparator}
{menuitem}[Builder]{menuitem}
{noformat}

You can add spacers in both the menu bar, pop-up menus and sub-menus.