@@ -0,0 +1,22 @@
+---
+'@object-ui/layout': patch
+---
+
+fix(layout): the mobile tab bar draws its tabs in the sidebar's order, and shows an entry's badge
+
+`AppSchemaRenderer` with `mobileNavMode: 'bottom_nav'` drew its tab bar in authored
+position and never read `order`. Two entries written `Zeta` (`order: 2`) then
+`Ypsilon` (`order: 1`) came out `Ypsilon, Zeta` in the sidebar and `Zeta, Ypsilon` on
+the bar. With more than five entries, the five-tab cap kept the first five by authored
+position rather than the five the sidebar lists first.
+
+The bar now sorts each level with the sidebar's own comparator before it flattens:
+first the top level, then each group's children. The guard and the five-tab cap run
+after the sort, so the five tabs are the first five entries the sidebar draws. The
+comparator lives in one internal module, and the sidebar's two sort sites use it too.
+It is not exported, so the package's public API does not change. An entry with no
+`order` still sorts as `0`, and entries with equal `order` keep their authored order,
+as in the sidebar before.
+
+The bar also dropped an entry's `badge` and `badgeVariant`. It now draws them on the
+tab with the same `Badge` component and the same variant the sidebar row uses.
@@ -34,6 +34,7 @@ import {
   SidebarGroupLabel,
   SidebarGroupContent,
   SidebarInput,
+  Badge,
 } from '@object-ui/components';
 import type { AppComponentSchema, NavigationItem, NavigationEntryItem, NavigationArea } from '@object-ui/types';
 import { menuItemToNavigationItem } from '@object-ui/types';
@@ -55,6 +56,8 @@ import {
   type CapabilityChecker,
   type DocTargetChecker,
 } from './NavigationRenderer';
+// Internal module, not re-exported by `index.ts` (objectui#11395).
+import { byNavOrder } from './navOrder';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -296,9 +299,16 @@ function MobileBottomNav({
   // wired. A gated group therefore takes its children with it, as it does in
   // the sidebar, and the guard runs before the five-tab cap, so a hidden entry
   // never takes a slot. ⛔ No copy of the guard here.
+  //
+  // objectui#11395: each level is sorted by `byNavOrder` before it is walked —
+  // the top level, then each group's children as the walk reaches them — which
+  // is the sidebar's one comparator at the sidebar's two sort sites. The tabs
+  // therefore come out in the sidebar's reading order, and the guard and the cap
+  // run after the sort, so the five tabs are the sidebar's first five drawn
+  // entries. ⛔ No copy of the sort here.
   const collectLeaves = (list: NavigationItem[]): NavigationEntryItem[] => {
     const out: NavigationEntryItem[] = [];
-    for (const item of list) {
+    for (const item of list.slice().sort(byNavOrder)) {
       if (!hasVisibleNavigationItems([item], guards)) continue;
       if (item.type === 'separator') continue;
       if (item.type === 'group') {
@@ -333,7 +343,7 @@ function MobileBottomNav({
       {leaves.map((item) => {
         const NavIcon = resolveIcon(item.icon);
         const { href, external } = resolveHref(item, basePath);
-        const className = `flex flex-col items-center gap-0.5 px-2 py-1.5 transition-colors min-w-[44px] min-h-[44px] justify-center ${
+        const className = `relative flex flex-col items-center gap-0.5 px-2 py-1.5 transition-colors min-w-[44px] min-h-[44px] justify-center ${
           item.id === activeId ? 'text-primary' : 'text-muted-foreground hover:text-foreground'
         }`;
         const content = (
@@ -343,6 +353,18 @@ function MobileBottomNav({
                 absent since objectui#9868, and this host has no metadata, so it shows the
                 same machine-name backstop its `NavigationRenderer` does. */}
             <span className="text-[10px] truncate max-w-[60px]">{resolveNavItemLabel(item)}</span>
+            {/* objectui#11395: the spec-declared `badge` and `badgeVariant`, drawn when the
+                sidebar row draws them, with the same `Badge` and the same variant (an absent
+                `badgeVariant` is `Badge`'s own default, which is the sidebar's). Placed over
+                the icon's corner; last in the DOM so the tab reads in the sidebar row's order. */}
+            {item.badge != null && (
+              <Badge
+                variant={item.badgeVariant}
+                className="absolute top-0.5 left-1/2 ml-1.5 px-1 py-0 text-[9px] leading-tight"
+              >
+                {item.badge}
+              </Badge>
+            )}
           </>
         );
 
 
@@ -71,6 +71,9 @@ import type { NavigationItem, KeyedI18nLabel } from '@object-ui/types';
 // the spec's resolver reads the INLINE locale map — neither accepts the other's
 // shape.
 import { resolveI18nLabel as resolveInlineI18nLabel } from '@objectstack/spec/ui';
+// Internal module, not re-exported by `index.ts` (objectui#11395). ⛔ Do not
+// re-export `byNavOrder` from this file: `index.ts` re-exports it whole.
+import { byNavOrder } from './navOrder';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -1275,9 +1278,7 @@ function NavigationItemRenderer({
 
   // --- Group (collapsible) ---
   if (item.type === 'group') {
-    const children = (item.children ?? [])
-      .slice()
-      .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+    const children = (item.children ?? []).slice().sort(byNavOrder);
 
     // A group survives only through its children (`73a3c89af`). Without
     // this the group's own label rendered as a disclosure that opens onto
@@ -1546,8 +1547,8 @@ export function NavigationRenderer({
     [filteredItems, evalVis, checkPerm, checkCap, checkDocTarget],
   );
 
-  // --- Sort top-level items by order ---
-  const sorted = filteredItems.slice().sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+  // --- Sort top-level items by order --- (the one comparator the tab bar uses too, objectui#11395)
+  const sorted = filteredItems.slice().sort(byNavOrder);
 
   // --- Drag-reorder sensors ---
   const sensors = useSensors(