# How to Use amp-sidebar in Your AMP Emails

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "headline": "Amp-sidebar: Features, Application, and Examples\n",
  "description": "Learn how to use the amp-sidebar in AMP emails. Explore its features and applications to add smooth, responsive navigation menus to your email content.",
  "image": "https://res.cloudinary.com/mailmodo/image/upload/v1652870724/strapi/Featured_image_Amp_sidebar_efc7614bc6.png",
  "datePublished": "2022-02-15T19:58:09.400Z",
  "dateModified": "2025-07-10T07:17:22.355Z",
  "publisher": {
    "@type": "Organization",
    "name": "Mailmodo",
    "url": "https://www.mailmodo.com/",
    "sameAs": [
      "https://www.linkedin.com/company/mailmodo/",
      "https://www.facebook.com/mailmodo/",
      "https://www.instagram.com/mailmodohq/",
      "https://www.youtube.com/@mailmodo"
    ],
    "logo": "https://www.mailmodo.com/static/images/logo/logo-full.svg",
    "description": "Mailmodo is a complete email marketing platform that helps email marketers to create and send interactive emails to drive growth and engagement.",
    "address": {
      "@type": "PostalAddress",
      "addressLocality": "Lewes",
      "addressRegion": "DE",
      "postalCode": "19958",
      "streetAddress": "Mailmodo Technologies Inc. 16192, Coastal Highway",
      "addressCountry": {
        "@type": "Country",
        "name": "US"
      }
    },
    "contactPoint": {
      "@type": "ContactPoint",
      "email": "enquiries@mailmodo.com",
      "contactType": "customer service"
    }
  }
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Amp-sidebar: Features, Application, and Examples\n",
  "description": "Learn how to use the amp-sidebar in AMP emails. Explore its features and applications to add smooth, responsive navigation menus to your email content.",
  "image": "https://res.cloudinary.com/mailmodo/image/upload/v1652870724/strapi/Featured_image_Amp_sidebar_efc7614bc6.png",
  "datePublished": "2022-02-15T19:58:09.400Z",
  "dateModified": "2025-07-10T07:17:22.355Z",
  "author": {
    "@type": "Person",
    "name": "Suryanarayan Pal",
    "url": "https://www.mailmodo.com/guides/author/suryanarayan-pal/"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Mailmodo",
    "logo": {
      "@type": "ImageObject",
      "url": "https://www.mailmodo.com/static/images/logo/logo-full.svg"
    }
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://www.mailmodo.com/guides/amp-sidebar/"
  }
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "@id": "#creator",
  "description": "Email marketing software to create and send interactive emails to maximize conversions and reinvent your user journey",
  "email": "support@mailmodo.com",
  "image": "https://www.mailmodo.com/static/images/og-image.png",
  "knowsAbout": "Email marketing",
  "legalName": "Mailmodo Technologies Inc.",
  "location": "United States",
  "logo": "https://www.mailmodo.com/static/images/logo/logo-full.svg",
  "name": "Mailmodo",
  "sameAs": [
    "https://twitter.com/mailmodo",
    "https://www.facebook.com/company/mailmodo/",
    "https://www.linkedin.com/company/mailmodo/"
  ],
  "url": "https://www.mailmodo.com/"
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://www.mailmodo.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Guides",
      "item": "https://www.mailmodo.com/guides/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "amp sidebar",
      "item": "https://www.mailmodo.com/guides/amp-sidebar/"
    }
  ]
}
</script>

## Table of contents

- What is amp-sidebar?
- Features of amp-sidebar
- Applications of amp-sidebar
- Wrapping up

Sidebars are everywhere. From the navigation sidebar of Gmail to the page hierarchy sidebar on Notion — they're used to show secondary content.

Do you know what's exciting? Now you can add sidebars right inside your [AMP emails](https://www.mailmodo.com/guides/amp-for-email/) with the help of amp-sidebar.

This guide will teach you the amp-sidebar, its applications, and how to use it in your AMP emails.



-   What is amp-sidebar?
    
-   Features of amp-sidebar
    
-   Applications of amp-sidebar
    
-   Wrapping up

## What is amp-sidebar?

The amp-sidebar is an [AMP email component](https://www.mailmodo.com/guides/amp-email-component/) that helps you add sidebars to AMP emails. This means now you can add navigation links, promotional content, and secondary information without acquiring too much space.

![amp sidebar in action](https://res.cloudinary.com/mailmodo/image/upload/f_auto,q_100/v1651817075/strapi/amp_sidebar_in_action_8986bdccd5.gif)

## Features of amp-sidebar

You can use the amp-sidebar in many ways as its attributes allow you to add many functionalities. Here's a few of those:

### ✅ Autoscroll overflowing content

If we have a lot of content to show in our sidebars but don't have enough space, you can set it up to autscroll the overflowing content with the autoscroll attribute. This way, users can view all the data even when there isn't enough space.

### ✅ Set up the opening direction of the sidebar

Do you want your sidebar to open from the right side instead of the left? If yes, you can use the side attribute to mention the [opening](https://www.mailmodo.com/guides/good-email-open-rate/) direction of the sidebar. If you don't specify this attribute, it will default to left most of the time.

### ✅ Create toolbars

Sidebars can come in the way of your email content when the screen width becomes too small. You can tackle this by adding a toolbar with a toolbar attribute. You can configure it to show a hamburger [icon](https://www.mailmodo.com/guides/email-icon/) when the screen width becomes too small. This hamburger icon can help you open the sidebar similar to the ones on mobile devices.

  

These are some of the noticeable features of the amp-sidebar. However, it also has some other attributes that open up various possibilities. Here's the list: layout, open, data-close-button-aria-label, area, data-disable-swipe-close, common attributes. Visit [amp.dev](https://amp.dev/documentation/components/amp-sidebar/?format=email) for more information.

## Applications of amp-sidebar

You can use the amp-sidebar in the following ways in emails:

1.  ### Create app-like menus
    

Menus are commonly used in mobile apps to show different screens pages. Similarly, the amp-sidebar can show navigational links for different screens. This gives the user an app-like experience right inside their inbox.

2.  ### Add guides navigation
    

Educating your users about your product is important. So you may decide to create a guide hub to send with your AMP email. To make the navigation is easier, you can create a guide navigation sidebar like [Notion](https://www.notion.so/help/guides), so they can quickly scan and find what they need.

3.  ### Have offers placements
    

If you have a list of offers, like your [email marketing books](https://www.mailmodo.com/guides/email-marketing-books/), you can create a sidebar with all the books cover pages. Now your users can click those covers to buy them. This is a creative way to show your offers that will leave a lasting impression on your users.

## Wrapping up

Sidebars are a great way to show navigational content. And thanks to the amp-sidebar, now you can create such experiences inside your AMP emails.

We have also covered other AMP components, including [amp-accordion](https://www.mailmodo.com/guides/amp-accordion/), amp-img, [amp-carousel](https://www.mailmodo.com/guides/amp-carousel/). Check them out to know how these components work and improve your emails.

---

**Author: Suryanarayan Pal**

Suryanarayan has 7 years of experience in email marketing for B2B, SaaS, and e-commerce, specializing in email deliverability and project management.

