Menu Vue Component

    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.

    There are following components included:

    • f7-menu-item
    • f7-menu-dropdown
    • f7-menu-dropdown-item
    EventDescription
    <f7-menu-item> events
    clickEvent will be triggered on menu item click
    menu:openedEvent will be triggered right after menu dropdown will be opened
    menu:closedEvent will be triggered right after menu dropdown will be closed
    <f7-menu-dropdown-item> events
    clickEvent will be triggered on menu dropdown item click

    Plain Links

    Dropdowns

    1. <f7-menu>
    2.   <f7-menu-item text="Left" dropdown>
    3.     <f7-menu-dropdown left>
    4.       <f7-menu-dropdown-item href="#" text="Menu Item 1"></f7-menu-dropdown-item>
    5.       <f7-menu-dropdown-item href="#" text="Menu Item 2"></f7-menu-dropdown-item>
    6.       <f7-menu-dropdown-item href="#" text="Menu Item 3"></f7-menu-dropdown-item>
    7.       <f7-menu-dropdown-item href="#" text="Menu Item 4"></f7-menu-dropdown-item>
    8.       <f7-menu-dropdown-item divider></f7-menu-dropdown-item>
    9.       <f7-menu-dropdown-item href="#" text="Menu Item 5"></f7-menu-dropdown-item>
    10.       <f7-menu-dropdown-item href="#" text="Menu Item 6"></f7-menu-dropdown-item>
    11.     </f7-menu-dropdown>
    13.   <f7-menu-item text="Center" dropdown>
    14.     <f7-menu-dropdown center content-height="200px">
    15.       <f7-menu-dropdown-item href="#" text="Menu Item 1"></f7-menu-dropdown-item>
    16.       <f7-menu-dropdown-item href="#" text="Menu Item 2"></f7-menu-dropdown-item>
    17.       <f7-menu-dropdown-item href="#" text="Menu Item 3"></f7-menu-dropdown-item>
    18.       <f7-menu-dropdown-item href="#" text="Menu Item 4"></f7-menu-dropdown-item>
    19.       <f7-menu-dropdown-item divider></f7-menu-dropdown-item>
    20.       <f7-menu-dropdown-item href="#" text="Menu Item 5"></f7-menu-dropdown-item>
    21.       <f7-menu-dropdown-item href="#" text="Menu Item 6"></f7-menu-dropdown-item>
    22.       <f7-menu-dropdown-item href="#" text="Menu Item 7"></f7-menu-dropdown-item>
    23.       <f7-menu-dropdown-item divider></f7-menu-dropdown-item>
    24.       <f7-menu-dropdown-item href="#" text="Menu Item 8"></f7-menu-dropdown-item>
    26.       <f7-menu-dropdown-item href="#" text="Menu Item 10"></f7-menu-dropdown-item>
    27.     </f7-menu-dropdown>
    28.   </f7-menu-item>
    30.   <f7-menu-item text="Right" dropdown>
    31.     <f7-menu-dropdown right>
    32.       <f7-menu-dropdown-item href="#" text="Menu Item 1"></f7-menu-dropdown-item>
    33.       <f7-menu-dropdown-item href="#" text="Menu Item 3"></f7-menu-dropdown-item>
    34.       <f7-menu-dropdown-item href="#" text="Menu Item 4"></f7-menu-dropdown-item>
    35.       <f7-menu-dropdown-item divider></f7-menu-dropdown-item>
    36.       <f7-menu-dropdown-item href="#" text="Menu Item 5"></f7-menu-dropdown-item>
    37.       <f7-menu-dropdown-item href="#" text="Menu Item 6"></f7-menu-dropdown-item>
    38.     </f7-menu-dropdown>
    39.   </f7-menu-item>
    41.   <f7-menu-item style="margin-left: auto" icon-f7="share" dropdown>
    42.     <f7-menu-dropdown right>
    43.       <f7-menu-dropdown-item href="#">
    44.         <span>Share on Facebook</span>
    45.         <f7-icon class="margin-left" f7="logo_facebook"></f7-icon>
    46.       </f7-menu-dropdown-item>
    47.       <f7-menu-dropdown-item href="#">
    48.         <span>Share on Twitter</span>
    49.         <f7-icon class="margin-left" f7="logo_twitter"></f7-icon>
    50.       </f7-menu-dropdown-item>
    51.     </f7-menu-dropdown>
    52.   </f7-menu-item>
    54. </f7-menu>

    Messagebar →