The TopMenuSkin adds pulldown menus to the PatternSkin.



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"}%"}% %ICON{menu-down}%]]
      * [[%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 %ICON{menu-down}%]]
      * [[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 "TWiki.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 %ICON{menu-down}%]]
      * [[WebNotify][Subscribe]]
      * [[WebStatistics][Statistics]]
   * [[WebSearch][%ICON{searchtopic}% Search %ICON{menu-down}%]]
      * [[WebSearchAdvanced][Advanced search]]
      * [[SearchHelp][Search help]]

Renders as:

NOTE: The pulldown menus only work if the TWiki:Plugins/JQueryPlugin is installed and enabled.

Read-Only Skin Mode

This skin and the PatternSkin support a read-only mode. This is mainly useful if you have TWiki application pages or dashboards where you do not want regular users to change content. The read-only mode is enabled with a READONLYSKINMODE preferences setting set to 1. Details in PatternSkinCustomization#ReadOnlySkinMode.

CSS and JavaScript

This section defines the CSS and JavaScript used by the TopMenuSkin; View Raw to see the source. Some additional CSS is defined in templates/vewi.topmenu.tmpl

Create 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 twiki/templates/view.topmenu.tmpl. Details in PatternSkinCustomization and PatternSkinCssCookbook.

The top bar TopMenuSkinTopBar (with menu bar, logo and search boxes) can be cloned using same topic name and customized per web.

Add a Sidebar

If you want a sidebar in addition to the top bar, define a WEBLEFTBAR setting with the name of the topic to include as the sidebar. This can be done in a WebPreferences for the whole web or in a topic. Example:

Add Breadcrumbs

The TopMenuSkin incorporates "you are here" breadcrumbs in the pulldown menu, such as "Home > Main web > P > P > View. The P's indicate the parent topic(s). If you prefer the old verbose breadcrumbs you can enable it with the following preferences setting:


Fixed Menu-Bar

The FIXEDTOPMENU preferences setting determines if the menu-bar is fixed or auto-hidden. If set to on, the menu-bar is always visible at the top, regardless of the window scroll position. If off, the menu-bar hides when scrolled, and can be shown by hovering over menu-start.png - the gray TWiki icon.

  • Set FIXEDTOPMENU = off


This skin is pre-installed. TWiki administrators can upgrade the skin as needed on the TWiki server.

  • Download the ZIP file from the Skin homepage (see below)
  • Unzip in your twiki installation directory
  • Install TWiki:Plugins/JQueryPlugin and enable it using configure (if not done already)
  • To turn on the skin, write in Main.TWikiPreferences:
    * Set SKIN = topmenu, pattern
  • Test if installed
  • Note on upgrading existing TWiki:
  • Note on using this skin on TWiki-5.1.1 and older:
  • 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 TWikibug:Item6424 (to add the format parameter feature).
    • This skin depends on TWiki 5.0 specific feature %ADDTOHEAD{}% to add style sheets to the HTML head section. Apply patch TWiki:Support.SID-01117 to inline style sheets.
    • Apply patch TWikibug:Item6430 so that Edit and Attach buttons point to the current topic instead of TopMenuSkinTopBar.
    • Apply patch TWikibug:Item6438 so that breadcrumb links point to the current web instead of the TWiki web.
    • Attach menu-down.gif to TWikiDocGraphics.
    • Attach twiki-gray.gif to TWikiDocGraphics.
    • If you have more than 30 webs, apply TWikibug:Item6429 to limit the number of webs shown in the "Home" menu.

Skin Info

  • Set SHORTDESCRIPTION = Skin with pulldown menus in top bar
  • Sponsor: Twiki, Inc.

Skin Author: TWiki:Main.PeterThoeny
Copyright: © 2010-2013, TWiki:Main.PeterThoeny,
© 2010-2013 TWiki:TWiki.TWikiContributor
License: GPL (GNU General Public License)
Description: Top-menu skin
Screenshot: Screenshot
Preview: Preview with this topic
Base Name: topmenu,pattern
Skin Version: 2014-08-19
2014-08-19: TWikibug:Item7546: Top bar buttons on top right corner can be customized
2014-06-18: TWikibug:Item7520: Context sensitive tooltip help for Jump box and Search box
2014-05-15: TWikibug:Item7492: Hide top menu in print using hideInPrint CSS class (requires PatternSkin 2014-05-15)
2013-09-28: TWikibug:Item7160: Support verbose breadcrumbs at the top of the page
2013-04-22: TWikibug:Item7151: Change CALC to CALCULATE in bookmark word spacing
2013-03-03: TWikibug:Item7143: Show "Watch" pulldown menu in case TWiki:Plugins.WatchlistPlugin is installed and enabled
2013-02-16: TWikibug:Item7123: Use TWISTY in installation instructions and change history
2012-09-18: TWikibug:Item6936: Pulldown menu closes too early on hover if more than one menu on page
2012-09-18: TWikibug:Item6934: Option for auto-hidden or fixed top menu-bar with FIXEDTOPMENU preferences setting
2012-09-06: TWikibug:Item6925: Show TWiki help link twiki-help.gif in top-menu bar
2012-09-04: TWikibug:Item6918: New WEBLEFTBAR setting to show a sidebar
2011-07-28: TWikibug:Item6780: Usability: Link to UserList topic instead of TWikiUsers
2011-07-10: TWikibug:Item6725: Change global package variables from "use vars" to "our"
2011-07-01: TWikibug:Item6763: Fix for WYSIWYG editor corrupting system pages
2011-06-14: TWikibug:Item6751: Fix for cutoff buttons in header when using IE7 -- TWiki:Main.BradleyMellen
2011-05-18: TWikibug:Item6682: Read-only skin mode with READONLYSKINMODE preferences setting
2011-03-09: TWikibug:Item6659: Customizable web-specific TopMenuSkinTopBar
2011-01-03: TWikibug:Item6628: Minor gradient fix - change action buttons area from plain white to pale gray to align with PatternSkin; adding pale shadow
2010-12-02: TWikibug:Item6614: Always show Register User link in Account menu, regardless of login status
2010-10-03: TWikibug:Item6588: Use gray TWiki icon in top menu bar instead of orange icon
2010-09-23: TWikibug:Item6530: Add ManagingUsers to top menu of TWiki web
2010-08-21: TWikibug:Item6524: Fix for no Account pulldown menu on IE7 Opera browser -- TWiki:Main.MalcolmNeumeyer
2010-06-09: TWikibug:Item6485: Fix banner background image position issue on Safari
2010-06-06: TWikibug:Item6482: XHTML validation fixes; moving CSS to HTML head using ADDTOHEAD variable
2010-06-05: TWikibug:Item6475: Better indication of breadcrumb in top menu using large arrows
2010-05-26: TWikibug:Item6471: Show topic info in tooltip of View menu; show tooltip help in View and Edit menu items; point raw view and print version to actual topic revision
2010-05-20: TWikibug:Item6455: Use %ICON{menu-down}% instead of long img tag in menu-bars
2010-05-01: TWikibug:Item6437: Removed loading of jQuery Javascript library to avoid double load issue; require JQueryPlugin installed and enabled
2010-04-26: TWikibug:Item6435: Doc improvements
2010-04-21: TWikibug:Item6431: Fix hardcoded reference to JQueryPlugin CSS and JS; doc improvements
2010-04-19: TWikibug:Item6413: Initial release (v1.0)
Dependencies: TWiki 4.2 or later; TWiki:Plugins/PatternSkin; TWiki:Plugins/JQueryPlugin
Skin Home:

Related topics: TopMenuSkinDefaultWebTopMenu, TopMenuSkinHomeMenu, TopMenuSkinTopBar, TopMenuSkinTopicMenu, WebTopMenu, _default.WebTopMenu, Main.WebTopMenu, Sandbox.WebTopMenu, Trash.WebTopMenu, TWikiSkins, TWikiSkinBrowser, UserDocumentationCategory, AdminDocumentationCategory

Edit | Attach | Watch | Print version | History: r8 < r7 < r6 < r5 < r4 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r8 - 2014-08-19 - TWikiContributor
This site is powered by the TWiki collaboration platform Powered by PerlCopyright © 1999-2016 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback
Note: Please contribute updates to this topic on at TWiki:TWiki.TopMenuSkin.