---
title: "Menu card layout"
date: 2026-10-08
author: "Claude MCP"
---

# Menu card layout

Available since version 4.6.0. Next to the table layout, Price List can show your items as a menu card, the way a printed restaurant menu reads: no column headings, the name and the price on one line with a row of dots between them, and the description underneath in smaller grey text. The table layout is still there; the menu card is an extra choice, not a replacement.

## Create a menu card

A menu card is a menu item type of its own. Go to **Menus \> \[your menu\] \> New**, choose **Price List** as the menu item type and pick one of:

- **All Categories (Menu Card)**: all your Price List categories with their items.
- **Single Category (Menu Card)** \[PRO\]: one category and its items.
- **Multiple Categories (Menu Card)** \[PRO\]: the categories you select, together on one page.

Your categories and items are the same ones the table layout uses, so you can show the same list as a table on one page and as a menu card on another.

## Menu Card options

The menu item has a **Menu Card** tab with these settings:

| Show Photo \[PRO\] | Shows a photo column on the left of each item. It holds the custom fields whose Field Position is Before Name Column. On by default. |
| --- | --- |
| Photo Width \[PRO\] *(only visible when Show Photo is set to Yes)* | Width of the photo column in px, rem or %. 80px by default. |
| Photo on Mobile \[PRO\] *(only visible when Show Photo is set to Yes)* | Where the photo goes on a narrow screen, where a photo column leaves the text too little room: **Keep beside the text** (default), **Above the name** or **Between the name and the description**. |
| Show Description | Shows the item description under the name, in smaller grey text. On by default. |
| Dotted Leader | Draws the row of dots between the name and the price. On by default. |

The Price Prefix and Price Suffix from the component options are used on a menu card as well, and a featured item keeps its featured styling.

## Custom fields on a menu card \[PRO\]

A menu card has no columns, so the four Field Positions of a custom field get a place of their own on the card:

| Before Name Column | The photo column on the left. Use a media field for a photo of the dish. Hidden when Show Photo is set to No. |
| --- | --- |
| After Name Column | On the name line, directly after the name and before the dots. Good for something short, such as "new" or a spice level. |
| Before Price Column and After Price Column | A row under the description. Good for allergens, diet labels or a calorie count. |

See [Custom Fields](https://www.joomill-extensions.com/documentation/price-list-component/custom-fields) for how to create a field and set its position.

## Structured data

The menu item also has a **Schema.org** tab. For a restaurant menu, set Structured Data to **Menu Card (Menu)** so search engines read the page as a menu with sections and dishes. The layout and the structured data are two separate choices, so this is not switched on automatically. See [Structured data (schema.org)](https://www.joomill-extensions.com/documentation/price-list-component/structured-data).

## Styling

The card follows the fonts and colours of your template. To adjust it, add your own rules under [Custom CSS](https://www.joomill-extensions.com/documentation/price-list-component/custom-css). The classes you need most:

- .pricelist-menucard: the card as a whole
- .menucard-item: one item
- .menucard-name, .menucard-price and .menucard-description: the name, the price and the description
- .menucard-leader: the row of dots
- .menucard-media: the photo column