<div id="offcanvas" class="uk-offcanvas">
  <div class="uk-offcanvas-bar uk-offcanvas-bar-flip">
    <ul class="uk-nav uk-nav-parent-icon uk-nav-offcanvas" data-uk-nav>

      <!-- Home menu -->
      <li class="uk-parent"><a href="?page=home">Home</a>
        <ul class="uk-nav-sub">
          <li><a href="?page=home">Business Layout</a></li>
          <li><a href="?page=boxed-layout&header=default&layout=boxed">Boxed Layout</a></li>
          <li><a href="?page=corporate-layout&header=default&layout=boxed">Corporate Layout</a></li>
          <li><a href="?page=one-page-layout&header=default&layout=boxed">One Page Layout</a></li>
          <li><a href="?page=minimal-layout&header=default">Minimal Layout</a></li>
        </ul>
      </li>

      <!-- Theme menu -->
      <li class="uk-parent"><a href="#">Theme</a>
        <ul class="uk-nav-sub">
          <li><a href="?page=module-layouts">Module Layouts</a></li>
          <li class="uk-parent"><a href="#">Header Layouts</a>
            <ul>
              <li><a href="?page=header-default&header=default">Header Default</a></li>
              <li><a href="?page=header-center&header=center">Header Center</a></li>
              <li><a href="?page=header-right&header=right">Header Right</a></li>
              <li><a href="?page=header-full-right&header=full-right">Header Full Right</a></li>
            </ul>
          </li>
          <li><a href="?page=uikit-elements">UIkit Elements</a></li>
          <li><a href="?page=color-styles">Color Styles</a></li>
          <li><a href="?page=rtl-language-support&direction=rtl">RTL Language Support</a></li>
        </ul>
      </li>

      <!-- Pages menu -->
      <li class="uk-parent"><a href="#">Pages</a>
        <ul class="uk-nav-sub">
          <li><a href="?page=about-us">About Us</a></li>
          <li class="uk-parent"><a href="#">Our Team</a>
            <ul>
              <li><a href="?page=our-team-basic">Our team - Basic</a></li>
              <li><a href="?page=our-team-extended">Our team - Extended</a></li>
              <li><a href="?page=our-team-filter">Our team - Filter</a></li>
            </ul>
          </li>
          <li><a href="?page=our-history">Our History</a></li>
          <li><a href="?page=our-philosophy">Our Philosophy</a></li>
          <li><a href="?page=our-services">Our Services</a></li>
          <li><a href="?page=our-pricing">Our Pricing</a></li>
          <li><a href="?page=our-rates">Our Rates</a></li>
          <li class="uk-parent"><a href="#">Gallery</a>
            <ul>
              <li class="uk-parent"><a href="#">Single Portfolio</a>
                <ul>
                  <li><a href="?page=half-image">Half Image</a></li>
                  <li><a href="?page=half-image-slider">Half Image Slider</a></li>
                  <li><a href="?page=full-image">Full Image</a></li>
                  <li><a href="?page=full-image-slider">Full Image Slider</a></li>
                </ul>
              </li>
              <li class="uk-parent"><a href="#">Gallery Layout</a>
                <ul>
                  <li><a href="?page=2-column-gallery">2 Column Gallery</a></li>
                  <li><a href="?page=3-column-gallery">3 Column Gallery</a></li>
                  <li><a href="?page=4-column-gallery">4 Column Gallery</a></li>
                </ul>
              </li>
              <li class="uk-parent"><a href="#">Grid Layout</a>
                <ul>
                  <li><a href="?page=2-column-grid">2 Column Grid</a></li>
                  <li><a href="?page=3-column-grid">3 Column Grid</a></li>
                  <li><a href="?page=4-column-grid">4 Column Grid</a></li>
                </ul>
              </li>
              <li><a href="?page=portfolio-blocks">Portfolio Blocks</a></li>
              <li><a href="?page=masonry-layout">Masonry Layout</a></li>
              <li><a href="?page=no-margin-layout">No margin Layout</a></li>
            </ul>
          </li>
          <li><a href="?page=testimonials">Testimonials</a></li>
          <li><a href="?page=faqs">FAQs</a></li>
          <li><a href="?page=404">404 Error page</a></li>
          <li><a href="?page=contact-us">Contact Us</a></li>
        </ul>
      </li>

      <!-- Timetable menu -->
      <li><a href="?page=timetable">Timetable</a></li>

      <!-- Elements menu -->
      <li class="uk-parent"><a href="#">Elements</a>
        <ul class="uk-nav-sub">
          <li><a href="?page=elements-typography">Typography</a></li>
          <li><a href="?page=elements-column-blocks">Column Blocks</a></li>
          <li><a href="?page=elements-buttons">Buttons</a></li>
          <li><a href="?page=elements-dropdowns">Dropdowns</a></li>
          <li><a href="?page=elements-alerts">Alerts &amp; Badges</a></li>
          <li><a href="?page=elements-panels">Panels</a></li>
          <li><a href="?page=elements-accordion">Accordion &amp; Toggles</a></li>
          <li><a href="?page=elements-tooltips">Tooltips</a></li>
          <li><a href="?page=elements-progress">Progress Bar</a></li>
          <li><a href="?page=elements-tabs">Tabs</a></li>
          <li><a href="?page=elements-tables">Tables</a></li>
          <li><a href="?page=elements-images">Images</a></li>
          <li><a href="?page=elements-modal-box">Modal Box</a></li>
          <li><a href="?page=elements-lightbox">Lightbox</a></li>
          <li><a href="?page=elements-slideshow">Slideshow</a></li>
          <li><a href="?page=elements-dynamic-grid">Dynamic Grid</a></li>
          <li><a href="?page=elements-animation">Animation</a></li>
          <li><a href="?page=elements-counter">Counter</a></li>
          <li><a href="?page=elements-slider">Slider</a></li>
          <li><a href="?page=elements-parallax">Parallax</a></li>
          <li><a href="?page=elements-icons">Icons</a></li>
          <li><a href="?page=elements-cards">Cards</a></li>
          <li><a href="?page=elements-audio-video">Audio/Video</a></li>
          <li><a href="?page=elements-timeline">Timeline</a></li>            
        </ul>
      </li>

      <!-- News menu -->
      <li class="uk-parent"><a href="?page=news">News</a>
        <ul class="uk-nav-sub">
          <li><a href="?page=news">News Category</a></li>
          <li><a href="?page=news-item">News Item</a></li>
        </ul>
      </li>

      <!-- Shop menu -->
      <li class="uk-parent"><a href="?page=shop-grid">Shop</a>
        <ul class="uk-nav-sub">
          <li><a href="?page=shop-grid">Shop Grid</a></li>
          <li><a href="?page=shop-cart">Shop Cart</a></li>
          <li><a href="?page=shop-checkout">Shop Checkout</a></li>
          <li><a href="?page=shop-single-product">Shop Single Product</a></li>
        </ul>
      </li>

    </ul>
  </div>
</div>