v4
Support Framework7
logo_github stars forks
logo_applelogo_androiddevice_desktop

Menu

Menu component not so often seen in mobile apps. But it is proven to be extremely helpful when you need controls on top of the map, images, some text/code editor, etc.

First of all let's look on Menu HTML layout:

<!-- Menu container -->
<div class="menu">
  <div class="menu-inner">
    <!-- Single menu item -->
    <a href="#" class="menu-item">
      <div class="menu-item-content">Item 1</div>
    </a>
    <a href="#" class="menu-item">
      <div class="menu-item-content">Item 2</div>
    </a>
    <!-- Menu item with icon only -->
    <a href="#" class="menu-item icon-only">
      <div class="menu-item-content">
        <i class="f7-icons">edit</i>
      </div>
    </a>

    <!-- Menu item with dropdown -->
    <div class="menu-item menu-item-dropdown">
      <div class="menu-item-content">Left</div>
      <!-- Dropdown container -->
      <div class="menu-dropdown menu-dropdown-left">
        <!-- Dropdown content -->
        <div class="menu-dropdown-content">
          <!-- Dropdown link -->
          <a href="#" class="menu-dropdown-link menu-close">Menu Item 1</a>
          <a href="#" class="menu-dropdown-link menu-close">Menu Item 2</a>
          <a href="#" class="menu-dropdown-link menu-close">Menu Item 3</a>
          <a href="#" class="menu-dropdown-link menu-close">Menu Item 4</a>
          <!-- Dropdown divider -->
          <div class="menu-dropdown-divider"></div>
          <a href="#" class="menu-dropdown-link menu-close">Menu Item 5</a>
          <a href="#" class="menu-dropdown-link menu-close">Menu Item 6</a>
        </div>
      </div>
    </div>
  </div>
</div>

Where

  • menu - main Menu container
    • menu-inner - addition internal wrapper
      • menu-item - single menu item element. It can be both link (<a>) and div
        • menu-item-content - menu item content for text, icons and whetever else required.
      • menu-item-dropdown - additional class to be set on menu-item when it contains dropdown
        • menu-dropdown - menu item's dropdown container
        • menu-dropdown-left - additonal class to tell dropdown position relatively to menu item. Can be also menu-dropddown-center and menu-dropddown-right
          • menu-dropdown-link - dropdown link item
          • menu-close - additional class on element to close dropdown on such element click
          • menu-dropdown-divider - dropdown divider element

Let's look at related App methods to work with Menu:

app.menu.open(el)- opens Menu dropdown

  • el - HTMLElement or string (with CSS Selector). Menu item with dropdown to open.

app.menu.close(el)- closes Menu dropdown

  • el - HTMLElement or string (with CSS Selector). Menu item with dropdown to close.

It is possible to close Menu dropdown (if you have them in DOM) using special classes:

  • To close Menu dropdown we need to add "menu-close" class to any HTML element (prefered to link)

Menu will fire the following DOM events on menu dropdown element and events on app instance:

DOM Events

EventTargetDescription
menu:openedMenu Dropdown Item<div class="menu-item-dropdown">Event will be triggered right after menu dropdown will be opened
menu:closedMenu Dropdown Item<div class="menu-item-dropdown">Event will be triggered right after menu dropdown will be closed

App Instance Events

EventArgumentsDescription
menuOpened(el)Event will be triggered right after menu dropdown will be opened. As an argument event handler receives menu dropdown item element
menuClosed(el)Event will be triggered right after menu dropdown will be closed. As an argument event handler receives menu dropdown item element

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

Note that commented variables are not specified by default and their values is what they fallback to in this case.

:root {
  --f7-menu-text-color: #fff;
  --f7-menu-font-size: 16px;
  --f7-menu-font-weight: 500;
  --f7-menu-line-height: 1.2;
  --f7-menu-bg-color: rgba(0, 0, 0, 0.9);
  --f7-menu-item-pressed-bg-color: rgba(20, 20, 20, 0.9);
  --f7-menu-item-padding-horizontal: 12px;
  --f7-menu-item-spacing: 6px;
  --f7-menu-item-height: 40px;
  --f7-menu-item-dropdown-icon-color: rgba(255, 255, 255, 0.4);
  --f7-menu-item-border-radius: 8px;
  /*
  --f7-menu-dropdown-pressed-bg-color: var(--f7-theme-color);
  */
  --f7-menu-dropdown-item-height: 28px;
  --f7-menu-dropdown-divider-color: rgba(255, 255, 255, 0.2);
  --f7-menu-dropdown-padding-vertical: 6px;
  /*
  --f7-menu-dropdown-border-radius: var(--f7-menu-item-border-radius);
  */
}
.aurora {
  --f7-menu-font-size: 13px;
  --f7-menu-item-height: 28px;
  --f7-menu-dropdown-item-height: 24px;
  --f7-menu-item-border-radius: 5px;
  --f7-menu-item-padding-horizontal: 10px;
}

Examples

Plain Links

<div class="menu">
  <div class="menu-inner">
    <a href="#" class="menu-item">
      <div class="menu-item-content">Item 1</div>
    </a>
    <a href="#" class="menu-item">
      <div class="menu-item-content">Item 2</div>
    </a>
    <a href="#" class="menu-item icon-only">
      <div class="menu-item-content">
        <i class="f7-icons">edit</i>
      </div>
    </a>
    <a href="#" class="menu-item icon-only">
      <div class="menu-item-content">
        <i class="f7-icons">share</i>
      </div>
    </a>
  </div>
</div>

Dropdowns

<div class="menu">
  <div class="menu-inner">
    <div class="menu-item menu-item-dropdown">
      <div class="menu-item-content">Left</div>
      <div class="menu-dropdown menu-dropdown-left">
        <div class="menu-dropdown-content">
          <a href="#" class="menu-dropdown-link menu-close">Menu Item 1</a>
          <a href="#" class="menu-dropdown-link menu-close">Menu Item 2</a>
          <a href="#" class="menu-dropdown-link menu-close">Menu Item 3</a>
          <a href="#" class="menu-dropdown-link menu-close">Menu Item 4</a>
          <div class="menu-dropdown-divider"></div>
          <a href="#" class="menu-dropdown-link menu-close">Menu Item 5</a>
          <a href="#" class="menu-dropdown-link menu-close">Menu Item 6</a>
        </div>
      </div>
    </div>
    <div class="menu-item menu-item-dropdown">
      <div class="menu-item-content">Center</div>
      <div class="menu-dropdown menu-dropdown-center">
        <div class="menu-dropdown-content" style="height: 200px">
          <a href="#" class="menu-dropdown-link menu-close">Menu Item 1</a>
          <a href="#" class="menu-dropdown-link menu-close">Menu Item 2</a>
          <a href="#" class="menu-dropdown-link menu-close">Menu Item 3</a>
          <a href="#" class="menu-dropdown-link menu-close">Menu Item 4</a>
          <div class="menu-dropdown-divider"></div>
          <a href="#" class="menu-dropdown-link menu-close">Menu Item 5</a>
          <a href="#" class="menu-dropdown-link menu-close">Menu Item 6</a>
          <a href="#" class="menu-dropdown-link menu-close">Menu Item 7</a>
          <div class="menu-dropdown-divider"></div>
          <a href="#" class="menu-dropdown-link menu-close">Menu Item 8</a>
          <a href="#" class="menu-dropdown-link menu-close">Menu Item 9</a>
          <a href="#" class="menu-dropdown-link menu-close">Menu Item 10</a>
        </div>
      </div>
    </div>
    <div class="menu-item menu-item-dropdown">
      <div class="menu-item-content">Right</div>
      <div class="menu-dropdown menu-dropdown-right">
        <div class="menu-dropdown-content">
          <a href="#" class="menu-dropdown-link menu-close">Menu Item 1</a>
          <a href="#" class="menu-dropdown-link menu-close">Menu Item 2</a>
          <a href="#" class="menu-dropdown-link menu-close">Menu Item 3</a>
          <a href="#" class="menu-dropdown-link menu-close">Menu Item 4</a>
          <div class="menu-dropdown-divider"></div>
          <a href="#" class="menu-dropdown-link menu-close">Menu Item 5</a>
          <a href="#" class="menu-dropdown-link menu-close">Menu Item 6</a>
        </div>
      </div>
    </div>
    <div style="margin-left: auto" class="menu-item menu-item-dropdown">
      <div class="menu-item-content icon-only">
        <div class="menu-item-content">
          <i class="f7-icons">share</i>
        </div>
      </div>
      <div class="menu-dropdown menu-dropdown-right">
        <div class="menu-dropdown-content">
          <a href="#" class="menu-dropdown-link menu-close">
            <span>Share on Facebook</span>
            <i class="f7-icons margin-left">logo_facebook</i>
          </a>
          <a href="#" class="menu-dropdown-link menu-close">
            <span>Share on Twitter</span>
            <i class="f7-icons margin-left">logo_twitter</i>
          </a>
        </div>
      </div>
    </div>
    <a href="#" class="menu-item icon-only">
      <div class="menu-item-content">
        <i class="f7-icons">edit</i>
      </div>
    </a>
  </div>
</div>