***

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='/current/core/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>