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:
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:
Log in to your administrator panel using your credentials.
Locate Menus dropdown in the top menu of your Joomla control panel and click on it.
Choose Main Menu => Add New Menu Item item from the dropdown.
To assign a Food Menu Layout to a newly created item, follow the steps below:
Locate Details tab.
Locate Menu Item Type field and click Select.
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.
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.
With these settings, your menu at the front-end will look similar to the screenshot below.
Full/ two columns menu
No Images Menu