600 West

Ampsidebar: Default 

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

    </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": true
}
  • Content: 
    amp-sidebar.Drawer {
    z-index: 2147483647;
    opacity: 1;
}
.Drawer amp-accordion {
    @include Nav-item--vertical;
}
  • URL: /components/raw/ampsidebar/AMPSidebar.scss
  • Filesystem Path: components/organisms/AMPSidebar/AMPSidebar.scss
  • Size: 123 Bytes

AMPSidebar

AMPSidebar is a toggleable drawer intended for off-canvas navigation.

More info can be found in the AMP documentation.

Required Script

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

Example

You can see a working example under Templates > AMPExample.

Best Practices

  • AMPSidebar is visible by default to help with implementation. When adding an AMPSidebar to your production page, be sure to set open: false and layout: 'nodisplay'.
  • It must be the immediate child of the body.
  • It should contain a nav and list of links and optional amp-accordions.
  • It can be toggled by setting the on attribute on elements such as buttons, e.g. on="tap:sidebarId.toggle".

Accessibility

AMPSidebar is accessible to keyboard and screenreader users:

  • It is only focusable when visible.
  • Opening the sidebar draws focus to it.
  • The sidebar can be closed using the Escape key.
  • It contains a close button with appropriate screenreader text.