From MediaWiki.org
Jump to navigation Jump to search

This page was moved from MetaWiki.
It probably requires cleanup – please feel free to help out. In addition, some links on the page may be red; respective pages might be found at Meta. Remove this template once cleanup is complete.

MediaWiki extensions manual
Crystal Clear action run.svg
Release status: experimental
Description Create pages with "Tabs"
Author(s) Robert Castley
License unknown
Download No link
Translate the MenuTabs extension if it is available at translatewiki.net
Check usage and version matrix.


The extension has been modified to work with any skin/template without modification to any CSS files as the CSS is now embedded into the extension itself


Whilst building our internal Wiki it became apparent to those new to the idea that navigation could be improved upon. A member of my team loved the way that http://www.apple.com top menu navigation system worked i.e. you have a main menu with sub menu items underneath. I was asked as to whether this could be replicated in MediaWiki and so set about the task. The fruits of my labour are detailed below. The credit for the CSS code goes to http://labs.silverorange.com/archives/2004/may/updatedsimple

Robert Castley

Extension Code[edit]

Copy the following code into a file called MenuTabs.php and save this in the extensions directory:

# To activate the extension, include it from your LocalSettings.php
# with: include("extensions/MenuTabs.php");

$wgExtensionFunctions[] = "wfMenuTabs";

$wgExtensionCredits['other'][] = array(
'name' => 'MenuTabs',
'author' => 'Robert Castley',
'description' => 'allows for the creation of a menu navigation bar on each page if desired ');

function menuTabsCSS() {
	global $wgOut;
	$css = <<<eof
<style type="text/css">
#main { border-top: 1px solid #666; clear: both; width: 100%; }
#contents { background: #9aa4b3; border-top: 2em solid #e6f0ff; }
#header { position: relative; width: 100%; height: 2em; width: 45em; }
#header ul#primary { margin: 0; padding: 0; position: absolute; bottom: -1px; left: 20px; width: 45em; }
#header ul#primary li { display: inline; list-style: none; }
#header ul#primary a,#header ul#primary span,#header ul#primary a.current, #header ul#primary strong {
        width: auto; display: block; float: left; padding: 4px 0px; padding-left: 4px;
        padding-right: 4px; margin-top: 1px; margin-right: 2px; text-align: center; font-family: Arial;
        font-size: 85%; text-decoration: none; color: #333; }
#header ul#primary span,#header ul#primary a.current,#header ul#primary a.current:hover, #header ul#primary strong {
        border: 1px solid #666; border-bottom: none; background: #e6f0ff;
        padding-bottom: 6px; padding-left: 4px; padding-right: 4px; margin-top: 0; }
#header ul#primary a { background: #bbc8da; border: 1px solid #AAA; border-bottom: none; }
#header ul#primary a:hover { margin-top: 0; border-color: #666; background: #FFF7CD; padding-bottom: 5px; }
#header ul#secondary { position: absolute; margin: 0; padding: 0; bottom: -1.4em; left: 1px; width: 50em; }
#header ul#secondary li a,#header ul#secondary li span ,#header ul#secondary li strong {
        width: auto; display: block; float: left; padding: 0 5px;
        margin: 0; text-align: center; border: none; border-left: 1px dotted #AAA;
        background: none; }
#header ul#secondary li a { color: #06C; text-decoration: underline; }
#header ul#secondary li a:hover { color: #333; background: transparent; padding: 0 5px; border: none;
        border-left: 1px dotted #AAA; }
#header ul#secondary li a:active { color: #333; font-weight: normal; background: transparent; }
#header ul#secondary li:first-child a, #header ul#secondary li:first-child span { border: none; }

function wfMenuTabs() {
	global $wgParser;
	$wgParser->setHook( "maintab", "renderMainTab" );
	$wgParser->setHook( "subtab", "renderSubTab" );

function renderMainTab( $input ) {
	global $wgOut;
	global $wgTitle;
	global $wgRequest;
	global $wgUser;
	global $wgParser;
	$parserOptions = ParserOptions::newFromUser( $wgUser );
	$parser = & new Parser();
	$item = '';
	$title = $wgRequest->getVal( 'title' );
	$title = preg_replace("/_/", " ", $title);
	$fields = explode("||",$input);
	$prepend = "<div id=\"header\">\n";
	$prepend .= "<ul id=\"primary\">\n";
	foreach ($fields as $field) {
		if ($title == $field) {
			$item .= "<li><span>$field</span></li>\n";
		} else {
			$item .= "<li>$field</li>\n";
	$output = & $parser->parse($item, $wgTitle, $parserOptions);
	$linkoutput = $output->getText();
	return $prepend . $linkoutput;

function renderSubTab( $input ) {
	global $wgOut;
	global $wgTitle;
	global $wgRequest;
	global $wgUser;
	global $wgParser;
	$parserOptions = ParserOptions::newFromUser( $wgUser );
	$parser = & new Parser();
	$item2 = '';
	$fields2 = explode("||", $input);
	$prepend = "<ul id=\"secondary\">\n";
	foreach ($fields2 as $field2) {
		if ($field2 != '') {
			$item2 .= "<li>$field2</li>\n";
	$output = & $parser->parse($item2, $wgTitle, $parserOptions);
	$linkoutput = $output->getText();
	$append = "</ul>\n";
	$append .= "</ul>\n";
	$append .= "</div>\n";
	$append .= "<div id=\"main\">\n";
	$append .= "<div id=\"contents\"></div>\n";
	$append .= "</div>\n";
	return $prepend . $linkoutput . $append;

Then add this include statement to your LocalSettings.php:



I've encountered problems using this extension with mediawiki 1.7.1 ... each tag is parsed like this : &lt /li &gt ... This cause the extension not working ...
In order to bypass this problem I've add the two following lines just after each $linkoutput = $output->getText(); lines in the source code listed before :
$linkoutput = str_replace ( '<', '<', $linkoutput );
$linkoutput = str_replace ( '>', '>', $linkoutput );

Hope this could help :)

Best Regards, KlinT ( klint@klintcentral.net )

With mediawiki 1.8.2 the extension don't work with and without the two lines above. Can anyone help?

Yes check the mod on the discussion page, that worked for me in 1.8.2. The above mod didn't. Rune.

Alternate method:
Step1: Remove the '||' between menu items
eg: <maintab>[[Main Page|Home]][[Professional Services]][[Sales]][[Software]][[Support]][[Corporate]]</maintab><br> <subtab>[[PS Best Practices]][[Documentation]][[Training]]</subtab>

Step 2: Replace
         $item .= "<li>$field</li>\n";

          $item .= "<li>$field\n";


To generate your tabs you use the tags <maintab>...</maintab> and <subtab>...</subtab>. BOTH MUST BE USED TOGETHER EVEN IF SUBTABS DO NOT EXIST e.g.

Main Tabs with Sub Tabs[edit]

<maintab>[[Main Page|Home]]||[[Professional Services]]||[[Sales]]||[[Software]]||[[Support]]||[[Corporate]]</maintab>
<subtab>[[PS Best Practices]]||[[Documentation]]||[[Training]]||[[Group Services]]||[[Webinars]]||[[Cool Tools]]</subtab>

Main Tabs with empty Sub Tabs[edit]

<maintab>[[Main Page|Home]]||[[Professional Services]]||[[Sales]]||[[Software]]||[[Support]]||[[Corporate]]</maintab>


You should then end up with something looking similar to the following screenshot:




Usage in a production Wiki[edit]

The way I have implemented this into our Wiki is to add MenuTab code into a template and then include that template on each Wiki page. Therefore, every single page in the Wiki has it's own nice CSS tabbed navigation to take you to key areas within the Wiki.