Menu Display Pro for HubSpot

About Menu Display Pro

Menu Display Pro is a standalone HubSpot CMS module that turns any page into a full restaurant menu. Nested category and item repeaters edited from the page editor, four layouts (grid, list, classic, magazine), 14 dietary tag presets, seasonal rotation flags, live search, dietary filter pills, sticky category navigation, and built-in Schema.org Menu JSON-LD structured data. 90+ style controls. No HubDB. Works on CMS Starter.

Drop it on any HubSpot page — website pages, landing pages, or blog posts — and it inherits theme fonts and primary color automatically. Three completely different looks above with zero code changes, all driven by field values.

Features at a Glance

• Nested repeaters — Up to 20 categories × 50 items each. 1,000 menu items per instance.
• Four layouts — Grid (cards with photos), list (horizontal rows), classic (text-only dotted leaders), magazine (alternating large photos).
• 14 dietary tag presets — Vegetarian, vegan, gluten-free, dairy-free, nut-free, pescatarian, halal, kosher, keto, low-carb, organic, and three spice levels.
• Schema.org Menu JSON-LD — Menu / MenuSection / MenuItem with offers (price + currency), suitableForDiet mapped from tags, nutrition calories. One toggle to enable/disable.
• Live search — Matches item names and descriptions in real time. Combines with dietary filters.
• Dietary filter pills — Auto-generated from tags actually used in your menu. Click to filter.
• Sticky category navigation — Scroll spy updates active state. Smooth scroll on click. Horizontally scrollable on mobile.
• Seasonal rotation — Mark categories as seasonal with badge and "available through" note.
• Special badges — Chef's special, popular, new, signature, limited, locally sourced.
• Featured items — Highlighted accent-colored border for featured dishes.
• Price handling — Single price, price range (e.g. $8–12), or custom suffix (e.g. "market price", "each").
• Multi-currency — 15 ISO 4217 currency codes built in (USD, EUR, GBP, CAD, AUD, JPY, CHF, SEK, NOK, DKK, RON, PLN, MXN, BRL, INR).
• Allergen & calorie lines — Optional display of allergen info and calorie counts per item.
• Full i18n — Every label editable: search placeholder, "all" filter, no-results message, seasonal badge, item count suffix, availability note.
• Two font pickers — Heading and body fonts with theme inheritance defaults.

Style Fields Summary (90+)

Container (2)

Max width, horizontal padding.

Colors (40+)

Section background, heading, eyebrow, subtitle, category name/description/divider, item name/description/price, card background/border/hover border, featured card border, dots color for classic layout, search background/border/focus/text, filter background/text/border/active background/active text, category nav background/active underline, per-tag colors (vegetarian, vegan, gluten-free, spicy, default), special badge background/text, seasonal badge background/text, shadow.

Typography (14)

Two font pickers (heading + body) with theme inheritance, plus independent font sizes for heading, eyebrow, subtitle, category name, category description, item name, item description, price, dietary tag, special badge, filter, and search.

Card (13)

Padding, border radius, border width, shadow preset, hover shadow preset, photo height, photo radius, gap between cards, tag radius, tag padding vertical/horizontal, badge radius, title font weight.

Toolbar (6)

Search radius, search padding, filter pill radius, filter padding vertical/horizontal, toolbar gap.

Spacing (6)

Section padding top/bottom, header-to-toolbar gap, toolbar-to-content gap, category-to-category gap, category-header-to-items gap.

Responsive (2)

Tablet breakpoint (columns halve) and mobile breakpoint (single column, toolbar stacks).

Schema.org JSON-LD — Built for Google Search, AI Overviews & AI Crawlers

Every module instance outputs a complete Schema.org @graph block containing three linked entities: Restaurant, Menu, and WebPage. All three are cross-referenced via @id so Google, Bing, Google AI Overviews, Perplexity, ChatGPT (browse), and Claude can traverse the graph and answer questions about your restaurant, your menu, and individual dishes from one block of structured data.

Restaurant entity

• @type: Restaurant with @id for graph linking
• name, url, telephone
• priceRange — $ through $$$$ (helps AI assistants categorize)
• servesCuisine — array parsed from comma-separated field
• address — full PostalAddress with street, locality, region, postal code, country (for "where is X" AI queries and Google Business Profile)
• openingHours — Schema.org format for "when is X open" queries
• hasMenu — reference to the Menu entity

Menu entity

• @type: Menu with @id, name, inLanguage
• provider — reference back to Restaurant
• hasMenuSection — one per category with id, name, description
• hasMenuItem — one per dish, with:
  • name, description, image URL
  • offers — price, priceCurrency (ISO 4217), availability, seller reference back to Restaurant
  • suitableForDiet — mapped from dietary tags to Schema.org diet URIs (VegetarianDiet, VeganDiet, GlutenFreeDiet, HalalDiet, KosherDiet, LowCalorieDiet)
  • nutrition — NutritionInformation with calorie count when set
  • keywords — allergen list when set (helps AI surface allergen-specific questions)

WebPage entity with Speakable

• @type: WebPage with url, name, inLanguage
• about → Restaurant, mainEntity → Menu (graph traversal hints for AI)
• speakable — SpeakableSpecification with CSS selectors marking menu heading, subtitle, category names, item names, descriptions, and prices as voice-assistant readable (for Google Assistant, Siri, Alexa)

Why this matters for AI Overviews & AI search

Google AI Overviews, Perplexity, ChatGPT browse, and Claude all parse JSON-LD heavily when generating answers. A weak schema (just Menu, no Restaurant context) gives AI nothing to ground a "what's good at Bramble Café" or "is Maison Clara vegetarian friendly" response. The @graph approach outputs Restaurant + Menu + WebPage together with cross-references so AI models see the full picture in one parse.

The speakable annotation tells Google Assistant which CSS selectors to read aloud when the menu is surfaced in a voice query. Without it, voice assistants fall back to guessing, which usually means reading your navigation or footer instead of your menu.

Toggle the schema off from module settings if you're outputting menu schema from another source (Yext, custom integration, etc.) — one switch, no conflicts.

Accessibility

• Semantic HTML — Section landmarks, proper heading hierarchy (H2/H3/H4), article tags on each menu item.
• Keyboard navigation — Search, filter pills, and category nav links fully keyboard operable.
• ARIA labels — Search input, filter group, section landmarks all labeled.
• Focus indicators — Visible focus rings on all interactive elements with focus-visible styling.
• Scroll spy — IntersectionObserver updates the category nav as visitors scroll, without JS polling.
• Color contrast — Default color combinations and per-tag badge colors meet WCAG 2.1 AA contrast requirements.

Responsive Behavior

• Desktop — Full layout at configured column count. Toolbar on a single row. Sticky category nav at the top.
• Tablet — Columns halve (3 → 2, 4 → 2). Magazine layout collapses photo and text to stacked. Category nav remains horizontally scrollable.
• Mobile — Single column. Toolbar stacks vertically (search → filters). List layout items become vertical cards with photo on top. Classic layout becomes single column.

Demo Notes

• Demo 1 (Maison Clara) — Editorial list layout in a narrow 860px column. Warm cream #faf7f2 background. Playfair Display serif + Inter body. Gold #b8851f accent for eyebrow, price, category dividers, and nav underline. Category headers centered and uppercase with a 48px gold rule beneath. Photo thumbnails (180×140) on the left of each row with dashed dividers between items. No cards, no boxes, no shadows — just typography and whitespace. Italic muted descriptions, tabular numeric prices in serif gold, dietary tags rendered as small uppercase dot-separated labels. Three categories (Starters, Mains, Desserts) with 11 dishes including a featured (gold star) chef's special.
• Demo 2 (Classic Steakhouse) — Classic layout with dotted leader lines. Dark #0b0b0b background, gold #d4a853 accent. Cormorant Garamond display serif + DM Sans body. 2 columns, no photos, no filters, no search, no category nav. Three categories (Appetizers, From the Grill, Accompaniments) with 13 total dishes. One item uses the "each" price suffix. Signature badges on hero dishes. Narrower 900px container for print-menu feel.
• Demo 3 (Neighborhood Café) — Magazine layout with alternating large photos. Inter throughout. Sage green #6b9080 accent. EUR currency. Single category (Seasonal Plates) marked seasonal with "Week of April 9" note. 4 dishes with a featured starter. Dietary filter pills shown with square radius (4px) to match the editorial aesthetic. Left-aligned header. Shows how magazine layout reads on a single category with minimal chrome.