How to Rename a Menu and Change URL Structure in Astro Without Breaking the Site?

[Daremonic]

I am currently learning Astro, and I need help with renaming a menu and modifying its URL structure without causing my website to crash.

What I’m Trying to Do
• My website has a “Products” menu, which is currently accessible at http://localhost:4321/products.
• I want to rename this menu from “Products” to “Solutions”, so that the new URL becomes http://localhost:4321/solutions.
• Additionally, the menu items inside the “Products” section are stored as separate files, such as item-a765.md. I also tried renaming these to something like solution1.md, but that caused the whole website to break.

Problems I’m Facing
• When I try to change the URL from /products to /solutions, the website crashes.
• Renaming individual product files also seems to cause errors, making the site unresponsive.
• I’m not sure which files or configurations I need to update to apply these changes correctly.

What I’ve Tried
• I manually updated the navigation label from “Products” to “Solutions”, which worked fine for display purposes.
• I attempted to rename item-a765.md to solution1.md, but this resulted in a site crash.
• I looked for a way to modify the routing structure in Astro but could not figure out the correct files to change.

Questions I Need Help With
1. Which Astro configuration files or routing settings should I update to rename the /products URL to /solutions properly?
2. How should I rename content files (like markdown files) without breaking the site?
3. Are there any dependencies, imports, or references that need to be updated when renaming pages in Astro?
4. What is the correct way to update Astro routes dynamically?
5. Can someone point me to any documentation or tutorials that explain how to make such changes correctly?

Since I’m still new to Astro, I would appreciate any detailed guidance or best practices for renaming menu items and modifying URLs without breaking the entire site. Thank you in advance for your help!

[mearashadowfax]

Hey @Daremonic!

I'd recommend starting with Astro's official tutorial to get hands-on experience:
https://docs.astro.build/en/tutorial/0-introduction/

As for the template:

1. In the navigation.ts file in your utils folder, update the links:

// An array of links for the navigation bar
const navBarLinks = [
  { name: "Home", url: "/" },
  { name: "Solutions", url: "/solutions" },
];

If using i18n, update both language versions, e.g. utils/fr/navigation.ts:

const navBarLinks = [
  { name: "Accueil", url: "/fr" },
  { name: "Solutions", url: "/fr/solutions" },
];

2. In the pages directory, rename the products folder to solutions.
3. Inside the newly renamed solutions folder, open index.astro and check the frontmatter at the top:

// Importing necessary components
import MainLayout from "@/layouts/MainLayout.astro";
import PrimaryCTA from "@components/ui/buttons/PrimaryCTA.astro";
import CardSmall from "@components/ui/cards/CardSmall.astro";
import CardWide from "@components/ui/cards/CardWide.astro";
import FeaturesStatsAlt from "@components/sections/features/FeaturesStatsAlt.astro";
import TestimonialsSectionAlt from "@components/sections/testimonials/TestimonialsSectionAlt.astro";

Make a note of the CardSmall and CardWide components, then open them.

5. In CardSmall.astro (or similar components), update the links:

<a
  href={productLocale && productLocale !== "en"
    ? `/${productLocale}/solutions/${product.id.replace(/^fr\//, "")}/`
    : `/solutions/${product.id.replace(/^en\//, "")}/`}
>

Then rename the products folder in the content directory to solutions and update the content.config.ts file to reflect this change:

[Daremonic]

Thanks very much. This works like magic. Thanks for open sourcing this template. It has really helped me in learning.