diff --git a/www/apps/book/app/learn/fundamentals/admin/ui-routes/page.mdx b/www/apps/book/app/learn/fundamentals/admin/ui-routes/page.mdx
index daec1bebf4..96e1fb8991 100644
--- a/www/apps/book/app/learn/fundamentals/admin/ui-routes/page.mdx
+++ b/www/apps/book/app/learn/fundamentals/admin/ui-routes/page.mdx
@@ -1,4 +1,4 @@
-import { Prerequisites } from "docs-ui"
+import { Prerequisites, CodeTab, CodeTabs } from "docs-ui"
export const metadata = {
title: `${pageNumber} Admin UI Routes`,
@@ -105,11 +105,94 @@ export default CustomPage
The configuration object is created using `defineRouteConfig` from the Medusa Framework. It accepts the following properties:
-- `label`: the sidebar item’s label.
+- `label`: the sidebar item's label.
- `icon`: an optional React component used as an icon in the sidebar.
+- `rank`: an optional number to order the route among sibling routes. Learn more in the [Specify UI Route Sidebar Rank](#specify-ui-route-sidebar-rank) section.
The above example adds a new sidebar item with the label `Custom Route` and an icon from the [Medusa UI Icons package](!ui!/icons/overview).
+### Specify UI Route Sidebar Rank
+
+
+
+UI route ranking is available starting [Medusa v2.11.4](https://github.com/medusajs/medusa/releases/tag/v2.11.4).
+
+
+
+By default, custom UI routes are added to the sidebar in the order their files are loaded. This applies to your custom UI routes, and UI routes defined in plugins.
+
+You can specify the ranking of your UI route in the sidebar using the `rank` property passed to `defineRouteConfig`.
+
+For example, consider you have the following UI routes:
+
+
+
+
+```tsx title="src/admin/routes/analytics/page.tsx" highlights={[["18"]]}
+import { defineRouteConfig } from "@medusajs/admin-sdk"
+import { ChartBar } from "@medusajs/icons"
+import { Container, Heading } from "@medusajs/ui"
+
+const AnalyticsPage = () => {
+ return (
+
+
+ Analytics Dashboard
+
+
+ )
+}
+
+export const config = defineRouteConfig({
+ label: "Analytics",
+ icon: ChartBar,
+ rank: 1,
+})
+
+export default AnalyticsPage
+```
+
+
+
+
+```tsx title="src/admin/routes/reports/page.tsx" highlights={[["18"]]}
+import { defineRouteConfig } from "@medusajs/admin-sdk"
+import { DocumentText } from "@medusajs/icons"
+import { Container, Heading } from "@medusajs/ui"
+
+const ReportsPage = () => {
+ return (
+
+
+ Reports
+
+
+ )
+}
+
+export const config = defineRouteConfig({
+ label: "Reports",
+ icon: DocumentText,
+ rank: 2,
+})
+
+export default ReportsPage
+```
+
+
+
+
+In the sidebar, "Analytics" with the rank `1` will be added before "Reports" with the rank `2`.
+
+#### How are UI Routes Sorted in the Sidebar
+
+Medusa sorts custom UI routes based on their rank:
+
+1. UI routes that have ranks are sorted in ascending order.
+2. UI routes without a rank are added after the ranked UI routes.
+
+Medusa also applies the same sorting logic to UI routes at the nested level. Learn more in the [Nested UI Routes Ranking](#nested-ui-routes-ranking) section.
+
### Nested UI Routes
Consider that alongside the UI route above at `src/admin/routes/custom/page.tsx` you create a nested UI route at `src/admin/routes/custom/nested/page.tsx` that also exports route configurations:
@@ -175,6 +258,30 @@ export default NestedOrdersPage
The `nested` property passed to `defineRouteConfig` specifies which route this custom route is nested under. This route will now show in the sidebar under the existing "Orders" sidebar item.
+#### Nested UI Routes Ranking
+
+Nested UI routes also accept the [rank](#specify-ui-route-sidebar-rank) configuration. It allows you to specify the order that the nested UI routes are shown in the sidebar under the parent item.
+
+For example:
+
+```tsx title="src/admin/routes/orders/insights/page.tsx"
+// In nested UI route 1 at src/admin/routes/orders/insights/page.tsx
+export const config = defineRouteConfig({
+ label: "Order Insights",
+ nested: "/orders",
+ rank: 1, // Will appear first
+})
+
+// In nested UI route 2 at src/admin/routes/orders/reports/page.tsx
+export const config = defineRouteConfig({
+ label: "Order Reports",
+ nested: "/orders",
+ rank: 2, // Will appear second
+})
+```
+
+In this example, the "Order Insights" item will appear before the "Order Reports" item under the parent "Orders" item in the sidebar.
+
---
## Create Settings Page
diff --git a/www/apps/book/public/llms-full.txt b/www/apps/book/public/llms-full.txt
index 6059b105fa..8cc0657e64 100644
--- a/www/apps/book/public/llms-full.txt
+++ b/www/apps/book/public/llms-full.txt
@@ -9365,11 +9365,85 @@ export default CustomPage
The configuration object is created using `defineRouteConfig` from the Medusa Framework. It accepts the following properties:
-- `label`: the sidebar item’s label.
+- `label`: the sidebar item's label.
- `icon`: an optional React component used as an icon in the sidebar.
+- `rank`: an optional number to order the route among sibling routes. Learn more in the [Specify UI Route Sidebar Rank](#specify-ui-route-sidebar-rank) section.
The above example adds a new sidebar item with the label `Custom Route` and an icon from the [Medusa UI Icons package](https://docs.medusajs.com/ui/icons/overview/index.html.md).
+### Specify UI Route Sidebar Rank
+
+UI route ranking is available starting [Medusa v2.11.4](https://github.com/medusajs/medusa/releases/tag/v2.11.4).
+
+By default, custom UI routes are added to the sidebar in the order their files are loaded. This applies to your custom UI routes, and UI routes defined in plugins.
+
+You can specify the ranking of your UI route in the sidebar using the `rank` property passed to `defineRouteConfig`.
+
+For example, consider you have the following UI routes:
+
+### UI Route 1
+
+```tsx title="src/admin/routes/analytics/page.tsx" highlights={[["18"]]}
+import { defineRouteConfig } from "@medusajs/admin-sdk"
+import { ChartBar } from "@medusajs/icons"
+import { Container, Heading } from "@medusajs/ui"
+
+const AnalyticsPage = () => {
+ return (
+
+
+ Analytics Dashboard
+
+
+ )
+}
+
+export const config = defineRouteConfig({
+ label: "Analytics",
+ icon: ChartBar,
+ rank: 1,
+})
+
+export default AnalyticsPage
+```
+
+### UI Route 2
+
+```tsx title="src/admin/routes/reports/page.tsx" highlights={[["18"]]}
+import { defineRouteConfig } from "@medusajs/admin-sdk"
+import { DocumentText } from "@medusajs/icons"
+import { Container, Heading } from "@medusajs/ui"
+
+const ReportsPage = () => {
+ return (
+
+
+ Reports
+
+
+ )
+}
+
+export const config = defineRouteConfig({
+ label: "Reports",
+ icon: DocumentText,
+ rank: 2,
+})
+
+export default ReportsPage
+```
+
+In the sidebar, "Analytics" with the rank `1` will be added before "Reports" with the rank `2`.
+
+#### How are UI Routes Sorted in the Sidebar
+
+Medusa sorts custom UI routes based on their rank:
+
+1. UI routes that have ranks are sorted in ascending order.
+2. UI routes without a rank are added after the ranked UI routes.
+
+Medusa also applies the same sorting logic to UI routes at the nested level. Learn more in the [Nested UI Routes Ranking](#nested-ui-routes-ranking) section.
+
### Nested UI Routes
Consider that alongside the UI route above at `src/admin/routes/custom/page.tsx` you create a nested UI route at `src/admin/routes/custom/nested/page.tsx` that also exports route configurations:
@@ -9435,6 +9509,30 @@ export default NestedOrdersPage
The `nested` property passed to `defineRouteConfig` specifies which route this custom route is nested under. This route will now show in the sidebar under the existing "Orders" sidebar item.
+#### Nested UI Routes Ranking
+
+Nested UI routes also accept the [rank](#specify-ui-route-sidebar-rank) configuration. It allows you to specify the order that the nested UI routes are shown in the sidebar under the parent item.
+
+For example:
+
+```tsx title="src/admin/routes/orders/insights/page.tsx"
+// In nested UI route 1 at src/admin/routes/orders/insights/page.tsx
+export const config = defineRouteConfig({
+ label: "Order Insights",
+ nested: "/orders",
+ rank: 1, // Will appear first
+})
+
+// In nested UI route 2 at src/admin/routes/orders/reports/page.tsx
+export const config = defineRouteConfig({
+ label: "Order Reports",
+ nested: "/orders",
+ rank: 2, // Will appear second
+})
+```
+
+In this example, the "Order Insights" item will appear before the "Order Reports" item under the parent "Orders" item in the sidebar.
+
***
## Create Settings Page