Skip to content

Dashboard Routes

In your application's dashboard, routes are dynamically defined within /app/components/sidebar/menu.ts and follow a specific structure to ensure consistency and clarity in navigation. This documentation provides an overview of how routes, links, and submenus are defined.

Each RouteItem represents a single route in the dashboard sidebar. Here's the TypeScript interface for RouteItem:

interface RouteItem {
  divider?: boolean;
  path?: string;
  name: string;
  icon?: React.ReactNode;
  external?: boolean;
  children?: RouteItem[];
}
  • divider (optional): Indicates whether the route serves as a divider in the navigation menu.
  • path (optional): The URL path associated with the route.
  • name: The text displayed for the route in the dashboard sidebar.
  • icon (optional): An icon element representing the route in the sidebar, typically rendered using React.
  • external (optional): Indicates whether the route is an external link.
  • children (optional): An array of RouteItem objects, defining submenus for hierarchical navigation.

Example

[
  {
    "path": "/dashboard/",
    "name": "Dashboard",
    "icon": "<HouseSimple className='h-4 w-4 stroke-2 shrink-0 transition-transform duration-200' />"
  }
]

Submenus enable hierarchical organization of routes, allowing nested navigation structures within the dashboard sidebar.

Each submenu object consists of the following properties:

  • divider (optional): Indicates whether the route serves as a divider in the navigation menu.
  • path (optional): The URL path associated with the route.
  • name: The text displayed for the route in the dashboard sidebar.
  • icon (optional): An icon element representing the route in the sidebar, typically rendered using React.
  • external (optional): Indicates whether the route is an external link.
  • children (optional): An array of RouteItem objects, defining submenus for hierarchical navigation.

Example

[
  {
    "name": "Media",
    "icon": "<Image className='h-4 w-4 stroke-2 shrink-0 transition-transform duration-200' />",
    "children": [
      {
        "path": "/dashboard/media/grid",
        "name": "Grid"
      },
      {
        "path": "/dashboard/media/tile",
        "name": "Tile"
      }
    ]
  }
]