Make a reusable Navigation component

Questi contenuti non sono ancora disponibili nella tua lingua.

Now that you have the same HTML written in multiple pages of your Astro site, it’s time to replace that duplicated content with a reusable Astro component!

Preparati a…

Create a new folder for components
Build an Astro component to display your navigation links
Replace existing HTML with a new, reusable navigation component

Create a new `src/components/` folder

To hold .astro files that will generate HTML but that will not become new pages on your website, you will need a new folder in your project:src/components/.

Create a new file: src/components/Navigation.astro.
Copy your links to navigate between pages from the top of any page and paste them into your new file, Navigation.astro:
src/components/Navigation.astro
```
---
---
<a href="/">Home</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>
```
If there is nothing in the frontmatter of your .astro file, you don’t have to write the code fences. You can always add them back in when you need them.

Import and use Navigation.astro

Go back to index.astro and import your new component inside the code fence:

---
import Navigation from '../components/Navigation.astro';
import "../styles/global.css";

const pageTitle = "Home Page";
---

Then below, replace the existing navigation HTML link elements with the new navigation component you just imported:
src/pages/index.astro
```
<a href="/">Home</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>
<Navigation />
```
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.

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.

Test your knowledge

You can do this when you have elements repeated on multiple pages:
1. restart the dev server
2. refactor to use a reusable component
3. make a new page
Astro components are:
1. reusable
2. fragments of HTML
3. both of the above!
Astro components will automatically create a new page on your site when you…
1. include <html></html>
2. refactor
3. put the .astro file within src/pages/

Checklist

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

Resources

Astro Component Overview
Refactoring external

Contribuisci

Comunità

Make a reusable Navigation component

Create a new `src/components/` folder

Create a Navigation component

Import and use Navigation.astro

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

Test your knowledge

Checklist

Resources

A cosa stai pensando?

Crea una Issue su GitHub

Inviateci un feedback

Inviateci un feedback

Make a reusable Navigation component

Create a new src/components/ folder

Create a Navigation component

Import and use Navigation.astro

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

Test your knowledge

Checklist

Resources

Create a new `src/components/` folder