FW Food Menu
Online menu for restaurants, cafe and bars.
Demo Website Product Page

Menu Layout

Menu layout configuration and display options

FW Food Menu layout allows to create a high-end, easy-to-navigate and understand view of your menu on the front-end of your Joomla website. By configuring this layout, you can create the following menu types: Full Menu, Single Category, No Images, and 2 columns menu. In this tutorial, we will learn how to create different menu types via FW Food Menu layout.

We will proceed as follows:

How to create different menu types using FW Food Menu layout

First, let's learn how to display a menu item. To display a menu item, you need to create a menu item and assign a Food Menu Layout to it.

To learn how to create a menu item, follow the steps below:

  1. Log in to your administrator panel using your credentials.

  2. Locate Menus dropdown in the top menu of your Joomla control panel and click on it.

  3. Choose Main Menu => Add New Menu Item item from the dropdown.

  1. Locate Menu Title textbox and enter the name of the menu item into it.

To assign a Food Menu Layout to a newly created item, follow the steps below:

  1. Locate Details tab.

  2. Locate Menu Item Type field and click Select.

  1. Locate FW Food menu dropdown and choose Food Menu Layout from the list.

  1. Click "Save" button. Your screen shoul look similar to the screenshot below.

Now, that we have created a menu item, let's learn how to create different menu types. You can create 5 menu types based on the Food Menu layout:

  • Single Category. Allows to display only one category with its menu items on a single page.

  • Special offers page. Allows to display only promos on a single page.

  • Full Menu. Allows to display all available categories and their menu items on a single page.

  • 2 columns. Allows to arrange all menu items within the menu into 2 columns.

  • No images. Allows to display a menu without images, either it is full or single category menu.

Now, let's learn how to create each of the above-specified menu types.

  1. Go to the Options tab and set it as follows:
  • To create a Single category menu locate Select Categories dropdown and select Cocktails from the list

  • To create Special offers page choose Hot Drinks and Desserts from the list. Then locate Filter field and select Meal of the day, Special, and New from the list. As a result, all promos from the predefined categories will appear on the separate page.

  • To create a Full menu, leave Select Categories field empty.

  • To create a 2 columns menu set Columns Qty field as 2.

  • To create No Images menu set Display Image field as No.

  1. Locate Display PDF button field and click Yes. As a result, Download menu as PDF link will appear at the top on the menu.

  1. Locate Layout design field and select Italian.

  1. Click Save button. Your screen should look similar to the screenshot below:

With these settings, your menu at the front-end will look similar to the screenshot below.

Single Category

Special Offers

Full/ two columns menu

No Images Menu