Restaurant Menu Block

Create a menu visitors can scan quickly

[REVIEW] ALL THE PHOTOS HERE ARE LOW QUALITY NEEDS TO BE REDONE

Restaurant Menu turns structured plain text into an editorial food or drinks menu. Sections, item names, prices, descriptions, and calories remain real text, so the result is easier to maintain, search, translate, and read than a menu uploaded as one image.

The live demo above is the real Luna block. Its layout adapts from two columns on larger screens to one column on mobile.

Add a Restaurant Menu block

1. Add Restaurant Menu from the Content category.

2. Add an optional Eyebrow, Title, and Intro to establish the menu context.

3. Enter section headings and menu items in Menu Items using the exact text format described below.

4. Choose responsive column counts and a layout style before refining colors or shadows.

5. Preview the longest item names and descriptions on mobile before publishing.

Write sections and menu items

Start every category on its own line with #, for example # Starters or # Desserts. Add one menu item per line beneath the category.

Use this order: Name | Price | Description | Calories. Example: Burrata | $12 | tomato, basil, focaccia | 420 kcal

Keep the separators consistent. When a value is intentionally omitted, preserve the item’s readable order and preview the result. Use concise descriptions so names, prices, and details remain easy to compare.

Header and menu source

Eyebrow is useful for a season, service, or location. Title names the menu, while Intro can add service hours, a chef note, dietary guidance, or a short positioning statement.

One column menu forces a single reading column. Background image reveals the image selector; use it only when text contrast stays strong across the full image.

Responsive layout options

Set Desktop Columns from one to four, Tablet Columns from one to four, and Mobile Columns to one or two. One mobile column is the safest default for long dish names, descriptions, and prices.

Style offers Cards, Minimal, Editorial, Stacked, and List. Header Align can be Left or Center. Price Style offers Accent, Minimal, and Pill. Show Calories can be disabled when the menu does not provide reliable values.

Colors and background treatment

Background Color controls the complete block. Section/Card Color controls each menu category. Text Color, Title Color, and Price/Accent Color control the hierarchy. Background offers Glow, Paper, and Plain treatments.

Style Panel targets

Style Body, Header, Eyebrow, Title, Intro, Section, Section Title, Item, Item Name, Description, Price, and Calories independently. Section supports hover styling, but the menu must remain understandable without hover.

Accessibility and maintenance

Keep every dish and price as text, maintain sufficient contrast, avoid tiny calorie labels, and do not communicate allergens by color alone. Update the source text rather than replacing the whole menu with a new image.

Tips and common mistakes

• Keep the same price format throughout a menu.

• Do not use four columns when descriptions become narrow or difficult to scan.

• Check spelling, currency, dietary notes, allergens, and calorie accuracy before publishing.

• Use a background image only when it supports, rather than competes with, the menu text.

Quick recipe

Create each category with #, add one item per line in the Name | Price | Description | Calories format, start with two desktop columns and one mobile column, then choose the visual style and color treatment.