# Routing & Navigation

## How to create a page? 

#### Create a File

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

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

Now we can start writing our code to index.vue

```jsx
<template>
  <div>
    
  </div>
</template>
```

#### Create Route

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

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

You can easily create your route for your page

```jsx
{
    path: "/about",
    name: "about",
    component: () => import("@/view/pages/about"),
    meta: {
      title: "Aboout",
      breadcrumb: [
        {
          text: "Pages"
        }
      ]
    },
},
```

## How to Create Navigation?

Now our page is online!🤘🏻

Let's create navigation for our page! 🚀

Navigation file can be found in `src/navigation`

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
export default {
  header: "COMPANY",
  children: [
    {
      id: "company",
      title: "Company",
      icon: "Curved-Home",
      children: [
        {
          id: "about",
          title: "About",
          navLink: "/about",
        },
      ],
    },
  ]
}
```