# Restaurant Website Templates

> Restaurant and bar website templates with menus, opening hours and booking built in, for pubs, cocktail bars, cafés and food trucks. Plain HTML, CSS and JS.

Canonical: https://gsapvault.com/templates/category/restaurant-bar

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.

## 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. **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. **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. **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. **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.

```css
<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

| Template | What it does | Built with | Tone | Structure |
| --- | --- | --- | --- | --- |
| [Restaurant Template](https://gsapvault.com/templates/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 | 5 pages |
| [Cocktail Bar Template](https://gsapvault.com/templates/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 | 6 pages |
| [Rooftop Cocktail Bar](https://gsapvault.com/templates/rooftop-bar-template) | 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 | 6 pages |
| [Wine Bar](https://gsapvault.com/templates/wine-bar-template) | 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 | 6 pages |
| [Pub](https://gsapvault.com/templates/pub-template) | 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 | 5 pages |
| [Coffee Shop Template](https://gsapvault.com/templates/coffee-roaster-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 | 5 pages |
| [Brewery Template](https://gsapvault.com/templates/craft-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 | 5 pages |
| [Food Truck Template](https://gsapvault.com/templates/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 | single page |
| [QR Table Menu Template](https://gsapvault.com/templates/qr-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 | single page |

## Templates in This Category

### 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. Worked example: an oyster and natural-wine bar in Bristol.

- Tier: premium · Difficulty: intermediate
- [View template](https://gsapvault.com/templates/restaurant-template)
- [Clean Markdown for AI agents](https://gsapvault.com/templates/restaurant-template.md)

### 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.

- Tier: premium · Difficulty: advanced
- [View template](https://gsapvault.com/templates/cocktail-bar-template)
- [Clean Markdown for AI agents](https://gsapvault.com/templates/cocktail-bar-template.md)

### 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.

- Tier: premium · Difficulty: advanced
- [View template](https://gsapvault.com/templates/rooftop-bar-template)
- [Clean Markdown for AI agents](https://gsapvault.com/templates/rooftop-bar-template.md)

### 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.

- Tier: premium · Difficulty: advanced
- [View template](https://gsapvault.com/templates/wine-bar-template)
- [Clean Markdown for AI agents](https://gsapvault.com/templates/wine-bar-template.md)

### 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. The pub's badge rides the seam of a split photo hero: drag it to choose the bar or the brewhouse. A tap board you drag onto a flight paddle, a table you lay dish by dish and a pile of event cards to fling fill the inner pages.

- Tier: premium · Difficulty: advanced
- [View template](https://gsapvault.com/templates/pub-template)
- [Clean Markdown for AI agents](https://gsapvault.com/templates/pub-template.md)

### 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. Visitors deal the whole shelf as a fanned stack of bags, filter the shop by flavour, dial a brew guide and pack a subscription box. Worked example: a speciality coffee roaster in Norwich.

- Tier: premium · Difficulty: advanced
- [View template](https://gsapvault.com/templates/coffee-roaster-template)
- [Clean Markdown for AI agents](https://gsapvault.com/templates/coffee-roaster-template.md)

### 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.

- Tier: premium · Difficulty: advanced
- [View template](https://gsapvault.com/templates/craft-brewery-template)
- [Clean Markdown for AI agents](https://gsapvault.com/templates/craft-brewery-template.md)

### 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. Suits street-food vans, coffee carts, pop-ups and market traders.

- Tier: premium · Difficulty: intermediate
- [View template](https://gsapvault.com/templates/food-truck-template)
- [Clean Markdown for AI agents](https://gsapvault.com/templates/food-truck-template.md)

### 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.

- Tier: free · Difficulty: intermediate
- [View template](https://gsapvault.com/templates/qr-menu-template)
- [Clean Markdown for AI agents](https://gsapvault.com/templates/qr-menu-template.md)

## Related Guides

- [92 animated website templates built with GSAP (2026)](https://gsapvault.com/blog/interactive-website-templates) ([Markdown](https://gsapvault.com/blog/interactive-website-templates.md)): 92 animated website templates built with GSAP: portfolios, venues, shops, SaaS, and editorial one-pagers. Seven are completely free to download.
- [28 new website templates, and an offer: request the next one](https://gsapvault.com/blog/new-templates-july-2026) ([Markdown](https://gsapvault.com/blog/new-templates-july-2026.md)): 28 new GSAP website templates in five days: portfolios, restaurants, gyms and SaaS products. Plus what's coming next and how to request a template.
- [138 GSAP animation examples and demos with code (2026)](https://gsapvault.com/blog/gsap-animation-examples) ([Markdown](https://gsapvault.com/blog/gsap-animation-examples.md)): 138 GSAP animation examples with live demos and code: scroll, text, cursor, and canvas effects. Ten are completely free with copy-paste snippets below.

## 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.

## Related Categories

- [Events and Hospitality Templates](https://gsapvault.com/templates/category/events-hospitality)
- [Hotel Website Templates](https://gsapvault.com/templates/category/hotel-travel)
- [Music Website Templates](https://gsapvault.com/templates/category/music-entertainment)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects and complete website templates. Full catalog for agents: https://gsapvault.com/llms-full.txt