> For the complete documentation index, see [llms.txt](https://freeseamew.gitbook.io/svelte/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://freeseamew.gitbook.io/svelte/8.-routify/undefined-1.md).

# 링크 생성

### Navigation 링크 작성법

#### 기본 사용법

기본적인 사용방법은 a태그의 href에 $url helper를 사용하는 것입니다. 아래와 같이 `<a href="{$url('./파일경로')}" >` $url 안쪽에 page를 기준으로해서 파일 또는 폴더 경로를 넣어 주면 되겠습니다. 위에서 예제로 든 about.svelte의 경우 pages 폴더에 바로 있으면 ./about 로 경로를 지정해 주면 됩니다. 참고로 그냥 `$url('/about')` 처럼 /경로로 해도 정상 작동 합니다.

```
<script>
import { url } from "@sveltech/routify";
</script>

<a href="{$url('./about')}" >About</a>
```

#### 현재 선택된 페이지 강조하기

메뉴의 경우에 현재 선택된 페이지를 강조해서 표시해야 하는 경우가 종종 발생합니다 이럴 때 사용하는 기능이 `isActive` 라는 helper 입니다. 사용법은 아래와 같습니다. 예제의 경우 경로가 /about일 때 located라는 css class가 활성화 되도록 하는 기능으로 사용 되었습니다.

```
<script>
import { url, isActive } from "@sveltech/routify";
</script>

<a href={$url('./About')} class:located={$isActive('./About')}>About</a>
```

#### $each을 이용해 여러 한번에 여러 링크 생성하기

한번에 여러개의 링크를 한번에 생성하고 싶을 때는 아래처럼 \["파일경로", "링크이름"] 형태의 map을 생성해서 사용하면 됩니다. 이렇게 생성된 map을 $each를 사용하면 한번에 여러개의 메뉴를 생성할 수 있습니다.

```
<script>

import { url, isActive } from "@sveltech/routify";

const links = [
  ["/index", "Home"],
  ["./About", "About"],
  ["./blog", "Blog"],
];

</script>

<div class="menu-box">
  {#each links as [path, name]}
    <a href="{$url(path)}" class:located={$isActive(path)}>{name}</a>
  {/each}
</div>
```

[\[만들면서 배우는 Svelte\]](https://www.inflearn.com/course/%EB%A7%8C%EB%93%A4%EB%A9%B4%EC%84%9C-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EC%8A%A4%EB%B2%A8%ED%8A%B8)

<div align="left"><img src="https://2456181503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFoRG7N_kopXKHrUIam%2F-MGqndftNeXvP53tyaae%2F-MGqwZuQK1aEaE5Bp21i%2F%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%86%E1%85%A7%E1%86%AB%E1%84%89%E1%85%A5%20%E1%84%87%E1%85%A2%E1%84%8B%E1%85%AE%E1%84%82%E1%85%B3%E1%86%AB%20svelte%20small.png?alt=media&amp;token=e769cba7-bb5e-40a9-89c6-2879e60242bf" alt="만들면서 배우는 svelte"></div>