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 src/routes/. ex. NewPage, and then create a svelte file in src/routes/NewPage with name +page.svelte

Example :-

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

  - if you want to make your page blank layout, then you need to wrap your page's content with <Container >

  - if you want to make your page with full layout, then you need to wrap your page's content with <div className="page-content"><div> tag and <Container fluid>

• 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 breadcrumbItem.

  - the title prop refers to page title and the breadcrumbItem refers to page's breadcrumb item's title.

<svelte:head>
    <title>New Page | Velzon - Svelte Admin & Dashboard Template</title>
  </svelte:head>
  <script>
      import { Col, Container, Row } from 'sveltestrap';
      import BreadCrumb from '../../Components/Common/BreadCrumb.svelte';
  </script>
  
  <div class="page-content">
      <Container fluid>
          <BreadCrumb title="Starter" pageTitle="Pages" />
          <Row>
              <Col xs={12} />
          </Row>
      </Container>
  </div>

<svelte:head>
    <title>New Page | Velzon - Svelte Admin & Dashboard Template</title>
  </svelte:head>
  <script>
      import { Col, Container, Row } from 'sveltestrap';
      import BreadCrumb from '../../Components/Common/BreadCrumb.svelte';
  </script>
  
  <div >
      <Container >
          //Write code
      </Container>
  </div>

2. Add your new page's route in /src/routes/ folder.

• Create a file with .svelte extension in src/routes/.

• Example :-

  src/routes/+page.svelte

• if you want to create inner route,then create file in src/routes/folder_name/+page.svelte

  Example :-

  src/routes/folder_name/+page.svelte

3. Add a navigation in the layouts

For more details, check the Navigation page to see how to add menu item in your template.

• For Vertical Layout :- /src/Layouts/LayoutMenuData.js