Menu List

Overview

If you want to make website for restaurant menu then this Menu List Widget is for you. It is used to make customizable and responsive menu in which you can make list of items with prices.

Screenshot

The following is a GIF video to show you how to use the menu list widget and the various options available :
menu item

Menu List Widget

The following is a Menu list widget :
Menu Item
Cheese | Pepper | Mushrooms
$59
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Menu Item
Cheese | Pepper | Mushrooms
$59
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Menu Item
Cheese | Pepper | Mushrooms
$59
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Menu List

Menu Item

  • Title : Set the title of menu item.
  • Includes : Set the text of includes or ingredients.
  • Description : Set description of menu item.
  • Price : Set price of menu item.
  • Image : Set image of menu item.
  • Space Between : Set space between one menu item to other.
  • Vertical Align : Choose vertical alignment of image.
  • Divider : Select divider and divider type from None, Solid, Dashed… etc.
    • Other than None.
  • Divider Color : Set color of divider.
  • Thickness : Set height of divider.

Title Style

  • Color : Set menu title color.
  • Typography : Set the font and text style of menu title.
  • Bottom Space : Set space between title and description.

Item Details

  • Color : Set menu items color.
  • Typography : Set the font and text style of menu items.

Price

  • Color : Set menu description color.
  • Typography : Set the font and text style of description.

Description

  • Width : Set width of image.
  • Spacing : Set space between image and description.

Image

  • Width : Set width of image.
  • Spacing : Set space between image and description.

Normal

  • Border Type : Set the border type.
  • Border Color : Set the border color.
  • Border Width : Set the border width.
  • Border Radius : Set the border radius.

Hover

  • Border Type : Set the border type.
  • Border Color : Set the border color.
  • Border Width : Set the border width.
  • Border Radius : Set the border radius.

Separator Style

  • Type : Select type of separator from Dotted, Dashed… etc.
  • Color : Set the color of separator.
  • Width : Set width of separator.
  • Spacing : Set space between separator and menu item title.
Was this helpful to you?