About the Restaurant Menu Widget
Zyff's restaurant menu widget puts your menu on any website, free. Build it as sections holding dishes — Starters, Mains, Desserts — each dish with a description, a price and optional dietary markers. Choose a classic list with dotted leaders between dish and price, two columns, photo cards, or a compact layout for a long menu. Prices are free text rather than a number and a currency code, so any currency and any wording works exactly as you type it. The output is one div and one script tag that works in WordPress, Shopify, Wix, Squarespace, Webflow or a hand-written HTML page alike.
How to add a restaurant menu to your website
Build your sections
Add a section for each part of the menu and give it a name. A section can carry a note of its own — "served until 3pm" — under the heading.
Add the dishes
Each dish takes a name, a description and a price. Prices are free text, so "£6", "12.50" and "Market price" all work.
Mark the dietary options
Tap the markers that apply to each dish — vegetarian, vegan, gluten free, dairy free, spicy, new, contains nuts. A key explaining the abbreviations appears under the menu automatically.
Copy the embed code
Paste the container div and script tag where the menu should appear, or download the standalone HTML file. Check the 390px mobile preview before you ship it.
What the Restaurant Menu Widget does
Sections, not a flat list
A menu is two levels deep and this widget models it that way, so a section heading always travels with its dishes — including across a column break, which is where a flattened list falls apart.
Dotted leaders that actually align
The line between a dish and its price is drawn rather than typed, so it fills exactly the space available at any width and is never read aloud by a screen reader.
Dietary markers with a key
Seven standard markers, shown as short badges beside the dish and explained in a key underneath — and the key lists only the markers your menu actually uses.
Any currency, any wording
The price is free text, so "£6", "€6", "₹450", "Market price" and "From 12" all render exactly as typed. Zyff never reformats money for a locale it cannot know.
Four layouts
A classic single list, two columns for a long menu, photo cards when the food photography is good, and a compact layout at a smaller scale.
Nothing to slow your page
The whole menu runs in the visitor's browser from the settings in your snippet, so it makes no request to Zyff when your page loads.
At a glance
| Sections | Up to 12, each with a name and an optional note |
|---|---|
| Dishes | Up to 40 per section, each with a name, description, price and photo |
| Dietary markers | 7: vegetarian, vegan, gluten free, dairy free, spicy, new, contains nuts |
| Price format | Free text — any currency, any wording |
| Layouts | 4 templates: classic list, two columns, photo cards, compact |
| Columns | 1 to 3, breaking between sections and collapsing below 760px |
| Output | One container div plus one script tag, or a downloadable HTML file |
| Price | Free to build; paid plans for saved widgets |
Frequently asked questions
How do I add a menu to my restaurant's website?
Build it in Zyff's menu builder — a section for each part of the menu, then the dishes inside each — and copy the generated embed code into your page. The whole flow is free with no signup, and the snippet is plain HTML, so it drops into any CMS block that accepts custom code.
Is a menu widget better than a PDF?
For most restaurants, yes. A PDF has to be downloaded, pinches and zooms badly on a phone, and its text is much harder for search engines to use than words on the page. A menu widget is readable at any screen size and updates without re-exporting anything.
Can I use any currency?
Yes. The price is a free-text field, so type it exactly as you want it shown — "£6", "€6,50", "₹450", "Market price". There is no currency picker, because that could not express half of those and would imply Zyff formats money for a locale it has no way of knowing.
Are the dietary markers an allergen declaration?
No, and this matters. They are a convenience so customers can scan the menu, not a legal allergen statement — Zyff does not verify them and cannot know what happens in your kitchen. Use the footnote field to tell customers with a serious allergy to speak to staff before ordering, which is what the regulations in most places actually expect.
Can a dish have a lunchtime price and an evening price?
Not as two prices on one dish. The usual approach is two sections — "Lunch" and "Dinner" — or writing it into the price field as free text, which is exactly the sort of case a free-text price handles and a currency field would not.
Do the two columns break in the middle of a section?
No. Columns break between sections rather than between dishes, so a section heading is never left stranded at the foot of one column with its dishes at the top of the next. They collapse to a single column below 760px.
Can I show photos of the dishes?
Yes, with the photo cards layout — each dish gets a small image beside its name. You paste an image URL per dish; Zyff does not host or resize them. Photos are optional per dish, so a partly-photographed menu still looks tidy.
Where do I paste the menu embed code?
Wherever the menu should appear — usually a dedicated menu page. Put the container div in that spot and keep the script tag with it.
Is the restaurant menu widget really free?
Yes. Building it, styling it and embedding it are free with no signup, no trial and no watermark — a free embed carries a small "Menu by Zyff" link, which is how the tool stays free. The classic list and compact layouts are free, and so are the dietary markers: they are the part some customers genuinely need, and charging for the accessible version would be the wrong way round. A paid plan adds the two-column and photo-card layouts, full colour control and removes the attribution link.