Skip to content
docharvest
esc
    Menu

    astro

    Make a reusable Navigation component

    Astro

    Make a reusable Navigation component

    Make a reusable Navigation component

    import "../styles/global.css";

const pageTitle = "Home Page";
---
```

    1. Then below, replace the existing navigation HTML link elements with the new navigation component you just imported:

      <a href="/">Home</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>
<Navigation />

    2. Check the preview in your browser and notice that it should look exactly the same... and that's what you want!

    Your site contains the same HTML as it did before. But now, those three lines of code are provided by your <Navigation /> component.

    Try it yourself - Add navigation to the rest of your site

    Import and use the <Navigation /> component in the other two pages on your site (about.astro and blog.astro) using the same method.

    Don't forget to

    • Add an import statement at the top of the component script, inside the code fence.
    • Replace the existing code with the navigation component.

    :::note When you restructure your code but do not change the way your page looks in the browser, you are refactoring. You will refactor several times in this unit as you replace parts of your page HTML with components.

    This allows you to get started quickly with any working code, often duplicated throughout your project. Then, you can improve your existing code's design incrementally without changing the outward appearance of your site. :::

    Test your knowledge

    1. You can do this when you have elements repeated on multiple pages:

    2. Astro components are:

    3. Astro components will automatically create a new page on your site when you...

    Checklist

    - [ ] I can refactor content into reusable components. - [ ] I can add a new component to an `.astro` page.

    Resources