Recipe App Home with Categories

Recipe app home screen with search, meal type category chips, a recipe of the day card, a quick recipes list with time and difficulty, filters sheet and bottom tabs.

Also known as: recipe app ui, cooking app home screen, food recipe app design, meal category chips, recipe list with filters

Bootstrap 5 Mobile Home & Feed Responsive #app #filter #food #mobile #recipe #responsive

Recipe App Home with Categories live demo

Open in new tab

Bootstrap 5 code (HTML, CSS, JS)

Beautify

An HTML mobile template for a recipe app home screen with search, meal type category chips, a recipe of the day card, a quick recipes list with cooking time and difficulty, a filters bottom sheet and bottom tabs. Use this cooking app UI as the start screen of a food blog PWA, meal planner or mobile recipe site, or package it with Capacitor. Built with Bootstrap 5, Bootstrap Icons and Outfit in white with fresh green and tomato accents. The food photos come from Unsplash; replace them with your own images.

How it works

The root .rch-app is a centred app column (max 430 px). The header greets the user by time of day, followed by the .rch-search form, the .rch-chips row, the .rch-daily card and the .rch-quick list; the .rch-tabs nav sticks to the bottom.

Every .rch-item carries data-meal, data-time (minutes) and data-level. The script combines the pressed chip, the search text, the maximum time and the difficulty levels; apply() hides items that do not match, updates .rch-quick__count and shows the .rch-empty state when nothing matches.

The filter button opens the Bootstrap offcanvas .rch-sheet with a segmented time control (radio buttons) and difficulty checkboxes. Submitting with no difficulty shows an error; otherwise the filters apply and a badge shows how many are active. Hearts toggle aria-pressed and update the Saved tab badge.

Customization

--rch-green, --rch-green-dark and --rch-green-soft on .rch-app: the primary colour for chips, buttons and the active tab.
--rch-tomato and --rch-tomato-soft on .rch-app: the accent for the recipe of the day badge, saved hearts and Medium labels.
data-meal, data-time and data-level on each .rch-item: add your recipes; a recipe can belong to several meal types, e.g. lunch vegan.
height: 216px on .rch-daily__img: makes the featured card taller or shorter.
The value of the name="time" radios: change the time limits in the filters sheet.
The part array in script.js: change the greeting and meal hints, or remove it for a fixed title.

Use cases

Recipe and cooking apps: browse by meal type and find something quick
Food blogs as PWAs: feature one recipe per day above the latest recipes
Meal planning and nutrition apps: filter by time and difficulty before adding to a plan

Accessibility

The search is a role="search" form with a hidden label. Category chips are buttons in a labelled group and use aria-pressed. The recipe count is a role="status" region, and a hidden live region announces filter results and saved recipes. Save buttons have labels that change ("Save Avocado Egg Toast" / "Remove … from saved"). The filters sheet uses fieldsets with legends, traps focus and closes with Escape or the backdrop. The current tab has aria-current="page", and touch targets are at least 44 px.

Usage notes

Requires Bootstrap 5 (offcanvas) and Bootstrap Icons; Outfit is loaded from Google Fonts. The recipe links use href="#" in the demo; replace them with your recipe page URLs.

Recipe App Home with Categories at a glance

Framework: Bootstrap 5
Code: HTML, CSS, JavaScript
JavaScript: Vanilla JavaScript, no jQuery
Dependencies: Bootstrap 5, Bootstrap Icons, fonts.googleapis.com
Layout: Mobile-first app screen, centred on wider screens
Category: Mobile Home & Feed
License: Free for personal and commercial use

Questions about this template

Can I use the Recipe App Home with Categories code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

Load Bootstrap 5 and Bootstrap Icons and fonts.googleapis.com from a CDN (the links are under Requirements). Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Can I turn this screen into an iOS or Android app?

Yes. It is plain HTML, CSS and JavaScript, so it works in a mobile website or progressive web app as it is. To ship it as a store app, put it in the web folder of a Capacitor or Cordova project and build it for iOS and Android; replace the sample data with calls to your own API.

How does it look on a desktop screen?

The screen is designed for phones. On wider screens it stays at phone width in the middle of the page, so it still looks like an app. The live demo opens at mobile width; use the Tablet and Desktop buttons to check other sizes.

Requirements

Add these to your page (already included in the download):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap">