warning This is an experimental version of TopMenuSkin.

support To configure your Foswiki to install from this repository, modify the {ExtensionsRepositories} setting in your lib/LocalSite.cfg like this:
$Foswiki::cfg{ExtensionsRepositories} = 'Foswiki.org=(http://foswiki.org/Extensions/,http://foswiki.org/pub/Extensions/);Local=(http://translate.foswiki.org/Extensions/Testing/,http://translate.foswiki.org/pub/Extensions/Testing/)';

Read more about configuring Extension repositories


The TopMenuSkin adds pulldown menus to the PatternSkin.

Screen Shot


Tob Bar and Menu Structure

NOTE: The skin is designed to incorporate the "you are here" breadcrumb into the pulldown menus:
"Home" menu => "Web" menu => List of parent topics, if any (shown as "P"s) => Current topic ("View" menu).

Web-specific Menu-Bars

The TopMenuSkinDefaultWebTopMenu defines the default menu structure used in any web. A WebTopMenu topic in a web can redefine the default menu structure. If the WebTopMenu topic is missing in a web, create one with content of _default.WebTopMenu and customize it. Bullets must be of format [[...][...]] or <a href="...">...</a>, and may not contain any text next to the link.

To preserve the "you are here" breadcrumb, it is important to add additional pulldown menus after the INCLUDE of %SYSTEMWEB%.TopMenuSkinTopicMenu. The top level menu-bar should have this structure:

  • INCLUDE of %SYSTEMWEB%.TopMenuSkinHomeMenu
  • Current Web menu
  • INCLUDE of %SYSTEMWEB%.TopMenuSkinTopicMenu
  • Additional pulldown menu(s) as needed (optional)

Example WebTopBar menu structure with additional "Bugs" pulldown menu:
   * [[%BASEWEB%.%HOMETOPIC%][<img src="%ICONURL{web-bg}%" border="0" alt="" width="16" height="16" style="background-color:%WEBBGCOLOR%" /> <nop>%MAKETEXT{"[_1] Web" args="%BASEWEB{format="$current"}%"}% %PUBURL%/%SYSTEMWEB%/TopMenuSkin/menu-down.gif]]
      * [[%SCRIPTURLPATH{"view"}%/%BASEWEB%/WebCreateNewTopic?topicparent=%BASETOPIC%][ %ICON{"newtopic"}% %MAKETEXT{"Create New Topic"}%]]
      * [[%BASEWEB%.WebTopicList][ %ICON{"index"}% %MAKETEXT{"Index"}%]]
      * [[%BASEWEB%.WebSearch][ %ICON{"searchtopic"}% %MAKETEXT{"Search"}%]]
      * [[%BASEWEB%.WebChanges][ %ICON{"changes"}% %MAKETEXT{"Changes"}%]]
      * [[%BASEWEB%.WebNotify][ %ICON{"notify"}% %MAKETEXT{"Notifications"}%]]
      * [[%BASEWEB%.WebRss][ %ICON{"feed"}% %MAKETEXT{"RSS Feed"}%]]
      * [[%BASEWEB%.WebStatistics][ %ICON{"statistics"}% %MAKETEXT{"Statistics"}%]]
      * [[%BASEWEB%.WebPreferences][ %ICON{"wrench"}% %MAKETEXT{"Preferences"}%]]
   * [[BugTracker][%ICON{bug}% Bugs %PUBURL%/%SYSTEMWEB%/TopMenuSkin/menu-down.gif]]
      * [[NewReport][Create bug report]]
      * [[OpenBugs][Open bugs]]
      * [[ConfirmedBugs][Confirmed bugs]]
      * [[FixedBugs][Fixed bugs]]

Use Menu-Bars in Topics

A menu-bar can be added anywhere in a topic:
  • Include the "System.TopMenuSkin" topic - this pulls in the CSS and JavaScript needed for the menu-bar.
  • Create a nested bullet list with links:
    • The top level bullets define the menu-bar items. Bullets with/without links are supported.
    • Second level bullets define the pulldown options within a menu-bar item.
      • A second level bullet must contain exactly one link (format [[...][...]] or <a href="...">...</a>) without any text next to the link.
    • Third level bullets are not supported.
  • Enclose the bullet list with a <div class="twTopMenuTab"> tag.

<div class="twTopMenuTab">
   * [[WebHome][%ICON{home}% Home %PUBURL%/%SYSTEMWEB%/TopMenuSkin/menu-down.gif]]
      * [[WebNotify][Subscribe]]
      * [[WebStatistics][Statistics]]
   * [[WebSearch][%ICON{searchtopic}% Search %PUBURL%/%SYSTEMWEB%/TopMenuSkin/menu-down.gif]]
      * [[WebSearchAdvanced][Advanced search]]
      * [[SearchHelp][Search help]]

Renders as:

NOTE: The pulldown menus only work if the Foswiki:Extensions.JQueryPlugin is installed and enabled.

CSS and JavaScript

This section defines the CSS and JavaScript. (View Raw to see the source.)


Note: You do not need to install anything on the browser to use this skin. The following instructions are for the administrator who installs the skin on the server where Foswiki is running.

  • Download the ZIP file from the Skin homepage (see below)
  • Unzip TopMenuSkin.zip in your Foswiki installation directory
  • Install Foswiki:Extensions.JQueryPlugin and enable it using configure (if not done already)
  • To turn on the skin, write in %SITEPREFERENCES%:
    * Set SKIN = topmenu, pattern
  • Test if installed
  • Note on upgrading existing Foswiki:
  • Note on using this skin on TWiki 4.2 and 4.3:
    • This skin depends on TWiki 5.0 specific feature %WEB{format="$current"}% to show the current web in the Web menu. To use this skin on TWiki 4.2 or 4.3, remove the parameter from the WEB variable (to show only %WEB%), or apply patch TWiki:Item6424 (to add the format parameter feature).
    • Apply patch TWikibug:Item6430 so that Edit and Attach buttons point to the current topic instead of TopMenuSkinTopBar.
    • If you have more than 30 webs, apply TWikibug:Item6429 to limit the number of webs shown in the "Home" menu.

Creating your own look

This skin is based on PatternSkin, and the same rules for customization apply.

The TopMenuSkin disables the sidebar and activates a different top bar in foswiki/templates/view.topmenu.tmpl. Details in PatternSkinCustomization and PatternSkinCssCookbook.

Skin Info

  • Set SHORTDESCRIPTION = Skin with pulldown menus in top bar

Skin Author: TWiki:Main/PeterThoeny, ported to Foswiki by Foswiki:Main.WillNorris
Copyright: © 2010 Foswiki contributors; © 2010 TWiki:Main/PeterThoeny, Twiki, Inc.
License: GPL (GNU General Public License)
Description: Top-menu skin
Screenshot: Screenshot
Preview: Preview with this topic
Base Name: topmenu,pattern
Skin Version: 2010-09-27 (v1.9)
Change History:  
2010-09-27: ported to Foswiki -- Foswiki:Main.WillNorris
Home: http://foswiki.org/Extensions/TopMenuSkin
Support: http://foswiki.org/Support/TopMenuSkin

Related topics: WebTopMenu, TopMenuSkinDefaultWebTopMenu, TopMenuSkinHomeMenu, TopMenuSkinTopBar, TopMenuSkinTopicMenu, System.Skins, SkinBrowser, UserDocumentationCategory, AdminDocumentationCategory

I Attachment Action Size Date Who Comment
TopMenuSkin.md5md5 TopMenuSkin.md5 manage 156 bytes 27 Sep 2010 - 22:06 WillNorris  
TopMenuSkin.sha1sha1 TopMenuSkin.sha1 manage 180 bytes 27 Sep 2010 - 22:06 WillNorris  
TopMenuSkin.tgztgz TopMenuSkin.tgz manage 159 K 27 Sep 2010 - 22:06 WillNorris  
TopMenuSkin.zipzip TopMenuSkin.zip manage 170 K 27 Sep 2010 - 22:05 WillNorris  
TopMenuSkin_installerEXT TopMenuSkin_installer manage 5 K 27 Sep 2010 - 22:06 WillNorris  
Topic revision: r1 - 27 Sep 2010, WillNorris
The copyright of the content on this website is held by the contributing authors, except where stated elsewhere. See Copyright Statement. Creative Commons License    Legal Imprint    Privacy Policy