<amp-sidebar layout="fixed" side="right" id="mobileNav" class="Drawer Drawer--noPad py500 fw-semibold" open>
<div class="Drawer-close">
<button class="IconButton" type="button" aria-label="Close Sidebar" on="tap:mobileNav.close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="AMPSidebar-contents">
<amp-img id="" class="db mx-auto my400" alt="Sprout Social Logo" src="https://media.sproutsocial.com/uploads/sprout-social-logo.svg" height="40" width="196" layout="fixed">
</amp-img>
<nav id="" class="Nav Nav--vertical Nav--removeTopMargin">
<ul>
<li><a class="" href="/">
Home
</a>
</li>
<li class="" style="">
<amp-accordion id="" class="AMPAccordion AMPAccordion--icon">
<section id="" class=" " style=" ">
<header class="icon _arrow _after " style="">
Solutions
</header>
<ul id="" class="list" style="">
<li><a class="" href="/enterprise/">
Enterprise
</a>
</li>
<li class="" style="">
<a class="" href="/agencies/">
Agencies
</a>
</li>
<li class="" style="">
<a class="" href="/small-business/">
Small Business
</a>
</li>
</ul>
</section>
</amp-accordion>
</li>
<li><a class="" href="/pricing">
Pricing
</a>
</li>
</ul>
</nav>
</div>
</amp-sidebar>
<amp-sidebar
layout="{{amplayout}}"
side="{{side}}"
id="{{id}}"
class="Drawer Drawer--noPad {{modifier}}"
{{#if open}}open{{/if}}
>
<div class="Drawer-close">
<button class="IconButton" type="button" aria-label="Close Sidebar" on="tap:{{id}}.close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="AMPSidebar-contents">
{{#if static}}
<amp-img
src="https://media.sproutsocial.com/uploads/sprout-social-logo.svg"
width="196"
height="40"
class="db mx-auto my400"
layout="fixed"
></amp-img>
<nav class="Nav Nav--vertical Nav--removeTopMargin" role="navigation">
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<amp-accordion class="AMPAccordion--icon">
<section>
<header class="icon _arrow _after">
Solutions
</header>
<ul class="list">
<li>
<a href="/enterprise/">Enterprise</a>
</li>
<li>
<a href="/agencies/">Agencies</a>
</li>
<li>
<a href="/small-business/">Small Business</a>
</li>
<li>
<a href="/social-media-management/">Social Media Management</a>
</li>
<li>
<a href="/social-customer-service/">Customer Service</a>
</li>
<li>
<a href="/social-media-marketing/">Social Media Marketing</a>
</li>
</ul>
</section>
</amp-accordion>
</li>
<li>
<amp-accordion class="AMPAccordion--icon">
<section>
<header class="icon _arrow _after">
Platform
</header>
<ul class="list">
<li>
<a href="/features/social-media-analytics/">Analytics</a>
</li>
<li>
<a href="/features/social-media-engagement/">Engagement</a>
</li>
<li>
<a href="/features/social-media-publishing/">Publishing</a>
</li>
<li>
<a href="/features/team-collaboration/">Collaboration</a>
</li>
<li>
<a href="/features/flexible-account-structure/">Account Structure</a>
</li>
<li>
<a href="/features/social-media-crm/">Social CRM</a>
</li>
<li>
<a href="/features/social-media-monitoring/">Monitoring</a>
</li>
<li>
<a href="/features/social-media-listening/">Listening</a>
</li>
<li>
<a href="/features/mobile-apps/">Mobile</a>
</li>
<li>
<a href="/integrations/twitter/">Twitter</a>
</li>
<li>
<a href="/integrations/facebook/">Facebook</a>
</li>
<li>
<a href="/integrations/instagram/">Instagram</a>
</li>
<li>
<a href="/integrations/linkedin/">LinkedIn</a>
</li>
<li>
<a href="/integrations/google-plus/">Google+</a>
</li>
<li>
<a href="/integrations/">Other Integrations</a>
</li>
</ul>
</section>
</amp-accordion>
</li>
<li>
<a href="/pricing/">Pricing</a>
</li>
<li>
<amp-accordion class="AMPAccordion--icon">
<section>
<header class="icon _arrow _after">
About
</header>
<ul class="list">
<li>
<a href="/customers">Customers</a>
</li>
<li>
<a href="/about/">Company</a>
</li>
<li>
<a href="/careers/">Careers</a>
</li>
<li>
<a href="/insights/">Blog</a>
</li>
<li>
<a href="/insights/resources/">Resources</a>
</li>
<li>
<a href="https://getbambu.com/" target="_blank" rel="noopener noreferrer">Bambu</a>
</li>
</ul>
</section>
</amp-accordion>
</li>
</ul>
<a href="/demo/" class="button db mx500">Request a Demo</a>
</nav>
{{else}}
{{> @children}}
{{/if}}
</div>
</amp-sidebar>
{
"id": "mobileNav",
"modifier": "py500 fw-semibold",
"side": "right",
"amplayout": "fixed",
"open": true,
"static": null,
"children": [
{
"component": "ampimage",
"context": {
"alt": "Sprout Social Logo",
"src": "https://media.sproutsocial.com/uploads/sprout-social-logo.svg",
"modifier": "db mx-auto my400",
"width": 196,
"height": 40
}
},
{
"component": "nav",
"context": {
"modifier": "Nav--vertical Nav--removeTopMargin",
"children": [
{
"component": "nav-item",
"context": {
"text": "Home",
"href": "/"
}
},
{
"component": "li",
"context": {
"children": [
{
"component": "ampaccordion",
"context": {
"modifier": "AMPAccordion--icon",
"children": [
{
"component": "section",
"context": {
"unstyled": true,
"children": [
{
"component": "heading",
"context": {
"modifier": "icon _arrow _after",
"text": "Solutions"
}
},
{
"component": "ul",
"context": {
"modifier": "list",
"children": [
{
"component": "nav-item",
"context": {
"text": "Enterprise",
"href": "/enterprise/"
}
},
{
"component": "li",
"context": {
"children": [
{
"component": "link",
"context": {
"text": "Agencies",
"href": "/agencies/"
}
}
]
}
},
{
"component": "li",
"context": {
"children": [
{
"component": "link",
"context": {
"text": "Small Business",
"href": "/small-business/"
}
}
]
}
}
]
}
}
]
}
}
]
}
}
]
}
},
{
"component": "nav-item",
"context": {
"text": "Pricing",
"href": "/pricing"
}
}
]
}
}
]
}
amp-sidebar.Drawer {
z-index: 2147483647;
opacity: 1;
}
.Drawer amp-accordion {
@include Nav-item--vertical;
}
AMPSidebar is a toggleable drawer intended for off-canvas navigation.
More info can be found in the AMP documentation.
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>You can see a working example under Templates > AMPExample.
open: false and layout: 'nodisplay'.body.nav and list of links and optional amp-accordions.on attribute on elements such as buttons,
e.g. on="tap:sidebarId.toggle".AMPSidebar is accessible to keyboard and screenreader users: