webdevpuneet.com

Restaurant Menu

Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel

Related Section Templates

4 sectionsView all →
Menus & listings

Restaurant Menu

Responsive · Animated
Menus & listings

Property Listings

Responsive · Animated
Menus & listings

Product Grid

Responsive · Animated
Menus & listings

Class Timetable

Responsive · Animated

Restaurant Menu — Free Website Section Template

Menus & listings · v1.0.0 · Updated 2026-10-22 · Responsive · GSAP animation · HTML, React & Vue

CategoryMenus & listings
Tagsmenurestaurantcafepricesfooddisheslight
Updated October 20, 2026

Extend with AI

Take This Section Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Two columns of dishes, one on phones
Dotted leaders from each dish to its price
Description and optional tag for every dish
1 to 24 dishes per section; one section per course
Note for allergens, symbols or service
Optional button to bookings or ordering
Warm serif theme by default; any preset or brand kit
Export HTML, a ZIP, React or Vue, or fork to My Code

About this section

Restaurant Menu — Free HTML Menu Section With Prices

Restaurant Menu: A printed-menu style section for restaurants, cafés and bars. Dishes sit in two columns, each with its name, a dotted leader to the price, a short description and an optional tag such as "V" or "Chef’s pick". A note below covers allergens or service, and an optional button links to bookings. Add one section per course: starters, mains, desserts or drinks.

Restaurant Menu brings the look of a printed menu to your website. Dishes sit in two tidy columns with the name, a dotted leader running to the price, a short description and an optional tag such as "V", "GF" or "Chef’s pick".

One section per course

Use the eyebrow for the course name and add a section for starters, mains, desserts or drinks. Each holds 1 to 24 dishes in an editable list you can reorder in seconds.

Practical details

A note under the dishes covers allergens, dietary symbols or service charges, and an optional button links to bookings or ordering. On phones the columns become one, with leaders that still line up.

Warm by default

It ships with a warm palette and a serif heading font that suit restaurants, cafés and bars; switch to any preset or your brand kit. Pair it with the Contact With Map section for opening hours and directions. Export HTML, a ZIP, React or Vue.

Getting the most from it

Write each dish with its main ingredients in a single line and a price, and keep the descriptions short enough to scan on a phone. Mark dietary information, such as vegetarian or gluten-free, in the description text so it is searchable. Group items into the courses guests expect, starters, mains and desserts, and put the dishes you most want to sell first in each group. The same menu layout works for a spa treatment list, a salon price list or a catering package list.

Why use it

Why Use the Restaurant Menu

📜
Feels like a real menu
Leaders and serif type give the familiar, appetising look of a printed menu.
🔎
Readable by search engines
Dishes and prices are real text, unlike a PDF or photo of a menu, so they can be found and read on any device.
✏️
Easy to update
Change a price or swap a dish in seconds when the market or season changes.

How it’s different

How It’s Different From Other Free Section Templates

✎
Editable, not just copyable
Change text, links, images, colours and fonts in the browser before you export, instead of editing someone else’s code by hand.
◐
One theme for every section
Colours, fonts, radius and width are shared CSS variables, so every section you combine looks like one website.
⇲
Responsive by container
Container queries make each section adapt to its own width, in a full page, a column or a page builder.
✦
GSAP animation built in
Every section animates in with GSAP and ScrollTrigger, stays visible without JavaScript and respects reduced motion.
</>
HTML, React and Vue
Export a single HTML file, a ZIP with your images, a React component or a Vue component, or fork the code into My Code.
◍
Free, private, saved
No account and no watermark. Designs, uploaded images and fonts stay in your browser, with a backup file you can restore anywhere.

Step by step

How to Use

  1. 1
    Edit the contentFill in the heading, dishes and note & button in the panel. Wrap words in *asterisks* to colour them.
  2. 2
    Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
  3. 3
    Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
  4. 4
    Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
  5. 5
    Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.

Real-world uses

Common Use Cases

🍝
Restaurant website
Add a section each for starters, mains and desserts with prices and dietary tags, followed by a booking button, so diners decide before they arrive.
☕
Café and bakery
List coffees, teas and pastries with short descriptions and prices, and use the note for oat milk, gluten-free options and opening hours.
🍸
Bar and wine list
Present cocktails or wines by the glass with tasting notes and prices, tagging house specials and new additions to the list.
🚚
Food truck or caterer
Show a compact menu of best sellers with prices, and link the button to pre-orders, catering enquiries or where the truck is parked this week.

In real websites

Website Templates That Use the Restaurant Menu Section

The Restaurant Menu section is part of 2 complete website templates in the free Website Builder, so you can see it in a full page before you use it on its own: Restaurant Website, Hair & Beauty Salon Website. Open any of them in the builder to edit the whole page, or keep customising this section by itself.

Got questions?

Frequently Asked Questions

Add one Restaurant Menu section per course and set the eyebrow to the course name, such as Starters, Mains or Desserts. Sections share one theme, so they look like one menu.

A flexible element between the dish name and the price fills the space with a dotted border, so the dots always reach the price whatever the name’s length.

Yes. Use each dish’s tag for V, VG or GF, and explain the symbols in the note under the menu.

Usually. Text menus load faster, read well on phones, can be found by search engines and are easier to keep up to date than a PDF or image.

It saves an editable copy of your Restaurant Menu in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.

Yes. Every section is free for personal and commercial work, with no account, no watermark and no attribution: export it on its own as HTML, React, Vue or Next.js from its page, or use it in a website you build and export in the Website Builder.