K
K12worX Education501(c)(3) Public Charity
Jamboree

Adding New Links

Learn how to add new navigation items, update menus, and create internal links throughout the K12worX website.

What You'll Learn

  • How to add items to the main navigation
  • Creating links between pages
  • Link best practices
  • Testing navigation changes
  • Common pitfalls to avoid

Understanding Our Navigation

Where Navigation Lives

Open components/layout/Navigation.tsx:

const navItems = [
  { name: "About", href: "/about" },
  { name: "The Model", href: "/model" },
  { name: "Future Programs", href: "/programs" },
  { name: "Updates", href: "/updates" },
  { name: "Launching", href: "/launching" },
  { name: "Learning Guide", href: "/learn" },
  { name: "Get Involved", href: "/get-involved" },
  { name: "Contact", href: "/contact" },
];

This single array controls BOTH:

  • Desktop navigation (horizontal menu)
  • Mobile navigation (hamburger menu)

Change it once, updates everywhere!

Step 1: Decide What to Add

Let's add a "Blog" link (even if the page doesn't exist yet).

Step 2: Open Navigation File

components/layout/Navigation.tsx

Step 3: Add to navItems Array

Find the array (around line 7):

const navItems = [
  { name: "About", href: "/about" },
  { name: "The Model", href: "/model" },
  { name: "Future Programs", href: "/programs" },
  { name: "Updates", href: "/updates" },
  { name: "Launching", href: "/launching" },
  { name: "Learning Guide", href: "/learn" },
  { name: "Get Involved", href: "/get-involved" },
  { name: "Contact", href: "/contact" },
];

Add your new link:

const navItems = [
  { name: "About", href: "/about" },
  { name: "The Model", href: "/model" },
  { name: "Future Programs", href: "/programs" },
  { name: "Updates", href: "/updates" },
  { name: "Launching", href: "/launching" },
  { name: "Learning Guide", href: "/learn" },
  { name: "Blog", href: "/blog" },              // ← New!
  { name: "Get Involved", href: "/get-involved" },
  { name: "Contact", href: "/contact" },
];

Step 4: Save and Preview

  1. Save the file (Cmd+S or Ctrl+S)
  2. Check both desktop and mobile navigation
  3. "Blog" should appear in both!

Click the new link:

  • It will show a 404 error (page doesn't exist yet)
  • That's okay! We're just learning to add links

To create the actual page (optional):

  1. Create app/blog/page.tsx
  2. Add basic content (see Chapter 03 for page structure)

Exercise 2: Reorder Navigation Items

Change the Order

Want "Contact" to appear first? Just move it in the array!

Before:

const navItems = [
  { name: "About", href: "/about" },
  // ...
  { name: "Contact", href: "/contact" },
];

After:

const navItems = [
  { name: "Contact", href: "/contact" },  // ← Moved to top
  { name: "About", href: "/about" },
  // ...
];

Save and see: Contact now appears first!

Exercise 3: Remove a Navigation Item

Delete an Item

Don't want "Future Programs" in nav? Delete it!

Find:

{ name: "Future Programs", href: "/programs" },

Delete the entire line (including comma)

Save: Menu updates immediately!

Note: The page still exists (/programs), just not in navigation.

Adding Links in Page Content

Import at top of file:

import Link from 'next/link'

Use in JSX:

<Link href="/about" className="text-blue-600 hover:text-blue-800">
  Learn about us
</Link>

Internal links (same website):

<Link href="/contact">Contact Us</Link>
<Link href="/about">About</Link>
<Link href="/blog/my-post">Blog Post</Link>

External links (other websites):

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  External Site
</a>

Key differences:

  • Internal: Use <Link> from Next.js (faster navigation)
  • External: Use regular <a> tag

Example from Our Codebase

From app/page.tsx:

<Link
  href="/technology"
  className="text-blue-600 font-semibold hover:text-blue-800 transition-colors"
>
  Learn about our technology →
</Link>

Exercise 4: Add a Link in Homepage Content

Find a Good Spot

Open app/page.tsx and find the Mission section (around line 46):

<p className="text-lg text-gray-600 max-w-3xl mx-auto">
  To celebrate the potential of students in underserved US communities by closing the educational opportunity gap.
</p>

Add this below the paragraph:

<p className="text-lg text-gray-600 max-w-3xl mx-auto">
  To celebrate the potential of students in underserved US communities by closing the educational opportunity gap.
</p>
<Link
  href="/about"
  className="text-blue-600 font-semibold hover:text-blue-800 transition-colors inline-block mt-4"
>
  Learn more about our mission →
</Link>

Verify It Works

  1. Save
  2. Check homepage
  3. Click the new link
  4. Should navigate to /about page

Regular link (inline text):

<Link href="/page">Click here</Link>

Button-style link (styled as button):

<Link
  href="/page"
  className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition inline-block"
>
  Get Started
</Link>

In app/page.tsx, find any section and add:

<Link
  href="/get-involved"
  className="inline-block px-8 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors"
>
  Join Our Team
</Link>

Note: inline-block is important for padding to work on links!

1. Descriptive Link Text

{/* ✅ Good: Describes destination */}
<Link href="/contact">Contact our team</Link>
<Link href="/blog">Read our blog</Link>

{/* ❌ Bad: Vague */}
<Link href="/contact">Click here</Link>
<Link href="/blog">More</Link>

2. Consistent Styling

{/* ✅ Good: Consistent hover states */}
<Link className="text-blue-600 hover:text-blue-800 transition-colors">

{/* ❌ Bad: No visual feedback */}
<Link className="text-blue-600">

{/* ✅ Good: External links should be secure */}
<a
  href="https://external-site.com"
  target="_blank"
  rel="noopener noreferrer"
>
  External Link
</a>

{/* ❌ Bad: Security risk */}
<a href="https://external-site.com" target="_blank">
  External Link
</a>

Why:

  • target="_blank": Opens in new tab
  • rel="noopener noreferrer": Prevents security vulnerabilities

4. Accessibility

{/* ✅ Good: Clear what happens */}
<Link href="/document.pdf">
  Download user guide (PDF, 2MB)
</Link>

{/* ✅ Good: Icons with text */}
<Link href="/external" className="flex items-center gap-2">
  Visit site
  <ExternalLinkIcon className="w-4 h-4" />
</Link>

5. Keyboard Navigation

All links should be accessible with keyboard:

  • Tab to focus
  • Enter to activate

Good news: Next.js <Link> handles this automatically!

Pattern 1: Text Link

<Link
  href="/about"
  className="text-blue-600 hover:text-blue-800 underline"
>
  Learn more
</Link>

<Link
  href="/signup"
  className="inline-block px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
>
  Sign Up
</Link>

<Link
  href="/post"
  className="block p-6 bg-white rounded-lg shadow hover:shadow-lg transition"
>
  <h3 className="font-bold mb-2">Article Title</h3>
  <p>Article description...</p>
</Link>

<Link
  href="/more"
  className="text-blue-600 hover:text-blue-800 font-semibold"
>
  Read more →
</Link>

<Link href="/product">
  <img src="/product.jpg" alt="Product name" className="rounded-lg hover:opacity-90 transition" />
</Link>

Testing Navigation Changes

Visual Testing

Check these on both desktop and mobile:

  • New link appears in navigation
  • Link text is readable
  • Hover states work
  • Active states work (if applicable)
  • Spacing looks good

Functional Testing

Test each new link:

  • Clicking navigates to correct page
  • Back button works after clicking
  • Link opens in new tab (if external with target="_blank")
  • Keyboard navigation works (Tab + Enter)

Responsive Testing

Resize browser and check:

  • Desktop menu shows link
  • Mobile menu shows link
  • Link doesn't overflow container
  • Link wraps properly if needed

Common Mistakes

Mistake 1: Forgetting the Comma

{/* ❌ Syntax error: Missing comma */}
const navItems = [
  { name: "About", href: "/about" }
  { name: "Contact", href: "/contact" },
]

{/* ✅ Correct */}
const navItems = [
  { name: "About", href: "/about" },  // ← Comma!
  { name: "Contact", href: "/contact" },
]

Mistake 2: Wrong href Format

{/* ❌ Don't include domain for internal links */}
<Link href="http://localhost:3000/about">

{/* ✅ Correct: Just the path */}
<Link href="/about">

Mistake 3: Using <a> for Internal Links

{/* ❌ Slower, full page reload */}
<a href="/about">About</a>

{/* ✅ Fast, client-side navigation */}
<Link href="/about">About</Link>

{/* ❌ Error: Link is not defined */}
<Link href="/about">About</Link>

{/* ✅ Correct: Import at top */}
import Link from 'next/link'
<Link href="/about">About</Link>

Troubleshooting

Problem: New nav item doesn't show

Check:

  1. Did you save the file?
  2. Is the object formatted correctly with name and href?
  3. Is there a comma after the previous item?
  4. Check browser console for errors (F12)

Problem: Link goes to 404 page

This means:

  • Link works correctly!
  • The destination page doesn't exist yet
  • Either create the page or change the href

Check:

  1. Did you add className with your styles?
  2. For button-style links, did you include inline-block?
  3. Inspect element (F12) to see what styles are applied

Solution:

  • Use <a> tag (not <Link>)
  • Add target="_blank"
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  External Site
</a>

Quick Reference

Add to navigation:

// components/layout/Navigation.tsx
const navItems = [
  { name: "Link Text", href: "/path" },
]

Internal link:

import Link from 'next/link'
<Link href="/page">Link text</Link>

External link:

<a href="https://site.com" target="_blank" rel="noopener noreferrer">
  External
</a>

Button-style link:

<Link
  href="/page"
  className="inline-block px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
>
  Button Text
</Link>

Link with arrow:

<Link href="/page" className="text-blue-600 hover:text-blue-800">
  Link text →
</Link>

Practice Exercises

Try these for additional practice:

  1. Add "FAQ" to navigation

    • Add to navItems array
    • Position it before "Contact"

  2. Create a "Back to top" link

    • Add to page footer
    • Link to # (scrolls to top)

  3. Add social media links (footer)

    • External links
    • Open in new tabs

  4. Convert text to link

    • Find plain text that should be a link
    • Wrap it in <Link>

What's Next

Now that you can change text and add links, let's learn to modify styles:

Modifying Styles →