cogAdd an expandable top menu panel easily customizable to display a main summary
CategoryUI Extension
Developed by

Pascal Bastien

Active Installs49
1 Votes
LicenseGNU Lesser General Public License 2.1

Installable with the Extension Manager


Provides an application to display a customizable and expandable top menu panel.
To fill the menu content simply create children pages with naming convention.
When this extension is installed, a standard user can customize easily the menu by creating pages and filling links entries (bulletted list).

See a menu behavour example:


Extension content

This extension is completed with 2 tabs and a few links, but you are invited to modify them and add another tabs.

Customize your menu

The menu documentation is displayed in CustomExtension.TopPanelMenu.Top panel menu documentation.WebHome page.

Important elements of menu to add and/or modify are:

  • tabs (Tab-xx)
    and the expanded menu, when clicking on a tab, displays:
  • one or more columns (Col-xx)
  • and 1 to several links (or text) groups: (Listitem-xx)

All code is in CustomExtension.TopPanelMenu.Content.WebHome and the children pages contain the list of shortcuts (Listitem-xx).

To add a tab in menu (Tab-xx), you have to create a children page, in /CustomExtension/TopPanelMenu/Content/ location, named "Tab-xx" (xx is usually a number to sort tabs) and the page title, the tab label to displayed.

To add a column (Col-xx) in the expanded menu, you have to create a children page, in /CustomExtension/TopPanelMenu/Content/Tab-xx/ location, named "Col-xx" (xx to sort columns). The title does not matter here  eg CustomExtension.TopPanelMenu.Content.Tab-01.Col-01.WebHome page.

To add a shortcut group ( Listitem-xx ), simply create a children page of /CustomExtension/TopPanelMenu/Content/Tab-xx/Col-xx/WebHome with the name "Listitem-xx" ( xx to sort groups) and the page title, the title of the links group, eg CustomExtension.TopPanelMenu.Content.Tab-01.Col-01.Listitem-01.WebHome

Finally links are added to this last page as a bulleted list.

To delete a links group, a column or a tab, simply delete the page concerned and its childrens pages.

If you want move a group of links, a column or a tab, just move the page and its childrens pages (uncheck redirection) taking care to move it to the correct location ( tree: Content-> Tab- xx-> Col-xx-> Listitem-xx ) and name the page correctly: Tab-xx, Col-xx, Listitem-xx

To navigate in the different pages to create / modify the menu, it is wise to use the breadcrumb.

Here is the correspondence between the name of the page and the menu displayed.

tested on

  • Xwiki 9.11.4
  • Xwiki 10.11.3

Prerequisites & Installation Instructions

  • import TopPanelMenu-v1.0.xar extension file
  • edit /skins/flamingo/global.vm xwiki package file
    include these 5 lines just before foreach ( instruction:
## Include custom top panel menu
#if ($xcontext.user != 'XWiki.XWikiGuest' && $doc!="CustomExtension.TopPanelMenu.Content.WebHome") ## displayed only when a user is log on
 #foreach ($uix in $services.uix.getExtensions('org.xwiki.platform.template.header.after', {'sortByParameter': 'order'}))
  • after a refresh of xwiki in your browser, you can see this 2 examples Tab in the menu:
  • now you can customize your menu.

This application is composed by:

  • the application root: CustomExtension.ToppanelMenu
    • Main summary, the summary table (displayed in the menu and in a flat way)
    • Menu content, location of menu content, aka all children page (Tab-xx,Col-xx,Listitem-xx)
    • Style, location of CSS styling
      • Flat, CSS styling of the menu in flat way
      • NavBar, CSS styling of the expandable menu
    • Top panel menu documentation, displayed menu documentation
    • Translations, menu translation

Get Connected