# Navigation

Let's create a simple navigation view so that we can navigate between the two pages we just created.

### Creating the Navigation View

Create a new directory named "layout" and add a new template view file inside that directory: `src/templates/views/Navigation.js`. You can name the directory whatever you like or add the navigation view inside the "views" directory—it's entirely up to you.

```js
import logo from '@/assets/images/logo-stratox.svg';

export default function Navigation({ props }) {
    const pages = (props.vars?.[0] ?? []);
    const currentPage = pages.pop();

    function isActive(slug) {
        return ((currentPage ?? false) === slug) ? " underline" : "";
    }

    return `
    <header id="header" class="card-4 border-bottom items">
        <figure id="logo" class="headline-6 m-0">
            <img width="150" height="42" src="${logo}" alt="Stratox logotype">
        </figure>
        <nav class="ml-auto">
            <ul class="items gap-x-25">
                <li class="nav-item${isActive(false)}"><a class="nav-to-btn" href="#">Start</a></li>
                <li class="nav-item${isActive("about")}"><a class="nav-to-btn" href="#about">About</a></li>
            </ul>
        </nav>
    </header>
    `;
}
```

I have also added some styles and a logotype to make it look good.

### Showing the Navigation

We want to show the navigation on all the pages, but it is not very efficient to manually add the navigation to every page. Instead, we want to add it to the main global view.

Let's proceed by opening the main JavaScript file: `src/main.js`.

1. Start by importing the navigation at the top:

```js
import Navigation from '@/templates/views/Navigation';
```

2. Edit the mount code by adding the navigation. You can extend Stratox views with  `this.block`.  Block view is a self-contained dynamic view.

```js
app.setup("#app").mount(routes, app.serverParams("fragment"), function(response, request) {
    return `
        ${this.block(Navigation, request)}
        <main>
            ${response}
        </main>
    `;
});
```

**Visit your browser to see the results.**


---

# 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://stratox.wazabii.se/step-by-step-tutorial/navigation.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.