SponsorsBecome a sponsor
- Get Started
- Events
- Router / Navigation
- Store
- Components
- App / Core
- Accordion / Collapsible
- Action Sheet / Actions
- Appbar
- Area Chart
- Autocomplete
- Badge
- Block / Content Block
- Breadcrumbs
- Button
- Calendar / Datepicker
- Cards
- Checkbox
- Chips / Tags
- Color Picker
- Contacts List
- Data Table
- Dialog
- Elevation
- Floating Action Button / FAB
- Form Data / Storage
- Gauge
- Grid / Layout Grid
- Icons
- Infinite Scroll
- Inputs / Form Inputs
- Lazy Load
- Link
- List View
- List Index
- Login Screen
- Menu
- Menu List
- Messagebar
- Messages
- Navbar
- Notification
- Page
- Panel / Side Panels
- Photo Browser
- Picker
- Pie Chart
- Popover
- Popup
- Preloader
- Progressbar
- Pull to Refresh
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Skeleton
- Smart Select
- Sortable List
- Statusbar
- Stepper
- Subnavbar
- Swipeout
- Swiper
- Tabs
- Text Editor
- Timeline
- Toast
- Toggle
- Toolbar / Tabbar
- Tooltip
- Treeview
- View / Router
- Virtual List
- Framework7 Icons
- Styling
- Dom7
- Touch Utilities
- Utilities
- Plugins API
- Lazy Modules
- Custom Build
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.
Menu Layout
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">pencil</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 containermenu-inner- addition internal wrappermenu-item- single menu item element. It can be both link (<a>) and divmenu-item-content- menu item content for text, icons and whetever else required.
menu-item-dropdown- additional class to be set onmenu-itemwhen it contains dropdownmenu-dropdown- menu item's dropdown containermenu-dropdown-left- additional class to tell dropdown position relatively to menu item. Can be alsomenu-dropddown-centerandmenu-dropddown-rightmenu-dropdown-link- dropdown link itemmenu-close- additional class on element to close dropdown on such element clickmenu-dropdown-divider- dropdown divider element
Menu App Methods
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.
Control Menu With Links
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 Events
Menu will fire the following DOM events on menu dropdown element and events on app instance:
DOM Events
| Event | Target | Description |
|---|---|---|
| menu:opened | Menu Dropdown Item<div class="menu-item-dropdown"> | Event will be triggered right after menu dropdown will be opened |
| menu:closed | Menu Dropdown Item<div class="menu-item-dropdown"> | Event will be triggered right after menu dropdown will be closed |
App Instance Events
| Event | Arguments | Description |
|---|---|---|
| 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: 32px;
--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-dropdown-hover-bg-color: rgba(255, 255, 255, 0.15);
*/
}
Examples
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="title">Menu</div>
</div>
</div>
<div class="page-content">
<div class="block-title">Plain Links</div>
<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">pencil</i>
</div>
</a>
<a href="#" class="menu-item icon-only">
<div class="menu-item-content">
<i class="f7-icons">square_arrow_up</i>
</div>
</a>
</div>
</div>
<div class="block-title">Dropdowns</div>
<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">square_arrow_up</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">pencil</i>
</div>
</a>
</div>
</div>
</div>
</div>