ContextQMD
Back to Withastro

Make a reusable Navigation component

src/content/docs/en/tutorial/3-components/1.mdx

latest4.5 KB
Original Source

import Box from '/components/tutorial/Box.astro'; import Checklist from '/components/Checklist.astro'; import MultipleChoice from '/components/tutorial/MultipleChoice.astro'; import Option from '/components/tutorial/Option.astro'; import PreCheck from '/components/tutorial/PreCheck.astro'; import { Steps } from '@astrojs/starlight/components'; import Badge from "/components/Badge.astro"

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!

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

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 Navigation component

<Steps> 1. Create a new file: `src/components/Navigation.astro`.

  1. Copy your links to navigate between pages from the top of any page and paste them into your new file, Navigation.astro:

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

    :::tip 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. :::

    </Steps>

Import and use Navigation.astro

<Steps> 1. Go back to `index.astro` and import your new component inside the code fence: 
```astro title="src/pages/index.astro" ins={2}
---
import Navigation from '../components/Navigation.astro';
import "../styles/global.css";

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

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

```astro title="src/pages/index.astro" del={1-3} ins={4}
<a href="/">Home</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>
<Navigation />
```

3. Check the preview in your browser and notice that it should look exactly the same... and that's what you want! </Steps>

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

<Box icon="puzzle-piece">

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.
</Box>

:::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. :::

<Box icon="question-mark">

Test your knowledge

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

    <Option> restart the dev server </Option> <Option isCorrect> refactor to use a reusable component </Option> <Option> make a new page </Option> </MultipleChoice>

  2. Astro components are: <MultipleChoice>

    <Option> reusable </Option> <Option> fragments of HTML </Option> <Option isCorrect> both of the above! </Option> </MultipleChoice>

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

    <Option> include `<html></html>` </Option> <Option> refactor </Option> <Option isCorrect> put the `.astro` file within `src/pages/` </Option> </MultipleChoice>
</Box> <Box icon="check-list">

Checklist

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

Resources