How to Create a New Page

Here is the example on how to create your custom page and add it to the leftsidebar menu, breadcrumbs and also meta tag.

1. Create a new folder in /pages. ex. NewPage, and then create a js file in pages/NewPage with name index.tsx

Example :-

• As you know, there are 2 different types of layouts, first is Blank Layout and second is Full layout.

• Add Breadcrumbs component. it's a common component, it's used to add breadcrumbs in your page.

  - You have to pass 2 props here, first is title and second is pageTitle.

  - the title prop refers to page breadcrumbs and the pageTitle refers to page's breadcrumbs item's title.

• Add MetaTags to give a title to your page.

import React from 'react';

// Breadcrumbs
import Breadcrumbs from '../../Components/Common/breadcrumbs';

const newPage = () => {
    document.title = "newPage | Hybrix - Admin & Dashboard Template";

    return (
        <React.Fragment>
            <Breadcrumbs title="Pages" pageTitle="newPage" />
            // write Typescript Code Here.
        </React.Fragment >
    );
}

export default newPage;;

import React from 'react';
// Material UI
import { Container } from '@mui/material';

const newPage = () => {
    document.title = "newPage | Hybrix - Admin & Dashboard Template";

    return (
        <React.Fragment>
            <section>
                <Container maxWidth={false}>
                // write Typescript Code Here.
                </Container>
            </section>
        </React.Fragment >
    );
}

export default newPage;