Google AMP Navigation

A CSS only approach to building a responsive multi-level mega menu, a component which is traditionally built with Javascript.

Why CSS only?

Good performance — no JS to be loaded and executed
No DOM manipulations needed
Due to Google AMP is not accepting custom JavaScript files

It`s simple. All we need is a SEO friendly nested list.

<header class="mega-menu">
  <div class="container">
    <div class="row">
      <div class="header">
        <div class="container">
          <nav class="main-menu" id="main-menu">
            ...
          </nav>
        </div>
      </div>
    </div>
  </div>
</header>

Google AMP Navigation · Full width

For a full width navigation use .full-width as <header> class and .container-fluid for .container.

<header class="mega-menu full-width">
  <div class="container-fluid">
    <div class="row">
      <div class="header">
        <div class="container">
          <nav class="main-menu" id="main-menu">
            ...
          </nav>
        </div>
      </div>
    </div>
  </div>
</header>

Google AMP Navigation · Fixed

For a fixed navigation use the .fixed class in <header>.

Google AMP Navigation · Mobile menu

Build the mobile and main menu in <nav class="main-menu" id="main-menu">

<header class="mega-menu">
  <div class="container">
    <div class="row">
      <div class="header">
        <div class="container">
          <nav class="main-menu" id="main-menu">
            <!-- Mobile Menu -->
            <label for="mobile" id="mobile-menu">
              <a href="#" title="Google AMP Navigation · Mega Dropdown Menu">
                <amp-img
                  alt="Google AMP Navigation · Mega Dropdown Menu"
                  title="Google AMP Navigation · Mega Dropdown Menu"
                  src="https://www.ampcssframework.com/assets/img/logo/logo.webp"
                  width="21"
                  height="24"
                  class="img-logo">
                </amp-img>
                <span class="logo">Google AMP <strong>CSS</strong> FRAMEWORK</span>
              </a>
          
              <span class="main-menu-dropdown-icon">
                <i class="hamburger"></i>
              </span>
            </label>
        
            <input type="checkbox" id="mobile">
        
            <!-- Main menu -->
            <ul class="main-menu">
              <!-- Left links -->
              <li class="main-menu-logo">
                <a href="#" title="Google AMP Navigation · Mega Dropdown Menu">
                  <amp-img
                    alt="Google AMP Navigation · Mega Dropdown Menu"
                    title="Google AMP Navigation · Mega Dropdown Menu"
                    src="https://www.ampcssframework.com/assets/img/logo/logo.webp"
                    width="28"
                    height="32"
                    class="img-logo">
                  </amp-img>
                  <span class="logo">Google AMP <strong>CSS</strong> FRAMEWORK</span>
                </a>
              </li>

              <!-- Left links -->
              <li>
                <a href="#" title="Google AMP Navigation · Mega Dropdown Menu">Single link</a>
              </li>
          
              <!-- Right links -->
              <li class="main-menu-right">
                <a href="#" title="Google AMP Navigation · Mega Dropdown Menu">Single link</a>
              </li>
            </ul>
            <!-- /main-menu -->
          </nav>
        </div>
      </div>
    </div>
  </div>
</header>

Google AMP Navigation · Dropdown menu

Create a simple dropdown menu.

<!-- Left links -->
<!-- Simple dropdown -->
<li class="main-menu-dropdown">
  <a title="Google AMP · Dropdown Navigation">
    Dropdown
    <span class="main-menu-dropdown-icon">
      <i class="arrow-down"></i>
    </span>
  </a>

  <label class="main-menu-dropdown-icon" for="main-menu-dropdown-list-1">
    <i class="arrow-down arrow-down-mobile"></i>
  </label>
  <input type="checkbox" id="main-menu-dropdown-list-1">

  <ul class="main-menu-dropdown-list">
    <li><a href="#" title="Google AMP Navigation · Mega Dropdown Menu">Item 1</a></li>
    <li><a href="#" title="Google AMP Navigation · Mega Dropdown Menu">Item 2</a></li>
    <li><a href="#" title="Google AMP Navigation · Mega Dropdown Menu">Item 3</a></li>
    <li><a href="#" title="Google AMP Navigation · Mega Dropdown Menu">Item 4</a></li>
  </ul>
</li>

Create a multiple dropdown menu

<!-- Left links -->
<!-- Multiple level dropdown -->
<li class="main-menu-dropdown">
  <a><i class="fa fa-list-ul"></i> Multiple Level Dropdown
    <span class="main-menu-dropdown-icon">
      <i class="arrow-down"></i>
    </span>
  </a>

  <label class="main-menu-dropdown-icon" for="main-menu-dropdown-list-2">
    <i class="arrow-down arrow-down-mobile"></i>
  </label>
  <input type="checkbox" id="main-menu-dropdown-list-2">

  <ul class="main-menu-dropdown-list">
    <li>
      <a>Item 1
        <span class="main-menu-dropdown-icon">
          <i class="arrow-right"></i>
        </span>
      </a>
											
      <label class="main-menu-dropdown-icon" for="main-menu-dropdown-list-1.1">
        <i class="arrow-down arrow-down-mobile"></i>
      </label>
      <input type="checkbox" id="main-menu-dropdown-list-1.1">

      <ul class="main-menu-dropdown-list">
        <li>
          <a href="#">Sub Item 1.1</a>
        </li>
      </ul>
    </li>
    <li>
      <a>Item 2
        <span class="main-menu-dropdown-icon">
          <i class="arrow-right"></i>
        </span>
      </a>
											
      <label class="main-menu-dropdown-icon" for="main-menu-dropdown-list-2.1">
        <i class="arrow-down arrow-down-mobile"></i>
      </label>
      <input type="checkbox" id="main-menu-dropdown-list-2.1">

      <ul class="main-menu-dropdown-list">
        <li>
          <a href="#">Sub Item 2.1</a>
        </li>
        <li>
      </ul>
    </li>
  </ul>
</li>

Create a mega dropdown menu ...

<!-- Left links -->
<!-- Mega dropdown menu -->
<li class="main-menu-dropdown">
  <a>Mega dropdown menu
    <span class="main-menu-dropdown-icon">
      <i class="arrow-down"></i>
    </span>
  </a>

  <label class="main-menu-dropdown-icon" for="mega-main-menu-dropdown-list">
    <i class="arrow-down arrow-down-mobile"></i>
  </label>
  <input type="checkbox" id="mega-main-menu-dropdown-list">

  <div class="main-menu-dropdown-list main-menu-dropdown-megamenu">
    <div class="row">
      <div class="col-12 col-md-3">
        <ul>
          <li><a>Header 1</a></li>
          <li><a href="#">Item 1.1</a></li>
          <li><a href="#">Item 1.2</a></li>
          <li><a href="#">Item 1.3</a></li>
          <li><a href="#">Item 1.4</a></li>
        </ul>
      </div>
      <div class="col-12 col-md-3">
        <ul>
          <li><a>Header 1</a></li>
          <li><a href="#">Item 1.1</a></li>
          <li><a href="#">Item 1.2</a></li>
          <li><a href="#">Item 1.3</a></li>
          <li><a href="#">Item 1.4</a></li>
        </ul>
      </div>
      <div class="col-12 col-md-3">
        <ul>
          <li><a>Header 1</a></li>
          <li><a href="#">Item 1.1</a></li>
          <li><a href="#">Item 1.2</a></li>
          <li><a href="#">Item 1.3</a></li>
          <li><a href="#">Item 1.4</a></li>
        </ul>
      </div>
      <div class="col-12 col-md-3">
        <ul>
          <li><a>Header 1</a></li>
          <li><a href="#">Item 1.1</a></li>
          <li><a href="#">Item 1.2</a></li>
          <li><a href="#">Item 1.3</a></li>
          <li><a href="#">Item 1.4</a></li>
        </ul>
      </div>
    </div>
  </div>
</li>

Google AMP Navigation · Web font icons

Add a web font icon (Font Awesome) in your menu ...

To hide or show elements for any responsive screen variation, see the bootstrap documentation: Hiding elements

<a><i class="fa fa-th-list"></i> Web font icon</a>

Google AMP Navigation · Tooltips

Insert a tooltip in your dropdown item link ...

<a href="#">Item <span class="tip">Tooltip</span></a>

Google AMP Navigation · Subtitle

Insert a subtitle in your dropdown item link ...

<a href="#">Item<br><span class="main-menu-dropdown-item-subtitle">Item Subtitle</span></a>

Google AMP Navigation · Notifications

Add a notification (for cart ...) in your menu ...

<li>
<a href="#">
  <i class="fa fa-shopping-bag m-none"></i> <span class="d-md-none d-lg-none d-xl-none">Cart</span>
  <span class="notification-info">
    <span class="notification-qty">1</span>
  </span>
</a>

Google AMP Navigation · Mega Dropdown Menu Library