Zum Inhalt springen
UI Kit
Accent

Menus

Speisekarten in Gängen, mit Fotos, Tageskarte, Getränke mit Größen, Ernährungsfilter, Mittagstisch und Reservierungsleiste.

7 Variants
Kategorie wechseln

Speisekarte

Details

Was Speisekarte mitbringt, aus Registry und Quellcode gelesen.

Bereich
Industries
Variants
7
Version
1.0.0 · seit 1.0.0
Datei
components/ui/menu.tsx
Bringt mit
utilskitbuttoniconsectionreveal
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 37 eigene Texte
Studio
Im Code anpassen
In Sammlungen
Lokales Geschäft
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle MenuProps aus components/ui/menu.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • variantoptional
    MenuVariant

    courseswith-imagesdailydrinksdietarylunchreservation

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • sectionsoptional
    MenuSection[]

    courses, with-images, drinks, dietary

  • daysoptional
    MenuDay[]

    lunch: one entry per weekday

  • dailyoptional
    MenuDaily

    daily: today's board

  • reservationoptional
    MenuReservation

    reservation: the bar

  • allergensoptional
    Record<string, string>

    Allergen codes and what they mean, e.g. { A: "Gluten", C: "Eggs" }

  • imageoptional
    React.ReactNode

    daily, reservation: the picture

  • currencyoptional
    string

    ISO currency code, EUR by default

  • footnoteoptional
    React.ReactNode

    Small print under the menu, e.g. prices incl. VAT

  • onReserveoptional
    (request: { date: string; time: string; guests: number }) => void

Eingebaute Texte

Diese Texte schreibt Speisekarte selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 37 Texte anzeigen
veganEnglisch VeganDeutsch Vegan
vegetarianEnglisch VegetarianDeutsch Vegetarisch
spicyEnglisch SpicyDeutsch Scharf
glutenFreeEnglisch Gluten freeDeutsch Glutenfrei
lactoseFreeEnglisch Lactose freeDeutsch Laktosefrei
newEnglisch NewDeutsch Neu
signatureEnglisch House favouriteDeutsch Empfehlung des Hauses
allergensEnglisch AllergensDeutsch Allergene
containsEnglisch ContainsDeutsch Enthält
menuSectionsEnglisch Menu sectionsDeutsch Bereiche der Karte
allEnglisch AllDeutsch Alle
dietEnglisch DietDeutsch Ernährung
withoutEnglisch Leave outDeutsch Weglassen
resetEnglisch Reset filtersDeutsch Filter zurücksetzen
filtersEnglisch FiltersDeutsch Filter
showingEnglisch {n} of {total} dishesDeutsch {n} von {total} Gerichten
nothingEnglisch No dish fits all filters. Ask us, the kitchen often finds a way.Deutsch Kein Gericht passt zu allen Filtern. Frag uns, die Küche findet oft einen Weg.
legendEnglisch Allergen keyDeutsch Allergenkennzeichnung
marksLegendEnglisch SignsDeutsch Zeichen
todayEnglisch TodayDeutsch Heute
closedEnglisch ClosedDeutsch Geschlossen
daysEnglisch WeekdaysDeutsch Wochentage
dailyBoardEnglisch Today’s boardDeutsch Tageskarte
dateEnglisch DateDeutsch Datum
timeEnglisch TimeDeutsch Uhrzeit
guestsEnglisch GuestsDeutsch Personen
guestEnglisch {n} guestDeutsch {n} Person
guestsNEnglisch {n} guestsDeutsch {n} Personen
fewerEnglisch One guest lessDeutsch Eine Person weniger
moreEnglisch One guest moreDeutsch Eine Person mehr
requestEnglisch Request a tableDeutsch Tisch anfragen
requestedEnglisch Request sentDeutsch Anfrage gesendet
requestedTextEnglisch We hold a table on {when} for {guests} and confirm by email within the hour.Deutsch Wir halten einen Tisch am {when} für {guests} und bestätigen innerhalb einer Stunde per E-Mail.
changeEnglisch Change requestDeutsch Anfrage ändern
hoursEnglisch Opening hoursDeutsch Öffnungszeiten
callEnglisch CallDeutsch Anrufen
sizeEnglisch SizeDeutsch Größe

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Speisekarte reagiert selbst auf die Tasten Pfeil links, Pfeil rechts und Leertaste.
  • Setzt aria-controls, aria-current, aria-label, aria-labelledby, aria-live, aria-pressed und aria-selected, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen group, status, tab, tablist und tabpanel.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • Jedes Feld hat ein Label, sichtbar oder für Screenreader.
  • Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
  • Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
  • Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

  • Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
  • Bewegt sich mit dem Scrollen, der Fortschritt folgt der Position auf der Seite.
  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 6 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Speisekarte?

Mit aiw add @ai-website/menu. Der Befehl legt die Datei components/ui/menu.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, section und reveal. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Speisekarte?

7 Varianten, Gänge, Mit Fotos, Tageskarte, Getränke, Ernährung und Allergene, Mittagstisch und Reservierungsleiste. Du wählst sie mit der Prop variant, zum Beispiel variant="with-images".

Kann ich die Texte von Speisekarte übersetzen?

Ja. Speisekarte bringt 37 eigene Texte auf Deutsch und Englisch mit, etwa „Vegan“, „Vegetarisch“ und „Scharf“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Speisekarte einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Speisekarte mit aiw_components und installieren sie mit aiw_add @ai-website/menu. Nenn im Prompt die Variante, etwa variant="courses", dann schreibt der Assistent deine Inhalte direkt in die Props.

Ähnliche Components

Mehr aus Industries, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Menus stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert