animated_route_breadcrumbs

Animated, responsive breadcrumbs that stay synchronized with Flutter navigation. Use the included NavigatorObserver, provide URL-style locations from go_router, or control the trail manually.

Preview

The same trail expands on desktop and automatically becomes compact on mobile.

Features

• Automatic synchronization with named Navigator routes.
• Router-agnostic path parser for go_router and other declarative routers.
• Animated push, pop, replace, and deep-link updates.
• Responsive desktop trail and compact mobile history control.
• Overflow menu for deep navigation hierarchies.
• Custom colors, typography, separators, spacing, icons, and motion.
• Ancestor navigation, RTL, semantics, and reduced-motion support.
• No third-party runtime dependencies.

NavigatorObserver usage

final breadcrumbs = RouteBreadcrumbController();
late final observer = RouteBreadcrumbObserver(controller: breadcrumbs);

MaterialApp(
  navigatorObservers: [observer],
  home: Column(
    children: [
      AnimatedRouteBreadcrumbs(breadcrumbs: breadcrumbs),
      const Expanded(child: YourPage()),
    ],
  ),
)

Named routes are converted automatically into labels. Supply a custom resolver when your routes need icons, localized labels, metadata, or should be excluded from the trail.

Declarative router usage

The package does not require go_router. Convert the router location whenever it changes and keep your existing routing version unconstrained:

void synchronizeLocation(String location) {
  breadcrumbs.replaceAll(
    RouteBreadcrumbPathParser.parse(
      location,
      onNavigate: (path) => context.go(path),
      labelBuilder: (segment, index, uri) {
        return labels[segment] ?? segment;
      },
    ),
  );
}

Custom appearance

AnimatedRouteBreadcrumbs(
  breadcrumbs: breadcrumbs,
  maximumVisibleBreadcrumbs: 4,
  compactBreakpoint: 600,
  theme: const AnimatedRouteBreadcrumbThemeData(
    currentBackgroundColor: Color(0xFF6558C7),
    currentForegroundColor: Colors.white,
    borderRadius: BorderRadius.all(Radius.circular(18)),
  ),
)

See the example directory for a complete responsive application.

Created by Giancarlos Sandoval.