Horizontal carousel layout

The horizontal carousel presents each section as a row of cards that guests swipe sideways. It suits curated sections with strong photography, and it is the layout that most resembles a showcase.

What it looks like

• One horizontal row per category, with the category name above it.
• Each item is a card with its image, name and price.
• Guests swipe sideways within a section and scroll down between sections.
• The category navigation jumps between rows.

When it works

• Sections of a handful of items — five to fifteen per row.
• Complete, consistent photography.
• Menus where the sections are the story: signature cocktails, desserts, a chef's selection.
• Sites that want the menu to feel curated rather than exhaustive.

When it does not

• Long sections. A row of forty cards is a bad way to read forty items — guests will not swipe that far.
• Incomplete photography. Cards are the same size whether or not there is an image.
• Menus that are scanned for a specific item.
• Price comparison across a whole section.

The rule of the row

A guest swipes two or three cards and then scrolls. Anything past the fourth or fifth card in a row is effectively hidden.

That has a direct consequence for how you build the menu: put the item you most want ordered first in each section, and split long sections into two categories rather than one long row.

Photography

Cards are visual by nature:

• one image per item;
• one orientation throughout — mixed portrait and landscape ruins a row;
• consistent framing and distance, so cards look like a set;
• avoid images where the dish occupies a small part of the frame.

Sections as the unit of design

This is the layout where category structure matters most. Because each category is a row, the number and order of categories is the shape of the menu.

Aim for:

• five to eight categories;
• five to fifteen items each;
• the most commercial section first.

Loading long menus

Rows load progressively as guests move through the menu, so a large menu does not have to arrive all at once. Test on a real phone connection anyway: a carousel of large images is the heaviest of the five layouts.

Check it on a phone

• [ ] Swiping is smooth and stops cleanly on a card.
• [ ] Card text is legible over the image.
• [ ] Prices are visible on the card without opening the item.
• [ ] Every row has enough items to justify being a row.
• [ ] No row is so long that its end is unreachable in practice.
• [ ] Images are consistent in orientation across every row.
• [ ] The category navigation reaches every row.
• [ ] Images load fast enough at a table.