You can use the Menu Block to display your restaurant's menu on your site. This is a great alternative to embedding .pdf menus, which aren't always as SEO-friendly as text directly on the page.
Squarespace scans the text you add in the Menu Block for certain formatting. If it detects patterns in the text, the block transforms it into different menu sections.
Tip: For related help, visit Building a restaurant site.
Tip: To create a drop-down menu on your site, visit Using folders.
Watch a video
Step 1 - Add the Menu Block
- Open a page or post editor.
- Click an Insert Point or the +.
- Select Menu.
- For more detailed steps, visit Adding blocks.
Step 2 - Add a menu
To help you get started, the Menu Block includes sample content. We recommend replacing the sample items one-by-one with your own menu items to preserve formatting. You can also delete the content and follow the steps in this section.
The Menu Block can hold multiple menus. For example, you can add your brunch, lunch, dinner, and dessert menus to the same block. To add a menu:
- Enter the name of the menu.
- Add at least three equals signs (=) below it.
Add an optional description or note about the menu directly below the equals signs.
Add more menus below using the same process.
These menus will transform into category navigation on the page. You'll learn how to add the rest of the menu content in the sections below.
Note: If you add only one menu to the block, the category navigation may not appear.
Step 3 - Add a section
You can divide each menu into sections. For example, sections can organize a menu by appetizers, salads, entrées, sides, and desserts.
To create a section:
- Enter the section name below the appropriate menu.
- Add at least three hyphens (-) beneath it.
- On the line directly below the three hyphens, enter an optional description of the section.
- Ensure there's an empty line between sections.
Sections will appear as headings on the page.
Step 4 - Add menu items
To add a menu item:
- Enter the name of the item below a section.
- Add a description of the item below its name.
- To display the price, add a price below the description.
- Add pricing variants by using a slash (/) between prices. This is useful for prices by the glass/bottle or full/half-portions.
- Add market prices by adding $MKT or $Market Price as the price. As long as the currency symbol is first, you can place the price immediately after the menu item or description.
- If you have an odd number of items, adding a <br /> tag at the bottom of the section can help even out menu columns.
Step 5 - Design your menu
Click the Design tab in the Menu Block Editor to style your menu.
Select a style from the Menu Style drop-down menu.
Simple (Centered) creates a single column menu with centered text. This design is ideal for short menus.
Classic (Multi-column) creates a menu with multiple columns and left-aligned text. The number of columns depends on the width of your site and browser.
Select a currency for menu prices from the Currency Symbol drop-down menu. You can choose Dollar ($), the Euro (€), the Pound (£), or the Yen (￥).
Note: The currency symbol selected here overrides the currency symbol used when composing your menu.
Fonts and colors
Text in the Menu Block follows the same style tweaks as your site's body text. To learn more, visit Changing fonts.
The Formatting Help tab in the Menu Block Editor has examples of formatted menus, sections, and menu items.
Tip: If you don't like the formatting of the menu navigation and sections, you can use the Menu Block to just add menu items, then add headers with Text Blocks. For an example, see the Hunter template's demo content.
Menu items aren't aligned
The Menu Block's alignment depends on many factors: whether there are descriptions, title and description text length, the number of items, and more.
Since browsers attempt to create equal columns of content, the text will flow top to bottom, left to right. This means item titles won't always line up perfectly.
If you have an odd number of items, it can help to add the following HTML tag at the bottom of the section:
This may balance out the formatting so the menu items display in even rows.
Text isn't appearing when I'm typing
If you're not seeing text appear as you type, finish entering content then save the block. Reopen it and your content will now appear as it's entered.
My currency symbol isn't available
If you're using an unavailable currency, in the Design tab, click the Currency drop-down menu, and select None. In the Menu tab, menu items use the following structure:
On the third line of an item, enter your price using any currency symbol available on your keyboard. Leave a space between the currency symbol and your price.
I can't paste text into the Menu Block
It's not possible to right-click the Menu Block when editing. To copy and paste content, use keyboard shortcuts instead. To prevent formatting issues, we recommend these shortcuts:
- Copy - ⌘ + C
- Paste - ⌘ + Shift + V
- Copy - Ctrl + C
- Paste - Ctrl + Shift + V
Text isn't formatting correctly
Errors in the Menu Block interfere with its text formatting. To avoid issues, use the following tips to troubleshoot your text:
- Confirm that you have at least three equals signs (=) separating menus and hyphens (-) separating sections.
- Press Return or Enter after every text entry to ensure each line is placed correctly.
- Avoid using the space bar to separate content. The Menu Block doesn't use spaces in this way and won't format text correctly.