# 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://2930262509-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",
      },
      
    ],
  },
  
  
];

```