FW Food Menu – Documentation

Mobile Menu Design Template

The Mobile Menu design template provides a mobile-first layout built specifically for touch interaction. Every area of the menu — item cards, detail views, pagination, and cart elements — is designed for small screens from the ground up, making it the most suitable choice when your guests will be browsing and ordering on a smartphone.

Ideal Use Cases

• QR code table menus — place a QR code on each table so guests can open the menu directly on their own phone, browse items, and place orders without handling a physical menu.
• Mobile-only menu pages — a dedicated subdomain or page intended primarily for mobile visitors, such as a takeaway ordering page promoted through social media or SMS campaigns.

Visual Style and Layout

The template replaces the default theme with layouts optimised for touch targets and narrow viewports:

• Full-width item cards — menu items display in a single-column, touch-friendly card layout that is easy to scroll and tap.
• Large tap targets — buttons and interactive elements are sized for fingers, reducing mis-taps on small screens.
• Mobile-optimised item detail view — the single item page uses a layout tailored for portrait phone screens.
• Compact module layouts — module positions render in condensed layouts suited to mobile sidebars and footers.
• Touch-friendly pagination — page controls are sized and spaced for thumb navigation.
• Cart and plugin overrides — cart, image, and other plugin layouts are replaced with mobile-specific versions that maintain usability on small screens.

Although designed for mobile, the layout is fully responsive and displays correctly on desktop browsers.

How to Activate

1. Install the Mobile Menu addon via FW Food Menu → Addons.
2. Go to Extensions → Plugins in Joomla and enable the Mobile Menu design plugin.
3. Open your menu component settings under Settings → General and set Theme to Mobile Menu.

Only one design template plugin can be active at a time. Activating Mobile Menu will replace all default layout overrides with the mobile versions.

Compatible Plugins

The Mobile Menu template works with the Tab Categories plugin, which provides tab-based category navigation. This combination is particularly effective for QR table menus, allowing guests to switch between categories with a single tap at the top of the screen.