Quicklinks

MDN supports adding quicklinks to pages; these are boxes containing a potentially hierarchical list of links to other pages on MDN or to pages off-site. This article describes how to create quicklinks boxes.

A page may have no more than one quicklinks box, which is presented in the left-hand sidebar. This sidebar may, optionally, be hidden by the user by clicking the "Hide this sidebar" link at the top of the sidebar.

Quicklinks syntax

The quicklinks for a page are provided by creating a <section> block with the ID "Quick_Links". Then you place the contents that go into the quicklinks box within the section. These should be formatted as an <ol> ordered list (optionally nested). You can do this by using the numbered list button in the editor toolbar. For example, this page has a quicklinks box that connects you to several useful pages. Its HTML looks like this:

<section id="Quick_Links">
  <ol>
    <li><a href="https://docs.ckeditor.com/">CKEditor documentation site</a></li>
    <li><a href="https://mxr.mozilla.org/">MXR: Mozilla source cross-reference</a></li>
    <li><a href="#">Style guides</a>
      <ol>
        <li><a href="https://www.economist.com/research/StyleGuide/">The Economist style guide</a></li>
        <li><a href="https://www.amazon.com/gp/product/0226104036/">The Chicago manual of style</a></li>
        <li><a href="https://www.answers.com/library/Dictionary">Answers.com dictionary</a></li>
        <li><a href="https://www.wsu.edu/~brians/errors/">Common Errors in English</a></li>
      </ol>
    </li>
  </ol>
</section>

The important things to note:

• The list must be an ordered list. Unordered lists will not work correctly.
• You may have nested lists by providing a name, which is a link, for the folder, then another ordered list inside the same <li> block as the title link for the folder.

Using macros to create quicklinks

It's worth noting that you can (and often should use macros to generate quicklinks. Any time you need to use the same set of quicklinks on more than one page, you should turn them into a macro. This page, for example, uses the EditorGuideQuicklinks macro to create its quicklinks box; so does every other page in the MDN editor guide.

Your macro can be as simple or as complex as necessary; it simply needs to output HTML similar to what's shown in Quicklinks syntax above.

Standard quicklinks macros

Here's a list of our standard macros for generating quicklinks.

CSSRef

Builds the standard quicklinks for CSS Reference pages.

HTMLRef

Builds the standard quicklinks for HTML Reference pages.

MakeSimpleQuicklinks

Given a list of pages on MDN, this macro constructs a quicklinks box using the pages' titles as the link text and their summaries as tooltips. This doesn't create hierarchical lists.

QuickLinksWithSubpages

Creates a set of quicklinks using the current page's (or the specified page's) children as the destinations. This creates hierarchical lists up to two levels deep. The pages' titles are used as the link text and their summaries as tooltips.