Sandstone Tabzilla

Universal tab

Tabzilla is our name for the universal tab that appears on the top of all Mozilla websites (like this one!). It expands to reveal site navigation as well as a promo area (on desktop) and should be a part of any Mozilla-related Web property you’re building. To that end, you’ll find a simple set of HTML/CSS/JS instructions on this page for easy implementation.

Examples

Tabzilla automatically resizes to the screen resolution and real estate of the device being used. All content is updated and pushed from a central location. Please read the requirements and follow the installation instructions further down this page to correctly add Tabzilla to your site.

Smartphone tab

Smartphone tabzilla

Tablet tab

Tablet tabzilla

Desktop tab

Desktop tabzilla

Requirements

As the universal tab does inject HTML/CSS into the DOM, some there are some requirements that must be met by including sites.

  1. Background images must not be attached to the <body> element.
  2. Absolutely positioned elements must not be positioned relative to the <body> element.
  3. An element other than the <body> should add a 2 pixel white border to the top of the page (border-top: 2px solid #fff;)

Any background image or absolutely positioned element attached to the body element would not move with the rest of the contents when the tab slides open. Instead, any such background or element should be attached to anoter HTML element in the page (a wrapper div, for example). Note that this issue does not apply to solid background colors, or backgrounds that do not vary vertically (solid vertical stripes, for example).

If jQuery is already included on the page, it will be used by Tabzilla. If jQuery is not already on the page, it will automatically be included after the page has loaded.

Installation

To add Tabzilla to a site:

  1. Add the static tab link (example below) to the top of your template
    <a href="/en-US/" id="tabzilla">mozilla</a>
  2. Include the tabzilla.css CSS file either as a CSS include or built into your minified styles
    <link href="//mozorg.cdn.mozilla.net/media/css/tabzilla-min.css" rel="stylesheet" />
  3. Include the tabzilla.js file in your template (preferably in the footer)
    <script src="//mozorg.cdn.mozilla.net/tabzilla/tabzilla.js"></script>
  4. If you'd like to have the Translation Bar extension, include alternate URLs in the <head> element and add the data-infobar attribute to the tab link, with the translation option
    <a href="/en-US/" id="tabzilla" data-infobar="translation">Mozilla</a>

See the Tabzilla documentation for full instructions and notes on localization.

Testing Bookmarklet

To test the universal tab on your mozilla website, create a new bookmark with the contents of this file as the Location. Then, click this bookmarklet while on one of your pages to see how the tab will appear on your site.

Please note the following limitations of the bookmarklet:

  • The tab is aligned to the top right of the viewport, not the top-right of your layout, as it should be.
  • The tab has a float:left; which may interfere with other content on your page, or slip behind other elements and be invisible.