Creating Pages

Page Structure

All pages in the Dashboard follow this structure:

src/plugins/example/dashboard/test-page.tsx

import { Page, PageBlock, PageLayout, PageTitle } from '@vendure/dashboard';export function TestPage() {    return (        <Page pageId="test-page">            <PageTitle>Test Page</PageTitle>            <PageLayout>                <PageBlock column="main" blockId="main-stuff">                    This will display in the main area                </PageBlock>                <PageBlock column="side" blockId="side-stuff">                    This will display in the side area                </PageBlock>            </PageLayout>        </Page>    )}

Page component
- PageTitle component
- PageLayout component
  - PageBlock components

Following this structure ensures that:

Your pages look consistent with the rest of the Dashboard
Your page content is responsive
Your page can be further extended using the pageBlocks API

Info

Note that the ListPage and DetailPage components internally use this same structure, so when using those top-level components you don't need to wrap them in Page etc.

Block Columns

The PageLayout arranges its PageBlock children into columns based on each block's column prop:

main: the wider main content area
side: the narrower sidebar
full: spans the full width of the layout, above the main/side columns

src/plugins/example/dashboard/test-page.tsx

import { Page, PageBlock, PageLayout, PageTitle } from '@vendure/dashboard';export function TestPage() {    return (        <Page pageId="test-page">            <PageTitle>Test Page</PageTitle>            <PageLayout>                <PageBlock column="full" blockId="full-stuff">                    This block spans the full width                </PageBlock>                <PageBlock column="main" blockId="main-stuff">                    This will display in the main area                </PageBlock>                <PageBlock column="side" blockId="side-stuff">                    This will display in the side area                </PageBlock>            </PageLayout>        </Page>    );}

Info

Full-width blocks are always rendered above the main/side columns, regardless of their order among the PageLayout children. This makes column="full" well-suited to wide content such as data tables on list pages.

Full-width without a card

A PageBlock wraps its content in a bordered card. If you want a full-width block with no card chrome — for example, a block that supplies its own container such as a DataTable — use the FullWidthPageBlock component instead:

Tsx

import { FullWidthPageBlock, Page, PageLayout, PageTitle } from '@vendure/dashboard';<PageLayout>    <FullWidthPageBlock blockId="list-table">        <DataTable /* ... */ />    </FullWidthPageBlock></PageLayout>

Once you have defined a page component, you'll need to make it accessible to users with:

A route (url) by which it can be accessed
Usually a navigation bar entry in the main side navigation of the Dashboard

Both of these are handled using the DashboardRouteDefinition API:

src/plugins/example/dashboard/index.tsx

import { defineDashboardExtension } from '@vendure/dashboard';import { TestPage } from './test-page';defineDashboardExtension({    routes: [        {            // The TestPage will be available at e.g.             // http://localhost:5173/dashboard/test            path: '/test',            // The loader function is allows us to define breadcrumbs            loader: () => ({ breadcrumb: 'Test Page' }),            // Here we define the nav menu items            navMenuItem: {                // a unique ID                id: 'test',                // the nav menu item label                title: 'Test Page',                // which section it should appear in                sectionId: 'catalog',            },            component: TestPage,        },    ],});

Info

For a complete guide to the navigation options available, see the Navigation guide

Was this chapter helpful?

Report Issue

Edited Jun 12, 2026·Edit this page

Creating Pages

Page Structure

Block Columns

Full-width without a card

Page Routes & Navigation