Menu blocks

Organize your restaurant's appetizers, entrees, and desserts with a menu directly on your site.

Last updated January 17, 2025

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 dropdowns to your navigation

Accessing this feature

Menu blocks are available in the Basic, Core, Plus, Advanced, Business, Commerce Basic, and Commerce Advanced plans. To learn more, visit Choosing the right Squarespace plan.

Add a menu block

To add a menu block:

  1. Edit a page or post, click Add Block or an insert point, and click Menu from the menu. For help, visit Adding content with blocks.
  2. Open the block editor by clicking the pencil icon on the block.
  3. Edit the text in the Content tab to create your menus, menu sections, and menu items.
  4. Use the Design tab to customize the menu design.
  5. 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

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

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

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.

KB Guide Image

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

Create_menu_sections_to_divide_between_different_types_of_food__like_Seafood_and_Pancakes.png

Sections will appear as headings on the page.

KB Guide Image

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.
  8. If you notice extra padding on some of your menus, learn about setting the minimum height with your first menu.
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 displays before numbers in the third line of menu block items even if you used a different currency symbol or no symbol at all when composing the menu in the Content tab. To use a different currency symbol, review the steps below.

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.

Extra padding on menus

If extra padding or empty space is appearing below some of your menu categories, it may be because of the amount of content in your first menu category. The content in your first menu category sets the minimum height of the menu block. This may cause extra padding to appear in other categories.

For example, if you have an extensive breakfast menu but a short lunch menu, the lunch menu will have white space below its items to match the height of the breakfast menu. To prevent this, add a similar amount of content to each menu, or add the menu with the least content as your first category.

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.
Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.