Skip to content

Restaurant Menu

The Restaurant Menu module lists dishes and drinks. Each entry shows a title, a price, an optional description and an optional image. A line runs between the title and the price, like a printed menu.

Add the Restaurant Menu module, then add one Menu Item for each dish.

Each Menu Item has these settings in its Content tab.

  • Title: The name of the dish.
  • Price: The price as text, including the currency symbol, for example 12.50 with the symbol you use.
  • Description: An optional description.
  • Image: An optional image for the item.
  • Image Alt Text: The alternative text for the image.

Content

Layout

  • Columns: The number of menu columns. The default is 1.
  • Column Gap: The space between columns. The default is 30px.
  • Item Spacing: The vertical space between items. The default is 22px.
  • Price & Title Placement: Inline, Price First or Title First. Inline puts the price on the same line as the title, joined by the leader line. The default is Inline.

Design

Item

Background, border, box shadow and spacing for each menu item. This group also holds:

  • Item Content Alignment: Left, Center or Right. The default is Left.
  • Content Vertical Alignment: Top, Center or Bottom. It sets how the text lines up against the image.
  • Header Spacing Bottom: The space under the title and price row in the Inline placement.

Image

  • Image Position: Left, Right or Top. The default is Left.
  • Image Size (range): The width of the image. The default is 80px.
  • Image Spacing: The space between the image and the text. The default is 20px.
  • Image Size (select): How the image fills its box. Actual Size, Cover or Contain. The default is Actual Size.
  • Image Height: A fixed image height.
  • Border and box shadow for the image.

Title, Price and Description

Font settings for each text. The Title group also has Title Spacing Top and Title Spacing Bottom.

Leader Line

  • Leader Style: None, Dotted, Dashed or Solid. The default is Dotted.
  • Leader Color: The default is #cccccc.
  • Leader Weight: The thickness of the line. The default is 2px.
  • Separator Spacing: The space around the line.