> For the complete documentation index, see [llms.txt](https://koziuk-s.gitbook.io/angular-starter/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://koziuk-s.gitbook.io/angular-starter/routing/navigation.md).

# Navigation

Наступним кроком роботи з роутінгом є повноцінна html навігація, з допомогою якої ми і здійснюємо переходи між сторінками, а в даному випадку компонентами або модулями аплікації.

Розглянемо директиви **routerLink** та **routerLinkActive**.

Директива **routerLink** слугує для визначення адреси по якшї буде здійснюватися навігація.

{% code title="navbar.component.html" overflow="wrap" lineNumbers="true" %}

```markup
<a routerLink="todos">Todos</a>
<a routerLink="about">About</a>
```

{% endcode %}

Для стилізації активних посилань застосовується спеціальна директива **routerLinkActive**, яка додає вказаний css клас до активного посиланням.

{% code title="navbar.component.html" overflow="wrap" lineNumbers="true" %}

```markup
<li routerLinkActive="active">
  <a routerLink="todos">Todos</a>
</li>

<li routerLinkActive="active">
  <a routerLink="about">About</a>
</li>
```

{% endcode %}

## Завдання

* Створити компоненту **navbar** та додати базову розмітку для навігвції використовуючи Bootstrap.

{% code title="cmd" %}

```bash
ng g c components/navbar
```

{% endcode %}

{% tabs %}
{% tab title="navbar.component.html" %}
{% code overflow="wrap" lineNumbers="true" %}

```markup
<nav class="navbar navbar-dark bg-dark app-navbar">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link"
         href="#">Todos</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-link"
         href="#">About</a>
    </li>
  </ul>
</nav>
```

{% endcode %}
{% endtab %}

{% tab title="navbar.component.css" %}
{% code overflow="wrap" lineNumbers="true" %}

```css
.app-navbar .navbar-nav {
  flex-direction: row;
}

.app-navbar .nav-item:not(:last-child) {
  margin-right: 16px;
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

{% code title="app.component.html" overflow="wrap" lineNumbers="true" %}

```markup
<app-navbar></app-navbar>
```

{% endcode %}