Website kits
Restaurant menu page
Restaurant menu page with starters, mains, desserts and drinks as name, description and price rows, a dietary key and an allergen note.
When to use it
A menu page built to be read on a phone at the table or on the way there, which is how most people open it. Each course is a heading followed by plain rows — dish name, one line of ingredients, price on the right — because that is how a printed menu reads and it survives a narrow screen without a table. The dietary key sits above the first course so the symbols mean something before anyone meets them, and each dish carries its markers right after the name. The allergen note comes after the dishes, written plainly, followed by a short booking prompt for anyone who has decided. Replace the dishes and prices first, then delete any marker you cannot stand behind; a gluten-free mark on a dish fried in shared oil is a real risk. Keep the menu as live text rather than a PDF or a photo of the printed card: it loads faster, search engines can read it, and a price changes in seconds.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 42
- Container (grid, 2 columns) × 1
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 39
- Heading × 22
- Icon List × 1
- Button × 1
Things worth knowing
- The dietary key converts to one Icon List widget (filled circle, open circle, check and star) when the Icons option matches the Elementor icon library.
- The markers after each dish name stay as plain characters inside the Heading widget rather than icons, so they move with the name when you edit it.
- Each dish row converts to a small Container holding a Heading for the name and Text Editor widgets for the description and price; duplicate a row in Elementor to add a dish.
- The two-column course grid stacks to one column below 780px; long dish names wrap while the price stays on the right of the row.
- There is no table and no HTML widget apart from the scoped CSS, so every dish and price is editable in the panel.
The HTML
This is the complete source. Copy it, or send it straight to the converter and adjust the options before exporting.
Show the HTML source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Menu — Linden & Salt</title>
<style>
body{margin:0;font-family:'Lato',Helvetica,Arial,sans-serif;color:#231f1b;background:#f6efe3}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
section{padding:72px 0}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif;color:#231f1b;font-weight:700}
h1{font-size:54px;line-height:1.1;letter-spacing:-.02em;margin:0 0 16px}
h2{font-size:32px;line-height:1.2;margin:0 0 6px}
h3{font-size:19px;line-height:1.35;margin:0 0 4px}
p{font-size:16px;line-height:1.7;color:#6e6358;margin:0}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#a64b2f;margin:0 0 14px}
.intro{padding:64px 0 40px;text-align:center}
.intro .lead{max-width:640px;margin:0 auto 28px;font-size:18px}
.key{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;padding:16px 24px;border-top:1px solid #e9dcc6;border-bottom:1px solid #e9dcc6;max-width:720px;margin:0 auto}
.key > div{display:flex;align-items:center;gap:8px;font-size:15px;color:#231f1b}
.g{color:#5f6234;font-size:14px}
.courses{padding-top:24px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 72px}
.course .note{font-size:15px;margin:0 0 22px;color:#5f6234}
.row{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:0 0 18px;margin:0 0 20px;border-bottom:1px dashed #e9dcc6}
.row h3 span{color:#5f6234;font-size:13px;margin-left:4px}
.price{font-family:'Playfair Display',Georgia,serif;font-size:19px;font-weight:700;color:#a64b2f;white-space:nowrap}
.allergens{background:#e9dcc6}
.allergens .wrap{max-width:820px}
.allergens h2{font-size:28px;margin:0 0 12px}
.allergens p{color:#231f1b;margin:0 0 12px}
.cta{background:#231f1b;text-align:center}
.cta h2{color:#f6efe3;margin:0 0 12px}
.cta p{color:#e9dcc6;max-width:560px;margin:0 auto 26px}
.button{display:inline-block;padding:15px 28px;border-radius:999px;background:#a64b2f;color:#f6efe3;text-decoration:none;font-weight:700;font-size:15px;letter-spacing:.03em}
@media(max-width:780px){
section{padding:52px 0}
.wrap{padding:0 16px}
.intro{padding:44px 0 28px}
h1{font-size:38px}
h2{font-size:27px}
.grid{grid-template-columns:minmax(0,1fr);gap:48px}
.key{justify-content:flex-start;padding:14px 4px}
.row{gap:14px}
}
</style>
</head>
<body>
<section class="intro">
<div class="wrap">
<p class="eyebrow">Dinner menu · autumn</p>
<h1>The menu</h1>
<p class="lead">Written each week around what our farms send. Dishes are made to share or to keep to yourself — your server will suggest how much to order for the table.</p>
<div class="key">
<div><span class="g">●</span><span>Vegetarian</span></div>
<div><span class="g">○</span><span>Vegan</span></div>
<div><span class="g">✓</span><span>Gluten-free</span></div>
<div><span class="g">★</span><span>House favorite</span></div>
</div>
</div>
</section>
<section class="courses">
<div class="wrap grid">
<div class="course">
<h2>Starters</h2>
<p class="note">Bread from Rye & Hearth bakery, $5 with cultured butter.</p>
<div class="row"><div><h3>Charred leeks <span>● ✓</span></h3><p>Hazelnut romesco, soft herbs, lemon oil</p></div><p class="price">$13</p></div>
<div class="row"><div><h3>Beef tartare <span>★</span></h3><p>Smoked egg yolk, pickled shallot, rye crisps</p></div><p class="price">$17</p></div>
<div class="row"><div><h3>Beets and whipped feta <span>● ✓</span></h3><p>Roasted and raw beets, honey, toasted seeds</p></div><p class="price">$14</p></div>
<div class="row"><div><h3>Grilled flatbread <span>○</span></h3><p>Wild mushrooms, garlic confit, thyme</p></div><p class="price">$12</p></div>
</div>
<div class="course">
<h2>Mains</h2>
<p class="note">Served with house greens. Sides $7 each.</p>
<div class="row"><div><h3>Wood-roasted lamb shoulder <span>★ ✓</span></h3><p>Charred carrots, salsa verde, lamb jus</p></div><p class="price">$34</p></div>
<div class="row"><div><h3>Squash agnolotti <span>●</span></h3><p>Brown butter, crisp sage, aged sheep’s cheese</p></div><p class="price">$24</p></div>
<div class="row"><div><h3>Market fish <span>✓</span></h3><p>Day boat catch, white beans, fennel, saffron broth</p></div><p class="price">$31</p></div>
<div class="row"><div><h3>Celeriac steak <span>○ ✓</span></h3><p>Salt-baked celeriac, walnut, apple, mustard greens</p></div><p class="price">$22</p></div>
</div>
<div class="course">
<h2>Desserts</h2>
<p class="note">Made by our pastry kitchen every afternoon.</p>
<div class="row"><div><h3>Burnt honey tart <span>● ★</span></h3><p>Cultured crème fraîche</p></div><p class="price">$11</p></div>
<div class="row"><div><h3>Chocolate pot <span>● ✓</span></h3><p>Olive oil, sea salt, cocoa nib tuile</p></div><p class="price">$10</p></div>
<div class="row"><div><h3>Poached pear <span>○ ✓</span></h3><p>Spiced red wine, oat crumble, coconut cream</p></div><p class="price">$10</p></div>
</div>
<div class="course">
<h2>Drinks</h2>
<p class="note">Full wine list available at the table.</p>
<div class="row"><div><h3>House red or white</h3><p>Glass / carafe, from a small producer we rotate monthly</p></div><p class="price">$12 / $34</p></div>
<div class="row"><div><h3>Linden spritz</h3><p>Elderflower, white vermouth, soda, lemon peel</p></div><p class="price">$13</p></div>
<div class="row"><div><h3>Local draft beer</h3><p>Two taps from breweries in the county</p></div><p class="price">$8</p></div>
<div class="row"><div><h3>Garden soda <span>○</span></h3><p>House-made, alcohol-free, flavor changes weekly</p></div><p class="price">$6</p></div>
</div>
</div>
</section>
<section class="allergens">
<div class="wrap">
<h2>Allergies and dietary needs</h2>
<p>Our kitchen handles nuts, dairy, gluten, eggs, fish and shellfish, so we cannot promise any dish is free of traces. Tell us about allergies when you book and again when you order, and we will tell you honestly what we can adapt.</p>
<p>A full allergen list for every dish is available from your server. Prices include sales tax; a discretionary 18% service charge is added for tables of six or more.</p>
</div>
</section>
<section class="cta">
<div class="wrap">
<h2>Hungry yet?</h2>
<p>Tables are released 30 days ahead and the bar is always kept for walk-ins.</p>
<a class="button" href="/contact/#book">Book a table</a>
</div>
</section>
</body>
</html>