> For the complete documentation index, see [llms.txt](https://hypeople-studio.gitbook.io/yoda-admin-template/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hypeople-studio.gitbook.io/yoda-admin-template/router.md).

# 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="/files/-MdRfUJi7g0nh6kUe6pH" 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",
      },
      
    ],
  },
  
  
];

```