Intermediate
60 mins
Teacher/Student led
+140 XP

A Menu on Every Page

Find out your site has no way back, then add a menu to the top of every page so a reader can move anywhere from anywhere. The menu lists every page by itself.

Teacher Class Feed

Load previous activity

    1 - Start: What We're Building ~5 mins

    Your site has two pages and a button that gets a reader to the second one.

    But there is nothing to get them back.

    Today you add a menu, and a menu goes on every page. By the end of the lesson a reader will be able to move around your whole site from anywhere in it.

    2 - A Menu Is the Same on Every Page ~4 mins

    A menu is the row of page names at the top of a website. You have used hundreds of them.

    Two things make a menu useful:

    • it lists every page of the site
    • it is on every page, in the same place

    The menu block builds itself. You do not tell it which pages to list, it already knows.

    3 - Find the Problem ~5 mins

    See for yourself why your site needs a menu.

    1. Click Your web page.
    2. Click your button to go to the second page.
    3. Try to get back to your first page without using the page names above the preview.

    Check: you cannot. There is no way back, and a real visitor would be stuck.

    Interactive activity

    4 - Put a Menu on Your First Page ~7 mins

    A menu at the top of your first page will list both pages.

    This is the block you need:

    {"blocks": {"languageVersion": 0, "blocks": [{"type": "wp_menu", "fields": {}}]}}
    1. Click Links and buttons on the left.
    2. Drag a menu block to the very top of your Home page.
    3. Click Your web page.

    Check: a row of page names sits above your heading, and it lists both Home and Hobbies.

    If it did not work: the menu is below your heading, so drag it above it. A menu belongs at the top.

    Interactive activity

    5 - Put a Menu on the Second Page ~5 mins

    A menu only works if it is on every page.

    1. Drag a menu block to the very top of your Hobbies page.
    2. Click Your web page and click Hobbies.

    Check: the same row of page names is at the top of this page too.

    Interactive activity

    DigitalSkills.org · Online learning platform

    Unlock the full learning experience

    You're previewing this lesson. Get full access to this lesson and hundreds more — each one ready to teach, with interactive activities, printable resources and pupil progress tracking built in.

    Hundreds of curriculum-aligned lessons
    Interactive activities in every lesson
    Printable resources & progress tracking
    Copyright Notice
    This lesson is copyright of DigitalSkills.org 2017 - 2025. Unauthorised use, copying or distribution is not allowed.
    🍪 Our website uses cookies to make your browsing experience better. By using our website you agree to our use of cookies. Learn more