---
title: "Routes"
generated: true
---
<GenerationInfo sourceFile="packages/dashboard/src/lib/framework/extension-api/types/navigation.ts" sourceLine="15" packageName="@vendure/dashboard" since="3.4.0" />

Defines a custom route for the dashboard with optional navigation menu integration.

```ts title="Signature"
interface DashboardRouteDefinition {
    component: (route: AnyRoute) => React.ReactNode;
    path: string;
    navMenuItem?: Partial<NavMenuItem> & { sectionId: string };
    loader?: RouteOptions<any>['loader'];
    validateSearch?: RouteOptions<any>['validateSearch'];
    authenticated?: boolean;
}
```

<div className="members-wrapper">

### component

<MemberInfo kind="property" type={``(route: AnyRoute) => React.ReactNode``}   />

The React component that will be rendered for this route.
### path

<MemberInfo kind="property" type={`string`}   />

The URL path for this route, e.g. '/my-custom-page'.
### navMenuItem

<MemberInfo kind="property" type={``Partial<`<a href='/reference/dashboard/extensions-api/navigation#navmenuitem'>NavMenuItem</a>`> &#38; { sectionId: string }``}   />

Optional navigation menu item configuration to add this route to the nav menu
on the left side of the dashboard.

The `sectionId` specifies which nav menu section (e.g. "catalog", "customers")
this item should appear in. It can also point to custom nav menu sections that
have been defined using the `navSections` extension property.
### loader

<MemberInfo kind="property" type={``RouteOptions<any>['loader']``}   />

Optional loader function to fetch data before the route renders.
The value is a Tanstack Router
[loader function](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#route-loaders)
### validateSearch

<MemberInfo kind="property" type={``RouteOptions<any>['validateSearch']``}   />

Optional search parameter validation function.
The value is a Tanstack Router
[validateSearch function](https://tanstack.com/router/latest/docs/framework/react/guide/search-params#search-param-validation)
### authenticated

<MemberInfo kind="property" type={`boolean`} default={`true`}   />

Define if the route should be under the authentication context, i.e have the authenticated route
as a parent.


</div>
