amp-sidebar

Edit on Github
Open in Playground

Introduction

A sidebar provides a way to display meta content intended for temporary access (navigation links, buttons, menus, etc.). The sidebar can be revealed by a button tap while the main content remains visually underneath.

Setup

Import the amp-sidebar component.

<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>

Basic Usage

The amp-sidebar should be a direct child of the <body>. It must have a layout of nodisplay.

Theamp-sidebar may not contain any AMP Elements except for amp-accordion, amp-img and amp-fit-text.

amp-fit-text expands or shrinks its font size to fit the content within the space given to in the menu.

Example

<amp-sidebar id="sidebar"
  layout="nodisplay"
  side="right">
  <amp-img class="amp-close-image"
    src="/img/ic_close_black_18dp_2x.png"
    width="20"
    height="20"
    alt="close sidebar"
    on="tap:sidebar.close"
    role="button"
    tabindex="0"></amp-img>
  <ul>
    <li>
      <a href="/">Home</a>
    </li>
    <li> Nav item 1</li>
    <li>
      <amp-fit-text width="220"
        height="20"
        layout="responsive"
        max-font-size="24">
        Nav item 2 - &lt;amp-fit-text&gt;
      </amp-fit-text>
    </li>
    <li>
      <amp-fit-text width="220"
        height="20"
        layout="responsive"
        max-font-size="24">
        Nav item 3 - &lt;amp-fit-text&gt; longer text
      </amp-fit-text>
    </li>
    <li> Nav item 4 - Image
      <amp-img class="amp-sidebar-image"
        src="/img/favicon.png"
        width="20"
        height="20"
        alt="an image"></amp-img>
    </li>
    <li> Nav item 5</li>
    <li> Nav item 6</li>
  </ul>
</amp-sidebar>

Click to toggle the sidebar.

Example

<button on="tap:sidebar.toggle"
  class="ampstart-btn caps m2">Toggle sidebar</button>

Click to open the sidebar.

Example

<button on="tap:sidebar.open"
  class="ampstart-btn caps m2">Open sidebar</button>

Click to close the sidebar.

Example

<button on="tap:sidebar.close"
  class="ampstart-btn caps m2">Close sidebar</button>