Ananta Code Academy
 Continue to Day 8
MODULE 01 · FOUNDATIONS

Menus & Site Navigation

You have Pages now — today you'll connect them into a real navigation menu so visitors can actually get around.

Day 7 of 30 Beginner ~20 min
01 · OVERVIEW

Pages Don't Link Themselves

Publishing a Page doesn't automatically add it anywhere visitors can click to. Navigation menus are a separate, deliberate step — you choose exactly which Pages, Posts, or custom links appear, and in what order.

This separation is a feature, not a limitation: it means your internal "About (draft v2)" page never accidentally shows up in the header.

02 · MENU LOCATIONS

Where Menus Actually Appear

Most themes offer a small set of predefined menu locations. What's available depends on your active theme, but these are the most common.

LOCATION WHERE IT SHOWS
Primary / Header

The main navigation bar, usually at the top of every page.
Footer

A secondary menu near the bottom — often legal links, contact, or quick links.
Mobile

Some themes use a dedicated compact menu for small screens.
HEADS UP

If a menu you built isn't showing up on the site, the most common cause is forgetting to assign it to a location — creating the menu alone isn't enough.

03 · HOW A MENU IS STRUCTURED

Behind a Navigation Menu

A menu is really just an ordered, nestable list of links pointing at content that already exists.

menu-structure.txt 
// A simple Primary menu
Home                // links to the site's homepage
About               // links to the About Page
Blog                // links to the Posts archive
Contact             // links to the Contact Page
  └─ Sub-item: Support // nested under Contact as a dropdown
04 · BUILDING YOUR FIRST MENU

Step-by-Step: Creating a Menu

Work through this in wp-admin to get your first navigation menu live.

  • Go to Appearance → Menus — then click "Create a new menu."
  • Name your menu — something like "Primary" so it's easy to identify later.
  • Add Pages from the left panel — check the boxes for the ones you want, then click "Add to Menu."
  • Drag items to reorder them — and indent an item slightly right to nest it as a sub-item.
  • Assign a Display Location — check "Primary" (or your theme's equivalent), then Save Menu.
    • 05 · FLAT VS. NESTED MENUS

    When to Use a Dropdown

    Nesting isn't just visual — it changes how visitors browse and how quickly they find what they need.

    FLAT MENU Every item sits at the same level. Best for small sites with five or fewer top-level links.
    NESTED MENU Related items grouped under a parent as a dropdown. Best once a section grows past a few sub-pages.
    06 · NAVIGATION CHECKS

    Confirming the Menu Actually Works

    STATUS CHECK
    DISPLAY LOCATION The menu is assigned to a real location — not just saved without one.
    LINK TARGETS Every item points to a Published Page, not a Draft that visitors can't reach.
    MOBILE VIEW Preview the site on a narrow window to confirm the mobile menu still opens correctly.
    07 · BREAKDOWN

    Breaking Down What You Just Learned

    1

    MenusBuilt separately from Pages themselves — nothing appears in navigation automatically.

    2

    Display locationsWhere a menu actually shows — a menu must be assigned to one to appear.

    3

    NestingDragging an item slightly right turns it into a dropdown sub-item.

    4

    Custom linksMenu items don't have to point at Pages — external URLs work too.

    5

    ReorderingDrag-and-drop in Appearance → Menus controls the exact order visitors see.

    08 · TRY IT

    Try It Yourself

    EXERCISE

    Add a custom link to your menu — click "Custom Links" in the left panel, paste in any URL, give it a label, and add it. Notice it behaves exactly like a Page link once added.

    09 · TODAY'S PRACTICE

    Build Your Site's Navigation

    HANDS-ON EXERCISE

    Turn your Pages into a real menu

    This connects everything you've built so far into one navigable site.

    1. Create a new menu named "Primary" under Appearance → Menus.
    2. Add your Home and About Pages, plus a link to your Blog/Posts.
    3. Reorder the items so Home appears first.
    4. Assign the menu to your theme's primary/header location and save.
    5. Visit the site's front end and click through every menu item to confirm it works.
    10 · RECAP

    Recap

    MENUS

    Built and managed separately from the Pages they link to.

    DISPLAY LOCATIONS

    A menu must be assigned to one to actually appear on the site.

    NESTING

    Indenting an item creates a dropdown sub-item.

    CUSTOM LINKS

    Menu items can point anywhere, not just to your own Pages.

    11 · SUMMARY

    Key Takeaways

    • Menus are built separately under Appearance → Menus, not automatically generated.
    • A menu must be assigned to a Display Location to actually show on the site.
    • Drag-and-drop controls both order and nesting for dropdown sub-items.
    • Menu items can link to Pages, Posts, categories, or fully custom URLs.
    • Always click through a new menu on the live site to confirm every link works.
    Course Overview