Crumb
Crumb is a free two-page Bootstrap 5 website template for bakeries, patisseries and cake shops, built with vanilla JavaScript and no jQuery. It ships a one-page home and a dedicated menu-and-order page, with a warm cream-and-butter palette, deep crust-brown accents and a rose-berry highlight set in Fraunces and DM Sans. Every interaction — tabbed menu, add-to-bag cart, order form, gallery lightbox and count-up stats — is progressively enhanced so all content remains visible with JavaScript disabled.
Key features
- Two pages: rich one-page home plus a full menu and online-order page
- Sticky glass navbar with a live bag pill and order/visit CTAs
- Tabbed menu with dotted-leader pricing for breads, pastries, cakes and coffee
- Featured-products grid with add-to-bag, toast confirmation and live counter
- Order builder with form validation and a live bag summary and total
- Locations block with opening hours that auto-highlight the current day
- Instagram-style gallery with a keyboard-accessible lightbox
- Count-up stats, testimonials and validated newsletter sign-up
- Vanilla JS, no jQuery, self-hosted Bootstrap 5, prefers-reduced-motion aware
Best for
- Artisan bakeries and bakehouses
- Patisseries and cake shops
- Coffee shops and cafés with a food menu
- Custom-cake and celebration-cake studios
- Small food businesses wanting online pickup orders
At a glance
- Framework: Bootstrap 5 (self-hosted), no jQuery, vanilla JS only.
- Pages: index.html, menu.html.
- Fonts: Fraunces + DM Sans (Google Fonts).
- Palette: cream, butter, crust brown, rose-berry (CSS custom properties).
- Accessibility: semantic landmarks, ARIA on tabs/lightbox/nav, visible focus, full keyboard support.
- License: free for personal and commercial use.
How to use it
Download the ZIP, unzip it, and open index.html — no build step, nothing to install. Edit the text and images, point any forms at your backend or a form service, and deploy the folder to any static host. Colours and fonts live in css/style.css; the interactions are in js/main.js.
Frequently asked questions
Is Crumb really free to use?
Yes. Crumb is free for both personal and commercial projects, so you can use it for a real bakery or café site. You can customise the colours, copy and images freely. Attribution to uiCookies is appreciated but not required.
Does Crumb use Bootstrap and jQuery?
Crumb is built on Bootstrap 5, which is self-hosted in the template so it works offline and without a CDN. It does not use jQuery at all — every interaction is written in modern vanilla JavaScript. That keeps the template lighter and easier to maintain.
How many pages does the template include?
There are two pages: a one-page home (index.html) covering story, menu, featured products, bakers, locations, gallery, testimonials and newsletter; and a dedicated menu-and-order page (menu.html) with the full priced menu and an order form. The two share one stylesheet and one script, so extending them is straightforward.
Does the online order form actually process payments?
No. The order form and add-to-bag cart are a front-end demonstration only — they validate input, build a live bag summary and show a confirmation message, but no payment is taken and nothing is sent anywhere. To take real orders you would connect the form to your own backend, email service or a checkout provider.
Will the site work if a visitor has JavaScript disabled?
Yes. Crumb is built with progressive enhancement, so all content — menu, prices, hours, images and copy — is fully visible without JavaScript. The scroll-reveal animations only add a hidden start state when a .js class is present on the page, and they also respect the visitor's reduced-motion preference.
Can I change the colours and fonts?
Easily. The whole palette is defined as CSS custom properties at the top of css/style.css, so you can recolour the entire template by editing a handful of variables. The fonts are Fraunces and DM Sans loaded from Google Fonts; swap the font link and the two font-family variables to use your own pairing.
How do I add my own bakery photos?
Every image references a local path in the img/ folder with explicit width and height attributes, descriptive alt text and lazy loading. Replace the placeholder files with your own photos at similar dimensions — square for team and avatar shots, landscape for products and locations — and the layout will hold. The hero image uses fetchpriority for fast loading.
Is the template accessible and mobile-friendly?
Yes. Crumb is responsive and mobile-first, with a navbar that collapses to a working mobile menu. It uses semantic landmarks, ARIA roles on the menu tabs, gallery lightbox and navigation, visible focus styles, and full keyboard support including Escape-to-close and arrow-key navigation in the lightbox and tabs.
