MenuCard

Inhalt

Interaktive Speisekarte mit Kategorie- und Diät-Filtern, Preisvarianten und Tags.

Live Demo

Unsere Speisekarte

Stand: März 2026

Diät:

🍕Pizza

1.Margherita

klein7,50 €

groß10,50 €

Tomatensoße, Mozzarella, Basilikum

2.Salami

klein8,50 €

groß11,50 €

Tomatensoße, Mozzarella, Salami

3.Quattro Formaggi

klein9,50 €

groß13,00 €

Mozzarella, Gorgonzola, Parmesan, Pecorino

4.Diavola

klein9,00 €

groß12,50 €

Tomatensoße, Mozzarella, scharfe Salami, Peperoni

5.Vegana

klein8,00 €

groß11,00 €

Tomatensoße, Gemüse, Olivenöl (ohne Käse)

🍝Pasta

20.Spaghetti Napoli

9,00 €

Tomatensoße, frisches Basilikum

21.Penne Arrabiata

9,50 €

Scharfe Tomatensoße, Knoblauch, Chili

22.Tagliatelle Bolognese

11,50 €

Hausgemachte Fleischsoße

23.Lasagne

12,50 €

Klassisch mit Bechamel und Fleischragout

🥗Salate

30.Insalata Mista

7,50 €

Gemischter Salat mit Hausdressing

31.Caprese

9,50 €

Tomaten, Mozzarella, Basilikum, Olivenöl

32.Caesar Salad

10,50 €

Römersalat, Parmesan, Croutons, Caesar-Dressing

12 Gerichte· Alle Preise in Euro

Props / API

Prop	Typ	Pflicht	Default	Beschreibung
`categories`	`MenuCategory[]`	Ja	—	Kategorien mit Items ({name, icon?, items[]})
`showDietFilter`	`boolean`	Nein	`false`	Diät-Filter anzeigen
`accentColor`	`string`	Nein	`'#c0392b'`	Akzentfarbe für aktive Filter
`title`	`string`	Nein	—	Restaurantname im Header
`subtitle`	`string`	Nein	—	Untertitel, z.B. "Stand: 03/2026"
`className`	`string`	Nein	—	Zusätzliche CSS-Klassen

Code-Beispiel

<MenuCard
  title="Unsere Speisekarte"
  subtitle="Stand: März 2026"
  showDietFilter={true}
  accentColor="#c0392b"
  categories={[
    {
      name: 'Pizza', icon: '🍕',
      items: [
        {
          name: 'Margherita', number: '1',
          description: 'Tomatensoße, Mozzarella',
          prices: [{ label: 'klein', value: '7,50 €' }, { label: 'groß', value: '10,50 €' }],
          tags: ['vegetarisch'],
        },
      ],
    },
  ]}
/>