How to add a restaurant menu to your Webflow website (2026)

Webflow gives you four ways to put a restaurant menu on your website: type it into a Rich text element on a page, upload a PDF to the Assets panel and attach it to a link, build the menu as records in Webflow's CMS (its content management system, where a page draws on structured records such as a list of dishes) and show them with a Collection list, or paste an embed code into a Code Embed element. A Rich text element is the quickest to set up and to edit when the fish runs out, a PDF is the quickest if the menu already exists as a designed file, a CMS menu lets you take a single dish off the page in seconds without republishing the whole site, and an embed is the route to a menu with a photo per dish, search and dietary filters. Whichever you choose, the page goes live only when you publish, and it appears in your navigation only when you add a link to the Navbar yourself.

This guide covers the four routes, the Webflow labels for each, how to put the menu page in your navigation, what the free Starter site and your plan change, how to check the result on a phone, and where MenuFramer fits.

Which way to add your menu on Webflow

A guest opens your site at 6 pm on a phone and taps Menu. What they get depends on which route you took, and the differences show up later, when a price changes, a dish sells out, or someone asks which dishes are gluten free.

Choose by how often the menu changes

If prices or dishes change weekly, a typed element, a CMS list or an embed keeps up and a PDF falls behind, because every change means a new export and a new upload. If the menu is fixed for a season and already exists as a designed file, the PDF gets you live today. If you want each dish to carry a photo and guests to narrow the menu to what they can eat, that is what an embedded menu is for, because Webflow's own filter help says live filtering by guests is not available natively. Our guide to PDF menus and online menus covers what a PDF looks like on a phone and in search.

Before you start: the Designer, publishing and five panels

Webflow calls its building tool the Designer, and the page preview inside it the canvas. Five panels matter here. The Pages panel is where you create the menu page. The Add panel (the A key) holds every element you can drag onto the canvas, including the Rich text element, the Collection list and the Code Embed element. The Assets panel (the J key) holds uploaded files such as a PDF. The Element settings panel (the D key) is where a link gets its destination and a Navbar gets its links. The CMS panel, under the CMS tab, holds Collections, Webflow's word for a set of structured records such as a list of dishes. Webflow calls the account that holds your sites a Workspace, and some features depend on the Workspace plan as well as the site's own plan.

Two things about publishing. Webflow's help says changes go live on the web when you publish, so an edit made in the Designer stays invisible to guests until you click Publish, check the domains and click Publish to selected domains. And every site has a staging address ending in webflow.io, which Webflow's help describes as a development environment for testing custom code and getting design approval before the site goes live on a custom domain; a custom domain needs a Site plan and verified ownership.

Create the menu page

Webflow's help page on the Pages panel gives these steps.

1. Open the Pages panel.
2. Click the Create new page icon, then click New page.
3. Type a name such as Menu in the Page name field.
4. Click Create, or click the arrow on the Create button to save the page as a draft.

Hover over the page in the Pages panel and click the Page settings icon to change its settings later. Webflow's help also notes that moving a page into or out of a folder changes its address, and that a published page's old links then break unless you set up a redirect, so settle the page's place before you print its address on anything.

How to type your menu in a Rich text element

The typed route suits a short menu that changes often and a site where someone on staff will make the edits. Everything below uses the labels from Webflow's help page on the Rich text element.

Add the element and type the menu

1. Press A to open the Add panel and drag a Rich text element onto the menu page.
2. Double-click the element, or select it and press Enter, to start editing.
3. Type a section name such as Starters, select it and choose a heading level. Use the same level for every section.
4. Type each dish on its own line as a name, a short description and a price. Webflow's help lists paragraphs, headings, bulleted and numbered lists, images, links and block quotes among what a Rich text element holds, and says keyboard shortcuts work inside it.
5. For a dish photo, place the cursor where it goes, press the forward slash key to open the list of things you can insert, and choose an image.

Webflow's help does not list tables among the elements a Rich text element holds; it says tables and dividers can be created with custom code in HTML. For most menus, a heading per section and one line per dish reads better on a phone than a table. Keep dietary marks in the description line; our guide to allergens on restaurant menus covers the allergen notices US rules expect, which apply to a typed page as much as to paper.

Make the daily edit without the Designer

Webflow's help page on editing as a content editor says a team member with the content editing role can open the site from the Webflow Dashboard with Open in Webflow, or by adding ?update to the end of the site's address, then select a text element, click its pencil icon and change the text. Content editors can also create and edit Collection items, can publish if Can publish is toggled on for them, and cannot change structure or styles or add custom code. For the fish that runs out at 7:30, that is enough: open the page, change the line, publish.

How to link a PDF menu on Webflow

A PDF is the right route when the menu already exists as a designed file and changes rarely. Webflow's help pages on the Assets panel and link settings give the details.

Upload the file

1. Press J to open the Assets panel, or click the Assets icon in the left toolbar.
2. Click the cloud upload icon, select the PDF and click Open. Dropping the file onto the canvas also adds it to the Assets panel.

Webflow's help lists PDF among the document types the Assets panel accepts, sets the maximum at 10 MB for documents, and says a paid Workspace or Site plan is required to upload documents. It also says every uploaded asset gets a publicly accessible link that search engines may index, so upload only a file meant to be public, which a menu is.

Attach it to a link

1. Add a button or a text link to the menu page and select it. Webflow's help says a file can be attached to any link element.
2. Press D to open the Element settings panel and find Link settings.
3. Choose the File link type and attach the PDF. Webflow's help describes the File type as a premium feature available on paid plans.
4. Check Open in a new tab if you want the menu to open beside your site. Webflow's help says document files open in the same tab unless this is checked.

When the menu changes, Webflow's help says to replace the attachment in the link settings, then publish. If you instead copied the file's address from the Assets panel with Copy Link and pasted it somewhere, Webflow says replacing an asset changes its address, so the pasted link has to be updated by hand.

How to build the menu in Webflow's CMS

The CMS route suits a menu with many dishes, a photo on each, and someone who wants to take one dish off the page at 7:30 without touching anything else. Webflow's help pages on Collections, items, lists and filters give the labels below. One check first: Webflow's pricing page lists CMS items on the Starter and Premium Site plans and describes Basic as for simple sites that do not need a CMS, so confirm your plan includes them.

Create a Dishes Collection

1. Click the CMS tab.
2. Click Create a Collection, or the Create new Collection icon.
3. Choose a Collection template if you want preconfigured fields. Webflow's list of templates includes Menu items and Recipes, and its help says a template adds a default name, address and fields that you can edit afterwards.
4. Name the Collection, for example Dishes.
5. Adjust the fields. Webflow adds Name and Slug by default (the slug is the last part of a dish's address). Add a Plain text field for the description, a Number field for the price, an Image field for the photo, a Switch field such as On the menu, and an Option or Reference field for the section.
6. Click Create Collection.

Add the dishes

1. In the CMS panel, click the Dishes Collection, then click New Dish. Webflow labels the button with the Collection's own item name.
2. Fill in the fields and click Create draft. Webflow's help says every change is saved automatically.
3. Click Publish now to put the dish live straight away, or open the publish options and choose Queue for next site publish.

That Publish now button is the point of the CMS route. Webflow's help says it publishes the item immediately, without waiting for the next full-site publish, and that edits to a published item stay a draft until you publish the item or the site. So when the halibut runs out, open the dish, switch On the menu off, click Publish now, and it is gone from the page.

Show the dishes on the menu page

1. Press A, open Elements, then CMS, and drag a Collection list onto the menu page. Webflow's help says a Collection list can go on any static page.
2. Double-click the list to open its settings, click Source and choose Dishes.
3. Add a text element and an image element inside the Collection item, select each one, open the Element settings panel and click the purple dot to connect it to a field such as Name, the price or the photo.
4. Under Collection list settings, click the plus sign to add a filter, choose the On the menu field, choose is on and click Save.
5. Duplicate the list once per section and change each copy's filter to the section field, so Starters shows only starters. Webflow's filter help says the rules change with the field type, shows Equals for a Reference field, and says filters on one list combine with AND.

Webflow's dynamic content limits page says a page can hold up to 20 Collection lists and a list shows up to 100 items unless pagination is on, which covers a menu with a list per section.

What guests cannot do with a CMS menu

Webflow's filter help says that real-time filtering and sorting on the live website, which it calls faceted navigation, is not yet available natively. The filters you set in the Designer decide what shows, and a guest who wants only the gluten free dishes cannot narrow the list themselves. If that is the point of the menu for you, see the embed route below.

How to embed a menu in a Code Embed element

An embedded menu comes from a service that hosts the menu and gives you a short piece of code. Webflow's help page on custom code embeds gives the steps.

Paste the code

1. Copy the embed code to your clipboard.
2. Press A to open the Add panel and add a Code Embed element to the menu page.
3. Paste the code into the code window that opens.
4. Save and close the window.

To change the code later, Webflow's help says to double-click the element, press Enter with it selected, or click Open code editor in the Settings panel under Code Embed settings; if the element is hard to find on the canvas, the Navigator panel, which lists every element on the page, shows it.

What Webflow says about the element

Three limits come from the help page itself. Custom code in a Code Embed element cannot exceed 50,000 characters, a limit Webflow's update note of 7 May 2024 says applies on all paid sites and workspaces. The element is available if you have one of the Workspace plans the page lists (Core, Growth, Agency or Freelancer) or if the site has an active Site plan. And code wrapped in iframe tags (an iframe is a window in your page that shows a page from another address) previews on the canvas, while some embeds can only be seen on the live website, and nothing goes live until the site is published.

The page also warns against including html, body or head tags, says custom code may conflict with Webflow's own behaviour, and says Webflow's support team cannot help with custom code. An embed code from a menu service is a short, ordinary piece of HTML, so this is rarely a problem, but test on the staging address first.

What a free site and your plan change

Webflow's pricing page in November 2026 describes the free Starter plan as for exploring and experimenting, publishing to an address ending in webflow.io, with 2 static pages, 50 CMS items and 20 Collections. Basic adds a custom domain and 300 static pages and is described as for simple sites that do not need a CMS. Premium, which Webflow's May 2026 post says combines the former CMS and Business plans, lists 20,000 CMS items and 40 Collections. Against the four routes: the typed route works on any plan, the PDF route needs a paid Workspace or Site plan, the CMS route on a custom domain means the plan that includes CMS items, and the Code Embed element needs one of the Workspace plans Webflow lists or an active Site plan.

How to put the page in your navigation and check it on a phone

Add the Navbar link

A Webflow Navbar holds only the links you add to it. Webflow's help page on the Navbar gives these steps.

1. Select any element inside the Navbar on the canvas.
2. Press D and open the Navbar settings in the Element settings panel.
3. Click Add link.
4. Select the new link, open its Link settings, choose Page from the link types and pick Menu from the Page dropdown.
5. Type Menu as the link's text, then publish.

Webflow's help notes that the Navbar's menu button is hidden on desktop and appears at the tablet breakpoint and below (a breakpoint is the screen width at which the layout changes), so on a phone a guest taps the button to see the list.

Check it as a guest

Publish to the webflow.io address first, since Webflow describes it as the place to test before a site goes live. Then do the real check: open the site on a phone from the address a guest would use, in a private browser window so no editing session gets in the way, tap the menu button, tap Menu, and read the first section without zooming. If dish names need a pinch to read, the typed element needs larger headings or the PDF needs to become a page. Point your table QR code at the menu page itself, which our guide to QR code menus covers, and put the same address in your Google Business Profile menu link, which our guide to adding your menu to Google walks through.

How MenuFramer fits a Webflow site

MenuFramer replaces the contents of the menu page on a website you already have, including a Webflow site, with a photo-first menu that guests can search and filter by dietary need. You keep Webflow for everything else. The menu itself is edited in MenuFramer, so when a dish sells out you hide it there and the change shows on your Webflow page without opening the Designer or publishing the site again, because the code you pasted stays the same and the menu it shows comes from MenuFramer.

MenuFramer's embed documentation gives three steps. Open the Share menu in the MenuFramer studio and choose On your website. Choose how the menu sits on your page: Just the menu places the whole menu in one framed piece and is the simplest to paste, while Menu + a page per dish writes the menu into your page as text and gives each dish its own address on your domain, which makes the dishes eligible to be found in search. Copy the code and paste it where your old PDF link or menu photos were, which on Webflow means a Code Embed element on the menu page as described above, then publish. MenuFramer's pricing page lists the website embed on the Pro plan and the search-ready menu on Business.

Two honest notes. MenuFramer's embed page lists builder notes for Squarespace, WordPress.com and Wix, with no note for Webflow, and we have not tested the Menu + a page per dish code inside a Webflow page, so we make no claim about how Webflow handles it; the framed Just the menu option is the one to try first, and Webflow's own help says code in iframe tags previews on the canvas. And an embedded menu is still a page on your Webflow site, so the Navbar link and the publish are still your job. The embed documentation has the steps, and the pricing page has the plan details. Our guide to online menu options for restaurants compares the routes more broadly, and the same job on other builders is in our guides for Squarespace, Wix and WordPress.

Frequently asked questions

Can I put a table of dishes and prices in a Webflow Rich text element?

Webflow's help page on the Rich text element lists headings, paragraphs, lists, images, links, block quotes and custom code among what it holds, and says tables can be created with custom code in HTML. A heading per section with one line per dish works on a phone without a table. If you want columns, paste an HTML table into the element as custom code, and check it on a phone, because a wide table forces a guest to scroll sideways.

Why will my PDF not upload to the Assets panel?

Webflow's help says a paid Workspace or Site plan is required to upload documents to the Assets panel, that documents can be up to 10 MB, and that an unsupported type or an oversized file gives an error. Export the menu again at a smaller size if it is over the limit. Once uploaded, attach it to a button with the File link type, which Webflow also describes as a paid feature.

Where do I paste an embed code in Webflow?

Into a Code Embed element, added from the Add panel to the menu page. Webflow's help says the element holds up to 50,000 characters, needs one of the Workspace plans it lists or an active Site plan, and that code in an iframe (a window in your page showing a page from another address) previews on the canvas while some embeds only appear on the live site. Publish, then open the page on a phone to confirm it loads.

Can guests filter a Webflow CMS menu by dietary need?

Webflow's help page on filtering Collection lists says real-time filtering and sorting on the live website is not yet available natively. The filters you set in the Designer decide which dishes appear, and every guest sees the same list. A menu service that handles filtering, embedded in a Code Embed element, is the route if guests need to narrow the menu themselves.

How do I mark a dish sold out without republishing the whole site?

With the CMS route, open the dish in the CMS panel, change it and click Publish now, which Webflow's help says publishes the item immediately without waiting for a full-site publish. With a typed menu, a content editor can open the site with Open in Webflow or by adding ?update to its address, change the text and publish if Can publish is on for them. With a PDF there is no shortcut: you export, replace the attachment and publish.

Does a Webflow menu page work for search engines?

The text in a Rich text element and in a Collection list is ordinary page text. Whether a search engine shows your menu depends on far more than the builder, and no builder can promise a position. Our guide to restaurant menu SEO covers what Google documents about reading a menu.

Sources

• Webflow Help Center, Pages panel overview, read November 2026.
• Webflow Help Center, Rich text element overview, read November 2026.
• Webflow Help Center, Assets panel, read November 2026.
• Webflow Help Center, Link settings, read November 2026.
• Webflow Help Center, Custom code embed, and Webflow updates, Increased custom code character limit, 7 May 2024, read November 2026.
• Webflow Help Center, Navbar, read November 2026.
• Webflow Help Center, Manage CMS Collections and Collection items overview, read November 2026.
• Webflow Help Center, Collection list, Filter Collection lists and Dynamic content limits, read November 2026.
• Webflow Help Center, Edit site content as a content editor, read November 2026.
• Webflow Help Center, How do I publish or unpublish a Webflow site? and Webflow staging subdomain, read November 2026.
• Webflow, Plans and pricing and Simplified plans and updated pricing, May 2026, read November 2026, for plan features only.
• MenuFramer, Embed on your site and Pricing, read November 2026.