html

Create sidebar menu using AMP

You can create a sidebar in your AMP-powered website using an amp-sidebar of AMP. The sidebar will be toggle on the menu icon click.

<!-- Add below script and styles within head tag -->
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<style amp-custom>
    .site_header {display: flex; width: 100%; background: #025AF0; color: #fff;height: 60px; align-items: center;}
    .menu_icon {padding-left: 10px;margin-right:  20px;}
    .sidebar {padding: 10px;margin: 0;}
    .sidebar > li {list-style: none;margin-bottom:10px;}
    .sidebar a {text-decoration: none;}
    .hide_sidebar {font-size: 1.5em;padding-left: 5px;}
</style>


<!--Add below HTML elements within body tag-->
<!-- Create header with menu icon(tap to open sidebar) -->
<header class="site_header">
    <div role="button" on="tap:website_sidebar.toggle" tabindex="0" class="menu_icon">â˜°</div>
    <div class="site-name">Website Name</div>
</header>

<!-- Sidebar to be toggled -->
<amp-sidebar id="website_sidebar" layout="nodisplay" side="left">
    <div role="button" aria-label="close sidebar" on="tap:website_sidebar.toggle" tabindex="0" class="hide_sidebar">âœ•</div>
    <ul class="sidebar">
        <li><a href="/index.html">Home</a></li>
        <li><a href="/about.html">About</a></li>
        <li><a href="/contact.html">Contact</a></li>
    </ul>
</amp-sidebar>

The code snippet can be used to create or add a sidebar menu to your AMP-powered website. The sidebar menu is mostly used on mobile devices but you can use the code to add the sidebar menu on your desktop version of the website or mobile version of the website if it is using AMP.

The code will generate the below screen on your webpage

Was this helpful?