Code an app menu - Fun at-home activities for Kids.

All Activities

Code an app menu

Create and code a simple app menu with buttons and icons using block-based or beginner programming; test navigation between screens and customize appearance.

Start Creating

Table of contents

Step-by-step guide to create and code a simple app menu with buttons and icons using block-based or beginner programming

0:00/0:00

Here at SafeTube, we're on a mission to create a safer and more delightful internet. 😊

How to make your first App in one Video for kids! Using Code.Org

What you need

Block-based coding platform account (scratch or mit app inventor), simple icons or images (draw or download), colouring materials or image editor, adult supervision required

Step 1

Open your block-based coding platform and start a new project so you have a fresh workspace.

Step 2

Name your project "My App Menu" so you can find it later.

Step 3

Add a new screen or backdrop and call it "Home" to be your main menu page.

Step 4

Add three buttons on the Home screen and label them "Play" "Settings" and "Info" so users know where each goes.

Step 5

Add or upload icons or small images for each button to make them look fun and easy to recognize.

Step 6

Create a new screen and name it "Game" to be the destination for the Play button.

Step 7

Create a new screen and name it "Settings" to be the destination for the Settings button.

Step 8

Create a new screen and name it "Info" to be the destination for the Info button.

Step 9

On the Home screen add a block or script so clicking the Play button opens the Game screen.

Step 10

On the Home screen add a block or script so clicking the Settings button opens the Settings screen.

Step 11

On the Home screen add a block or script so clicking the Info button opens the Info screen.

Step 12

Change colors fonts and button sizes on each screen to customize the look and make it match your style.

Step 13

Test your app by clicking each button to check it goes to the right screen and fix any broken links or styles.

Step 14

Share your finished app menu on DIY.org so everyone can see your awesome creation.

Final steps

You're almost there! Complete all the steps, bring your creation to life, post it, and conquer the challenge!

Complete & Share

Help!?

What can we use if we can't find the icons or the block-based platform in the instructions?

If you can't find icons or small images, draw or photograph your own and upload them or use built-in shapes, and if your block-based platform is unavailable use Scratch, MakeCode, or a free mobile block-coding app as a substitute for 'Open your block-based coding platform and start a new project'.

My Play button doesn't open the Game screen—what should I check to fix it?

Check that the Play button's script uses the correct 'when clicked' (or tap) event block and that the target screen name exactly matches the 'Game' screen name you created in 'Create a new screen and name it "Game"'.

How can I adapt this app-menu activity for younger or older children?

For younger kids, simplify by using only two buttons (e.g., 'Play' and 'Info'), larger icons, and preset backdrops, while older kids can add extra screens like 'High Scores', custom fonts and styles, and advanced blocks for animations and settings toggles as they customize colors, fonts and button sizes.

What are some ways to enhance or personalize the finished app menu beyond the basic steps?

Enhance it by adding click sound effects, animated icons or screen transitions, a live color/font picker in the Settings screen, and include screenshots plus a written description when you share your finished app menu on DIY.org.

Watch videos on how to create and code a simple app menu with buttons and icons and test navigation between screens

0:00/0:00

Here at SafeTube, we're on a mission to create a safer and more delightful internet. 😊

App Lab Beginner Tutorial - Easily Build Your First App on Code.org

4 Videos

Facts about app development for kids

🧩 Block coding uses puzzle-like pieces you snap together — great for learning logic without typing.

🏗️ MIT App Inventor lets anyone build real Android apps by dragging blocks and components.

🎯 A clear app menu helps people find things fast — designers aim to reach key screens in 1–3 taps.

🎨 App icons are tested at tiny sizes (like 16 x 16 pixels) so they stay recognizable on any screen.

📱 Most phone time happens inside apps, so a friendly menu makes your app more fun to use.

How do you create and code a simple app menu with buttons and icons?

Start by choosing a block-based tool like Scratch, Scratch Jr., or MIT App Inventor. Sketch a simple menu layout and add buttons and icons for each option. Use event blocks (for example, “when button clicked → open screen X”) to wire navigation between screens. Add a back/home button on each screen, test navigation in the simulator or on a device, then tweak spacing, labels, and colors with the child until it feels easy to use.

What materials do I need to build a kid-friendly app menu?

You’ll need a computer or tablet with internet, an account for a block-based builder (Scratch, MIT App Inventor, Thunkable), and a browser. Prepare simple icon images or use built-in assets, and have a mouse or touchscreen for testing. Optional: paper and crayons for sketching layouts, headphones for sound testing, and a second device to preview the app. No advanced coding knowledge required—just curiosity and patience.

What ages is this app menu coding activity suitable for?

This activity suits ages 5–8 with adult help using Scratch Jr. or guided blocks; ages 8–12 can build menus independently with Scratch or MIT App Inventor; teens 13+ can add logic, animations, and simple data storage. Adjust complexity and supervision: younger children need help with reading and precise dragging, while older kids can learn design, event-driven logic, and basic user testing.

What are the benefits of coding a simple app menu with blocks?

Making an app menu teaches sequencing, cause-and-effect, and user-centered design. Kids practice problem-solving when buttons don’t work and learn to iterate based on testing. The activity builds fine motor skills, boosts creativity through icons and colors, and fosters confidence as children see their interface working. It also introduces basic software concepts like events, screens, and navigation in a playful, low-pressure way.

Make things. Learn new skills. Share safely.

DIY is a creative community where kids draw, build, explore ideas, and share.

Try DIY for free

No credit card required

To create a safe space for kid creators worldwide!

Popular Activities

How to Make Slime

Draw a Dog

Code with Scratch

Create pop-up box

Cook Salmon

Popular Courses

Cook for Yourself

Secrets of Drawing

Strange science

Invent Your Machines

Build anything with Lego

Popular Wikis

Famous Architects

Pottery

Painting

Capitals

Political Leaders

Discovery Tools

Kids GPT

Magic Atlas

DIY Wiki

DIY TV

Creativity Tools

Super Draw

Meme Maker

Pixel Art

Pixel Studio

Minecraft Skin Maker

Games & Fun

Would You Rather

Good Boy

Matter Mash

Six-Seven

Teacher Tools

SafeTube

DIY Blog

Product

Log-in

Sign-up

Download for iOS

Download for Android

Pricing

FAQ

Company

About

Community guideline

2025, URSOR LIMITED. All rights reserved. DIY is in no way affiliated with Minecraft™, Mojang, Microsoft, Roblox™ or YouTube. LEGO® is a trademark of the LEGO® Group which does not sponsor, endorse or authorize this website or event. Made with love in San Francisco.