mailmodo-hamburger

How to Use amp-sidebar in Your AMP Emails

BySuryanarayan Pal

Share

Linkedin logo
Twitter logo
copy link
Facebook logo
Whatsapp logo
Pinterest logo
mail logo

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 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.

Table of contents

What is amp-sidebar?

The amp-sidebar is an 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

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 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 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 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.

  1. 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, so they can quickly scan and find what they need.

  1. Have offers placements

If you have a list of offers, like your 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, amp-img, amp-carousel. Check them out to know how these components work and improve your emails.

What should you do next?

Thanks for reading till the end. Here are 3 ways we can help you grow your business:

Group_102411_1fd1b38156

Get smarter with our email resources

Explore our email marketing guides, ebooks and other resources to master email marketing.

Transactional_email_within_your_marketing_plan_0532bc94ee

Do better email marketing with Mailmodo

Send app-like interactive emails with forms, carts, calendars, games, etc. to boost email ROI.

support_820ceb7ecf

Talk to an email expert

Get a 30-min. free email consultation with a Mailmodo expert to optimize your email marketing.

Was this post useful?

Improve your email marketing

With interactive emails, smarter automation workflows, AI-powered email content and higher conversions

Group_1110165311
Union_1_6200367a50