# Routing & Navigation

## How to create a page? 

#### Create a File

Let's create an About Us page with Yoda Admin React Template.

First, we create our page file to `src/view/pages/about`.

<div align="left"><img src="https://2720658435-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MdHNs9DDZdgpvmiodHO%2F-MdRcE9HyjScYGWyzKmL%2F-MdRfUJi7g0nh6kUe6pH%2Ffile-3.png?alt=media&#x26;token=158f85db-0076-47a1-a8fb-4b364ab1413b" alt="Folder structure of src/view/pages/about/index.js"></div>

Now we can start writing our code to index.js

```jsx
import React from 'react'

function AboutUs() {
    return (
        <div>
            //Page Content
        </div>
    )
}

export default AboutUs

```

#### Create Route

After we create our page successfully. Let's create a route for our page.

Route file can be found `src/router/routes/Pages.js` .&#x20;

You can easily create your route for your page

```jsx
{
    path: "/about", // Link of our page
    component: lazy(() => import("../../view/pages/about")), //File path
    layout: "VerticalLayout", //Choose your layout
},
```

## How to Create Navigation?

Now our page is online!🤘🏻

Let's create navigation for our page! 🚀

Navigation file can be found in `src/navigation/vertical`

Let's create a new menu item list as *Company.* First, we create a new file as company.js. This file will contain our menu items.

`header` prop will be the name of our menu item list's header. Let's call it *Company*

Our write-out menu item.

`id` prop is key of our menu item

`title` prop will be the name of our menu item. Let's call it *About Us*

With `icon` prop we can add icons to our menu items.

`navLink` prop will be the navigation link of our component.

{% hint style="info" %}
Make sure `navLink` is as same as route path
{% endhint %}

Our navigation is ready. Let's add some submenu to our menu item

We use `children` prop as an array for our submenu items.

Now you can add your submenu items as same as a menu item

```jsx
import.. //Beautiful icons for your menu items.

export default [
  {
    header: "COMPANY",
  },
  {
    id: "company",
    title: "Company",
    icon: <Home set="curved" className="remix-icon" />,
    children: [
      {
        id: "about",
        title: "About",
        navLink: "/about",
      },
    ],
  },
];

```


---

# 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://hypeople-studio.gitbook.io/yoda/react-version/router.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.