# Use the \<Link> component

In the last lesson we saw that `state.router.link` stores the current URL. We demonstrated this by manually changing the URL in the browser's address bar and saw how the URL in our `<p>` element changed as the component reacted to the data change.

In this lesson we will create a menu-based navigation to change the URL for us.

Frontity provides a number of useful components for us, amongst which is the `<Link>` component. The simplest way to use it is to just provide a `link` attribute with the URL as its value:

```jsx
<Link link="/">Home</Link>
```

We also provide the string that we want to be displayed as a clickable link. In the example above that is 'Home'.

The `<Link>` component simply outputs an `<a>` element into the resulting HTML, but without forcing a page reload which is what would occur if you simply added an `<a>` element instead of using the `<Link>` component.

```markup
<a href="/" target="_self">Home</a>
```

Before we can use any of Frontity's built-in components we first need to import it. Frontity's built-in components are imported from `@frontity/components`.

So let's import the `<Link>` component into our root component file for use within our `<Root>` component. Let's add this import statement as the third line:

```jsx
import Link from "@frontity/components/link"
```

With that done we are now in a position to add a menu consisting of a `<nav>` element with three `<Link>` items as children. Using the example above as a template our `index.js` file can now look like this:

```jsx
// File: /packages/my-first-theme/src/components/index.js

import React from "react"
import { connect } from "frontity"
import Link from "@frontity/components/link"

const Root = ({ state }) => {
  return (
    <>
      <h1>Hello Frontity</h1>
      <p>Current URL: {state.router.link}</p>
      <nav>
        <Link link="/">Home</Link>
        <br />
        <Link link="/page/2">More posts</Link>
        <br />
        <Link link="/about-us">About Us</Link>
      </nav>
    </>
  )
}

export default connect(Root)
```

When you save the file the browser should update and the menu will now be visible. Now if you click on the menu items you will see the URL in the browser's address bar change, and also the displayed value of `state.router.link`.

{% hint style="info" %}
Here we've used the `<Link>` component in the simplest possible way. To learn more about what you can do with the `<Link>` component, including pre-fetching strategies to make your site more responsive, [see this page](https://docs.frontity.org/api-reference-1/frontity-components#link) in our documentation.
{% endhint %}

{% hint style="success" %}
**Check you're on the right track** by comparing your changes with [the ones in this commit](https://github.com/frontity-demos/tutorial-hello-frontity/commit/b39ec137650bc32b9b08d2dd2832599acc3841e3).
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tutorial.frontity.org/part2-adding-a-menu/use-the-link-component.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.