Restaurant Website Templates

Complete restaurant, bar, pub and café sites with the menu, the opening hours and the booking step already designed and animated. Each one is art-directed as a particular room, so the page sells the evening before it asks for a table.

9 templates, 1 free, no build step

£99£79.20

Halloween: 20% off the Vault until 31 October. Ends in 7d 09h 14m 16s

The Vault

Unlock the Vault library for £79.20

All 304 premium items in the Vault library, plus future additions to the library.

Browse templates

What a restaurant website has to do

A restaurant site answers three questions, roughly in this order: what is on the menu, are you open, and can I get a table. Most templates bury two of them under a hero slideshow. The templates here give the menu real structure, keep opening hours in one place so the open-now line, the hours table and the footer always agree, and put a booking step where a hungry visitor can find it. Most are complete multi-page sites with separate pages for the menu, what's on, private hire and finding the place.

The restaurant template is a five-page site laid on a red tablecloth, where printed menu cards lie scattered for visitors to pick up, drag, flick aside and turn over for allergens. The cocktail bar floods the page with a flat, saturated colour for each taste family on the drinks list and opens every drink to show its build in millilitres. The wine bar has a two-room hero that leans towards whichever room you point at, with cream rails down both edges that slide in the menu and a booking drawer. The rooftop bar lets visitors scrub the roof from noon to 23:00 through six matched photographs, with live sunrise and sunset times in the header.

Drinks-led venues have their own. The pub's badge rides the seam of a split photo hero that you drag to choose the bar or the brewhouse, and its tap board pours a four-glass flight paddle. The brewery runs a brew day tank by tank from mill to keg with a draggable valve lever, and books Saturday tours on a rail ticket whose stub tears on confirm. The coffee roaster is a shop as well as a café: visitors deal the range as a fanned stack of colour-coded bags, dial a brew guide and pack a subscription box, with a basket that follows them between pages.

Two are built for food without a fixed dining room. The food truck site is a single page organised around this week's pitches, shown as seven tear-off tickets on a real street map, with a catering quote that stacks foil trays as the guest count rises. The QR table menu is a free, phone-first menu made to be scanned at the table, with dietary chips that filter every dish at once and calories and allergens a tap away.

How to put your menu and hours into a restaurant template

Menus, hours and events are the content that changes every week, so they live in plain markup and small config blocks rather than inside the animation code.

  1. 1

    Enter your real opening hours first

    In most of these templates the open-now line, the hours tables and the footer all read from one hours config. Put your real week in there and every page follows, including the booking times on offer.

  2. 2

    Rewrite the menu as markup

    Dishes, prices and dietary tags are list items with data attributes, and the filters read those attributes. Adding a dish is adding a list item, with no JavaScript to change.

  3. 3

    Replace the photography as a set

    Bundled photographs share one grade so the site reads as one venue. Swap them all for your own at the same dimensions rather than one at a time, or the set will look mismatched.

  4. 4

    Connect bookings and enquiries

    Booking strips, private hire planners and enquiry forms are complete front ends with nothing behind them. Point them at your booking system or a form service, or replace them with your provider's widget.

A dish in the markup, with its dietary tags as data
<li class="dish" data-diet="vg gf">
  <h3>Grilled leeks, romesco, toasted almond</h3>
  <p class="price">&pound;8</p>
</li>

Restaurant & bar at a glance

Compare the 9 templates in this category by what they do, what they are built with, and whether they run light or dark.
Template What it doesBuilt withTone
Restaurant Template A five-page restaurant site laid on a red tablecloth: one dish fills the home page, and on the Menus page printed menu cards lie scattered on the cloth for visitors to pick up, drag, flick aside and turn over for allergens. ScrollTrigger, Draggable, InertiaPlugin, Flip Mixed
Cocktail Bar Template Six-page cocktail bar website template in five flat, saturated colours, one per taste on the drinks list: photographs cut by angled colour planes, a menu you browse by taste where the page floods with each family's colour, a filterable What's On list, a private hire planner, booking and gift vouchers. ScrollTrigger Mixed
Rooftop Cocktail Bar Six-page rooftop bar and cocktail bar website template on white daylight: a ruled-table header with live sunrise and sunset, a hero you scrub from noon to 23:00 through six matched photographs of the roof, a drinks list arranged by the hour, a weather plan, a dated programme and a real map. ScrollTrigger Light
Wine Bar Six-page wine bar website template on a candlelit claret ground: a two-room hero that leans towards the room you point at, cream rails down both edges that slide in a menu and a booking drawer, a ruled drinks list you filter by colour, glass or bottle, table plans and a private hire planner. ScrollTrigger, Flip Dark
Pub Five-page pub website template for pubs, inns, gastropubs and brewery taprooms, and a bar or restaurant website template for any venue with two rooms worth showing. ScrollTrigger Light
Coffee Shop Template A five-page shop and café site where every product owns a saturated colour, so the range reads as a colour field on a neutral grey ground. ScrollTrigger, Draggable, Flip Light
Brewery Template Five-page brewery and taproom website template in safety orange and stainless steel: a hero of three arch-topped photographs, a brew day you drive tank by tank from mill to keg, spec sheets for every beer on tap, a departures board for the week and a tour booking that prints a ticket. ScrollTrigger, Draggable Dark
Food Truck Template A one-page food truck website built around this week's pitches: seven tear-off tickets on a real street map, a hatch board of cut-out dishes and a catering quote that stacks trays. ScrollTrigger, Draggable, MotionPathPlugin Light
QR Table Menu Template A phone-first digital menu made to open from a QR code at the table, with a sticky category bar that crossfades between sections and dietary chips that filter every dish at once. ScrollTrigger Light

Frequently asked questions

Can customers book a table through these templates?

The booking interfaces are complete on the front end, with guests, dates and times that follow your opening hours, but there is no backend and nothing is sent. Each one says so plainly when submitted. Point it at your booking system, such as ResDiary, OpenTable or SevenRooms, or at a form service like Formspree, or swap in your provider's widget.

How hard is it to change the menu?

It is editing a list in HTML. Dishes, prices and dietary tags sit in the markup, and the filters read them from there, so adding or removing a dish needs no JavaScript changes. The QR table menu was built entirely around this, and the full menu stays readable with JavaScript switched off.

Do the maps need an API key?

No. The templates with a street map use MapLibre on OpenFreeMap tiles, which need no key or account. The map loads only as it nears the screen, and without JavaScript it becomes a plain link to OpenStreetMap.

Is there a template for a café, takeaway or food truck?

Yes. The coffee roaster template covers a café with a shop and subscriptions attached. The food truck template suits street-food vans, coffee carts, pop-ups and market traders that move pitch through the week. The QR table menu works for any venue that wants a menu people open from a code on the table.