Skip to content
UI Kit
Accent color

Menus

Menus in courses, with photos, a daily board, drinks with sizes, diet filters, a lunch week and a reservation bar.

7 variants
Switch category

Menu

Details

What Menu brings along, read from the registry and the source.

Area
Industries
Variants
7
Version
1.0.0 · since 1.0.0
File
components/ui/menu.tsx
Brings along
utilskitbuttoniconsectionreveal
npm packages
None
Languages
English and German, 37 texts of its own
Studio
Adjust in code
In collections
Local business
Build with AI
Over MCP in Claude, Cursor, Copilot and Codex

Props

The MenuProps interface from components/ui/menu.tsx, with the comments from the code.

  • 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

Built-in texts

Menu writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 37 texts
veganEnglish VeganGerman Vegan
vegetarianEnglish VegetarianGerman Vegetarisch
spicyEnglish SpicyGerman Scharf
glutenFreeEnglish Gluten freeGerman Glutenfrei
lactoseFreeEnglish Lactose freeGerman Laktosefrei
newEnglish NewGerman Neu
signatureEnglish House favouriteGerman Empfehlung des Hauses
allergensEnglish AllergensGerman Allergene
containsEnglish ContainsGerman Enthält
menuSectionsEnglish Menu sectionsGerman Bereiche der Karte
allEnglish AllGerman Alle
dietEnglish DietGerman Ernährung
withoutEnglish Leave outGerman Weglassen
resetEnglish Reset filtersGerman Filter zurücksetzen
filtersEnglish FiltersGerman Filter
showingEnglish {n} of {total} dishesGerman {n} von {total} Gerichten
nothingEnglish No dish fits all filters. Ask us, the kitchen often finds a way.German Kein Gericht passt zu allen Filtern. Frag uns, die Küche findet oft einen Weg.
legendEnglish Allergen keyGerman Allergenkennzeichnung
marksLegendEnglish SignsGerman Zeichen
todayEnglish TodayGerman Heute
closedEnglish ClosedGerman Geschlossen
daysEnglish WeekdaysGerman Wochentage
dailyBoardEnglish Today’s boardGerman Tageskarte
dateEnglish DateGerman Datum
timeEnglish TimeGerman Uhrzeit
guestsEnglish GuestsGerman Personen
guestEnglish {n} guestGerman {n} Person
guestsNEnglish {n} guestsGerman {n} Personen
fewerEnglish One guest lessGerman Eine Person weniger
moreEnglish One guest moreGerman Eine Person mehr
requestEnglish Request a tableGerman Tisch anfragen
requestedEnglish Request sentGerman Anfrage gesendet
requestedTextEnglish We hold a table on {when} for {guests} and confirm by email within the hour.German Wir halten einen Tisch am {when} für {guests} und bestätigen innerhalb einer Stunde per E-Mail.
changeEnglish Change requestGerman Anfrage ändern
hoursEnglish Opening hoursGerman Öffnungszeiten
callEnglish CallGerman Anrufen
sizeEnglish SizeGerman Größe

Accessibility

Read from the source of the component.

  • Menu handles the keys Arrow left, Arrow right and Space itself.
  • Sets aria-controls, aria-current, aria-label, aria-labelledby, aria-live, aria-pressed and aria-selected, so screen readers announce purpose and state.
  • Uses the roles group, status, tab, tablist and tabpanel.
  • Announces changes through a live region without moving focus.
  • Every field has a label, visible or for screen readers.
  • Adds text for screen readers where icons and graphics stand alone.
  • Shows a visible focus ring when used with the keyboard.
  • The server renders the starting state in full, JavaScript only adds the interaction.

Motion

  • Rises in briefly the first time it comes into view (kit-rise, useInView).
  • Moves with the scroll, its progress follows the position on the page.
  • Brings animations of its own, calmly timed and without wobble.
  • With reduced motion (prefers-reduced-motion) it stays still. 6 places in the code switch motion off then.

Frequent questions

How do I install Menu?

With aiw add @ai-website/menu. The command puts components/ui/menu.tsx into your project, the code is yours from then on. It brings along button, icon, section and reveal. It needs no further npm packages.

Which variants does Menu have?

7 variants, Courses, With photos, Daily board, Drinks, Diet and allergens, Lunch week and Reservation bar. You pick one with the variant prop, for example variant="with-images".

Can I translate the texts of Menu?

Yes. Menu carries 37 texts of its own in English and German, such as “Vegan”, “Vegetarian” and “Spicy”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Menu?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Menu with aiw_components and install it with aiw_add @ai-website/menu. Name the variant in your prompt, for example variant="courses", and the assistant writes your content straight into the props.

Similar components

More from Industries, the same area of the kit.

Often combined with

Sections that usually sit next to Menus on a page.

Often searched

Jump to

Copied to the clipboard