shadcn.io is not affiliated with official shadcn/ui
Restaurant Menu Carousel Block for React
Eight harbour-restaurant dishes in three sections on a two-up track, with a section rail that jumps and follows, a native select on phones, prices from integer cents and dietary marks.
Installation
Overview
Let diners jump to a section of a menu without losing their place, with this restaurant menu carousel for React with Base UI. Saltbox Kitchen, a harbour restaurant, lists eight dishes in Starters, Mains and Desserts on a two-up ruled track. Each cell shows dietary marks as a glyph and a word (Vegan, No gluten, Spicy), the name, a price in tabular figures, two lines of description and a "Popular" dot in foreground weight. A rail at the start lists the sections with their counts and marks the one in view; choosing a section scrolls the track to it, and the rail follows when you drag. On a phone the rail becomes a Native Select above the track. The foot holds the counter, a dot for each step and Previous and Next Buttons. The bands are ruled by Guides. The restaurant and its dishes are made up for the example.
FAQ
How do I add my own dishes?
Edit DISHES, grouped by section. Each has an id, a section, a name, a note, a price in whole cents cents, a diet list (vegan, gluten, spicy) and a popular flag. Prices are integer cents through one helper, so "$9.50" is 950. Add a section by adding its name to SECTIONS.
How does the rail follow the track?
The current section is the section of the first whole dish, or of the last one on the final page. A jump to a section that cannot reach the start of the track keeps that section current until the track moves again.
The jump calls Embla's scrollTo, and the page follows Embla's select event.
How are dietary marks shown?
Each mark is a small glyph and a word, never a colour on its own. A dish with no marks keeps an empty line, so every card has the same height.
How does it work with a keyboard?
Tab reaches the controls and Previous and Next. With focus inside the track's panel, the arrow keys move the track (mirrored in a right-to-left layout) and Home and End jump to the first and last page. Previous and Next stay in the tab order at the ends and are marked as unavailable instead of disabled, so focus never disappears. Cells that are out of view are hidden from the tab order and from screen readers.