Note: While our most popular guides have been translated into Spanish, some guides are only available in English.

Menu blocks

Use menu blocks to display your restaurant's menus 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. By using special formatting, you can create multiple menus in a single menu block.

This guide covers adding menu blocks for your restaurant site. To build a drop-down menu in your site's navigation, visit Adding drop-down menus to your navigation with folders

Menu blocks are a premium feature available in Business and Commerce plans.
Tip: If you run a restaurant or another business in the hospitality industry, we recommend Tock, our all-in-one tool for managing reservations, orders, tables, and events.

Add a menu block

To add a menu block:

  1. Edit a page or post, click an insert point, and click Menu from the menu. For help, visit Adding content with blocks.
  2. Edit the text in the Content tab to create your menus, menu sections, and menu items.
  3. Use the Design tab to customize the menu design.
  4. Use the Formatting Help tab for formatting tips.

Add menus

To help you get started, menu blocks include 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 to start from scratch.

Menu blocks can hold multiple menus. For example, you can add your brunch, lunch, and dinner menus to the same block.

To add a menu:

  1. In the content tab, enter the name of the menu.
  2. Add at least three equals signs (=) below it.

Add_the_name_of_a_menu__like_breakfast__then_add_at_least_three_equals_signs_below_it.png

  1. Add an optional description or note about the menu directly below the equals signs.

Add_an_optional_description_or_note_about_the_menu_below_the_equals_signs.png

  1. Add more menus below using the same format. 

Add_more_menus_below__like_Lunch_and_Dinner__using_the_same_format.png

These menus 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.

Add sections

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:

  1. Enter the section name below the appropriate menu.
  2. Add at least three hyphens (-) beneath it.
  3. On the line directly below the hyphens, enter an optional description of the section.

Create_menu_sections_to_divide_between_different_types_of_food__like_Seafood_and_Pancakes.png

Sections will appear as headings on the page.

Add menu items

To add a menu item:

  1. Enter the name of the item below a section.
  2. Add a description of the item below its name.
  3. To display the price, add a price below the description.
  4. Add pricing variants by using a slash (/) between prices. This is useful for prices by the glass/bottle or full/half-portions.
  5. 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.
  6. Add options or add-ons to a menu item by typing + on a new line below the price.
  7. If you have an odd number of items, adding a <br/> tag at the bottom of the section can help even out menu columns.

Add_items_with_descriptions_and_prices_below_each_section.png

Customize the design

You can customize the menu style and the currency symbol of menu blocks.

Menu style

Click the Design tab in the block editor and select a style:

  • Centered creates a single column menu with centered text. This design is ideal for short menus.
  • 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.

Currency symbol

Click the Design tab and select a currency for menu prices from the Currency Symbol drop-down menu. You can choose $Dollar, Euro, £Pound, or ¥Yen.

Note: The currency symbol chosen here overrides the currency symbol used when composing your menu.

Fonts and colors

Use site styles to change your menu's fonts and colors. How you style these depends on which version of Squarespace your site is on.

You can set specific fonts and colors for each text area in the menu block:

  • To set the fonts, use the menu block tweaks in Assign Styles
  • To set the colors, use the menu block tweaks in Colors

To learn more, visit Changing fonts and Changing colors.

Text in the menu block follows the same style tweaks as your site's body text. To learn more, visit Changing fonts and Changing colors.

Formatting help (computer only)

The formatting help tab 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 menu blocks to just add menu items, then add headers with text blocks. For an example, see the Hunter template's demo content.

Troubleshooting

Menu items aren't aligned

Menu block 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:

<br/>

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, enter any currency symbol on the third line of an item and add a space. Then, enter your currency symbol and the price. This will override the built-in currency symbol so your currency symbol will display.

I can't paste text into the menu block

On computers, it's not possible to right-click into menu blocks when editing. To copy and paste content, use keyboard shortcuts instead. To prevent formatting issues, we recommend these shortcuts:

Mac

  • Copy + C
  • Paste - + Shift + V

Windows

  • Copy - Ctrl + C
  • Paste - Ctrl + Shift + V

Text isn't formatting correctly

Errors in menu blocks interfere with their 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 at least three 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. Menu blocks don't use spaces in this way and won't format text correctly.
Was this article helpful?
41 out of 122 found this helpful