Yoda Admin React Template
Search…
Routing & Navigation
Let's create a page
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.
Folder structure of src/view/pages/about/index.js
Now we can start writing our code to index.js
1
import React from 'react'
2
3
function AboutUs() {
4
return (
5
<div>
6
//Page Content
7
</div>
8
)
9
}
10
11
export default AboutUs
12
Copied!
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 . You can easily create your route for your page
1
{
2
path: "/about", // Link of our page
3
component: lazy(() => import("../../view/pages/about")), //File path
4
layout: "VerticalLayout", //Choose your layout
5
},
Copied!
How to Create Navigation?
Now our page is online!🤘🏻
Let's create navigation for our page! 🚀
Navigation file can be found in
src/navigation/verticalLet'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 CompanyOur write-out menu item.
id prop is key of our menu itemtitle prop will be the name of our menu item. Let's call it About UsWith
icon prop we can add icons to our menu items.navLink prop will be the navigation link of our component.Make sure
navLink is as same as route pathOur 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
1
import.. //Beautiful icons for your menu items.
2
3
export default [
4
{
5
header: "COMPANY",
6
},
7
{
8
id: "company",
9
title: "Company",
10
icon: <Home set="curved" className="remix-icon" />,
11
12
children: [
13
{
14
id: "about",
15
title: "About",
16
navLink: "/about",
17
},
18
19
],
20
},
21
22
23
];
24
Copied!
Last modified 8mo ago
Copy link