Menu Component

Menu Component

Use the InternalJS menu component whenever you need a swipe-up panel or modal-style sheet.

Trigger

Attach a menu to any element by setting the data-click attribute to call show_menu.

<a
  href="#"
  id="clickable_header_sitemap"
  data-click='{"operation":"show_menu","menu_name":"menu_action_filter","reset":false,"locked":false}'
  class="header-icon header-icon-4 font-20"
  style="display: block"
>
  <i class="fas fa-sitemap"></i>
</a>

Menu Structure

Start with the skeleton below and place your UI elements inside the .content container.

<!-- menu_shop -->
<div
  id="menu_shop"
  class="menu menu-box-bottom menu-box-detached rounded-m"
  data-menu-effect="menu-over"
>
  <div class="menu-title mt-n1">
    <h1 id="text_shop_header" class="ankur_language">Enter Shop Details</h1>
    <p id="text_shop_subHeader" class="color-theme opacity-50 ankur_language">
      Please enter information
    </p>
    <a href="#" class="close-menu"><i class="fa fa-times"></i></a>
  </div>
  <div class="divider mt-0 mb-0"></div>
  <div class="content mb-0 mt-3 text-center"></div>
</div>