Section reference › Pricing & commerce

Menu / price list `"type": "menu"`

A price list grouped into tabs, with dotted leaders between each name and its price. Use it for restaurant menus, spa treatments, barber services or any list of named items with prices.

Example#

Paste this into the sections list of a page file:

JSON

{
  "type": "menu",
  "tone": "alt",
  "eyebrow": "Our menu",
  "title": "Seasonal plates, made to share",
  "categories": [
    {
      "name": "Starters",
      "items": [
        {
          "name": "Burrata & heirloom tomato",
          "desc": "Basil oil, sourdough crumb, sea salt",
          "price": "$14",
          "tag": "Vegetarian"
        },
        {
          "name": "Grilled octopus",
          "desc": "Smoked paprika, crushed potatoes, lemon",
          "price": "$18"
        },
        {
          "name": "Beef tartare",
          "desc": "Cured yolk, capers, rye crisps",
          "price": "$16"
        },
        {
          "name": "Charred leeks",
          "desc": "Romesco, toasted hazelnuts",
          "price": "$11",
          "tag": "Vegan"
        }
      ]
    },
    {
      "name": "Mains",
      "items": [
        {
          "name": "Wood-fired half chicken",
          "desc": "Salsa verde, charred greens",
          "price": "$28"
        },
        {
          "name": "Pan-roasted hake",
          "desc": "Mussels, saffron broth, fennel",
          "price": "$32",
          "tag": "Chef's pick"
        },
        {
          "name": "Wild mushroom risotto",
          "desc": "Aged parmesan, thyme, brown butter",
          "price": "$24",
          "tag": "Vegetarian"
        },
        {
          "name": "Dry-aged ribeye",
          "desc": "Bone marrow butter, hand-cut fries",
          "price": "$46"
        }
      ]
    },
    {
      "name": "Desserts",
      "items": [
        {
          "name": "Olive oil cake",
          "desc": "Whipped mascarpone, poached pear",
          "price": "$10"
        },
        {
          "name": "Dark chocolate tart",
          "desc": "Sea salt, crème fraîche",
          "price": "$11"
        }
      ]
    }
  ]
}

Options#

Option	Type	Default	Description
`eyebrow`	string	—	Small label shown above the title.
`title`	string (HTML allowed)	—	Section heading. You can use <em> or <br> inside it.
`text`	string	—	Short intro paragraph under the title.
`headAlign`	string	`center`	Alignment of the eyebrow/title/text block. "start" puts it on the left. Values: `center \| start`
`categories`	array	—	The tabs. Each category has a name and a list of items. With only one category no tabs are shown.
`columns`	number	`2`	1 puts one item per row; any other value shows two columns on large screens. Values: `1 \| 2`

Also accepts the options every section accepts: id, tone, padding, fluid, class, hidden.

Fields of each entry in `categories`#

Option	Type	Default	Description
`name`	string	—	Tab label, e.g. "Starters".
`items`	array	—	The dishes or services in this tab (required, see "categories.items").

Fields of each entry in `categories.items`#

Option	Type	Default	Description
`name`	string	—	Item name.
`price`	string \| number	—	Price shown on the right, exactly as written. Add the currency yourself, e.g. "$14" or "from $40".
`desc`	string	—	Short description under the name (optional).
`tag`	string	—	Small label next to the name, e.g. "New", "Vegan", "Chef's pick" (optional).
`image`	string	—	Small round thumbnail on the left (optional). Use it for all items in a tab or for none, so the rows line up.

Tips#

Prices are plain text, so write the currency yourself ("$14", "€9.50", "from $40").
Keep tab names short (one or two words) so all tabs fit on one line on phones.

Editing it in the HTML files#

Each entry is a .menu-item: the name is in its h3, the price in .menu-price and the description in the p. Tabs are Bootstrap tabs: each tab button's data-bs-target must match the id of its .tab-pane.

Where it's used#

Open these pages in template/ to see it working:

Finance: template/finance/pricing.html (source src/demos/finance/pages/pricing.json)
Law Firm: template/law-firm/fees.html (source src/demos/law-firm/pages/fees.json)
Restaurant: template/restaurant/index.html (source src/demos/restaurant/pages/index.json)
Coffee Shop: template/cafe/index.html (source src/demos/cafe/pages/index.json)
Hotel & Resort: template/hotel/dining.html (source src/demos/hotel/pages/dining.json)
Day Spa & Salon: template/spa/index.html (source src/demos/spa/pages/index.json)
Dental Clinic: template/dental/pricing.html (source src/demos/dental/pages/pricing.json)
Pet Care: template/pet-care/grooming.html (source src/demos/pet-care/pages/grooming.json)
Car Dealer: template/car-dealer/home-2.html (source src/demos/car-dealer/pages/home-2.json)
Photographer: template/photography/packages.html (source src/demos/photography/pages/packages.json)
Portfolio: template/portfolio/uses.html (source src/demos/portfolio/pages/uses.json)

Menu / price list "type": "menu"