shadcn.io is not affiliated with official shadcn/ui
Pickup Delivery Switch Restaurant Navbar Block for React
A one-bar navbar for a bistro with a Pickup / Delivery switch whose line rewrites itself with the wait and the place, an Order now Shine Button and a bag with its count.
Installation
Overview
A navbar for a restaurant in React with Base UI. The wordmark of Olive & Ember, a wood-fired bistro, leads, and Menu, Reservations, Catering and About follow as plain links, the current page marked by a foreground stroke on the bar's bottom edge. A Pickup / Delivery switch sits in the bar with a line beside it: choose Pickup and it reads "Ready in 15 min at Mill Street", choose Delivery and it reads "Delivery in 35–45 min". The line is a polite status in one grid cell with an unseen copy of each wording, so the bar's width and height never change when it does. An Order now Shine Button and a bag with its count close the row. Below xl the links fold into a sheet from the top, and below lg so does Order now (the line drops its place); below md the switch and the line move into the sheet too, and the bag stays in the bar. It's built from Toggle Group, Badge, Navigation Menu, Sheet, Shine Button and Guides. For restaurants that take orders for pickup and delivery from the same page.
FAQ
How do I change the wording and the wait?
Edit MODES at the top of the file: each mode has an icon, a label, the lead-in, the time and what follows. The switch, the live line and its unseen copies all read that one array, so adding a third way to order (a table, a drive-through) is one more entry. The time sits in a bdi so "35–45 min" keeps its order in right-to-left text.
Why doesn't the bar move when the line changes?
The line is one grid cell holding the live wording and an unseen (invisible, aria-hidden) copy of each wording, so the cell is always as wide as the longest. Nothing is measured and nothing is animated.
How is the change announced?
The live wording is a polite status that is present from load, so a screen reader reads it when you choose a mode, not when the page opens. The switch is one group named "Order type" with one choice always on.
How does the switch work with a keyboard?
Tab reaches the switch; the arrow keys move between Pickup and Delivery, and Enter or Space chooses.
How does it work on a phone?
Below xl a menu button opens a sheet from the top with the links, below lg the sheet also holds Order now, and below md the switch and the line. The bag stays in the bar with its count. Choosing a mode in the sheet changes the same state, so the bar and the sheet always agree.
How do I point the links, Order now and the bag at my own pages?
Edit PAGES: the bar and the sheet read it, and the page you're on takes aria-current="page". Order now and the bag point at #; BAG is the count.
Order now and the bag render the link they're given with render, with nativeButton={false}.
Related
- Pro
A one-bar navbar for a home-goods store: a department select joined to a search field whose popup lists products with their prices, and a bag whose count follows what you choose.
- Pro
Cart Sheet Preview Navbar
Shops and servicesA one-bar navbar for a craft shop whose bag button opens a sheet from the end: steppers, remove buttons, a free-shipping meter and a subtotal worked out from the lines.
- Pro
Buy Rent Switch Real Estate Navbar
Shops and servicesA navbar for a home-search portal in cells on shared hairlines: a Buy / Rent switch that rewrites the search placeholder and the price options, a live count of matching homes, and a heart with saved homes.
- Pro
SaaS Marketing Navbar
Mega menusA one-bar marketing navbar for a product roadmap tool: a wordmark, a Product menu of four areas with icons and one-line descriptions, plain links with the current page marked, Sign in and a Shine Button, and a sheet with the same links on phones.
- Pro
Drill-Down Drawer Navbar
Mobile and drawersA drawer navbar for a travel planner: a Menu button at every width opens a sheet from the end where Plan and Explore slide a second panel in with a Back button, with Pricing and Help centre as plain links and a Shine Button at the foot.
- Pro
Balance Chip Fintech Navbar
Shops and servicesA navbar for a personal-banking app with a balance chip and an eye toggle that hides the amount behind dots without changing the chip's width, a vertical divider and the account's avatar.