The .zen.menu page allows you to create menu items in your Zen site or space. Using a bullet list, you can add items as dropdown lists or panels.

The appearance of your menu depends on how you brand your site/space. For information on branding, see the Zen Branding Guide.

Click the tabs below to learn more about creating menus in Zen.

To access Menu settings, complete the following procedures.

  1. Access the site or space settings using the procedures from the Configure Your Zen Settings page.
  2. Click the Click here to view and edit the Menu link.

    Menu Link in a Space

    When using the site default for the Menu, this link forwards you to the Site Settings page in the Administration Console. From this page, click the Click here to view and edit the Menu link to access the master.

  3. The .zen.menu page opens.

With Zen, the menu is simply a bullet list, which you create in the editor, just like you would any list on a page. Each item in the list can be a link or plain text. If you do not add a link to a menu item, it serves as a dropdown header. You can create dropdown menu items in a list or panel.

Note! Dropdown Links

Be sure to select actual pages (vs. spaces) when linking menu items (even for space home pages) to ensure Zen highlights the proper tab.

On a .zen.menu page, a simple nested list will result in a basic pull down (secondary level) menu. 

You can get fancy, though, and add more complex drop-down menu 'panels'. (These are a great place to add images as well.)

  1. Use the Section Menu to insert a section after the main menu.

  2. Add a list of links. 
    1. Looking for multiple columns in your panel? Use the Confluence editor layout tools (these work great in Zen Sections!). Or, use the Zen Wrap Macro for detailed design control.
  3. Now, in this new section, use the Section Designer to set the 'title' field to match the text displayed in the menu tab where you'd like the drop menu panel to appear. (Zen will match up the title with the menu text.)

That's it!

You can do this either as an included image in the section (perhaps in one of the columns), or as a background image to the section, again using the Section Designer.

You can selectively hide menu items based on user permissions. To do so, simply wrap the menu item with the restrict macro.

Use the simple-children macro to auto-generate menu items.  The simple-children macro is a Zen-specialized children macro -- it will add links to all children pages of a specified parent in a way that is sensitive to drafts and page numbering.

 


Zen has been tested with sub-menus 4 or 5 levels deep, but nesting menus this deeply is not recommended, for usability reasons.  Deeply nested menus are difficult to navigate on any computer, but especially from smaller screens (such as a hand-held device or small notebook computer).


Please read Broken Links and Images on Zen Pages to ensure your menus work properly.


Be sure to select actual pages (vs. spaces) when linking menu items (even for space home pages) to ensure Zen highlights the proper tab.

If you are seeing more than one menu item 'highlighted' as current, check to be sure that the pages your menu items point to are not children of each other.

When you create a page, Confluence selects the page you are on when you click "add page" as the parent of the new page, so it can be easy to get your pages in this state.

To fix this, just go to Browse Pages (in the Toolbar under the Gear/Configuration Menu) and click on TREE to view the pages in a Page Tree (visual) view. Then, just drag the pages so that they are peer pages, rather than children of each other.

Quick Tip

 A quick way to see your current page within the space's page tree: simply select "View in Hierarchy" under the page menu in the toolbar.


If you are having trouble with jumpy dropdowns (secondary level) menus, have a look at the POSITION setting for your Pull Down menu (scroll down in the Brand Designer wizard to find this option.)

The Drop Menu Position pixel value needs to be adjusted depending upon the height of your header, as well as the positioning of your overall menu. Try adjusting one or two pixels up or down then check to see if the hover/click action resolves.