Skip to Content
Forui 0.17.0 is released 🎉
DocumentationNavigationBreadcrumb

Breadcrumb

Displays a list of links that help visualize a page’s location within a site’s hierarchical structure. It allows navigation up to any of the ancestors.

API Reference

CLI

To generate and customize this style:

dart run forui style create breadcrumb

Usage

FBreadcrumb(...)

FBreadcrumb(
  style: (style) => style.copyWith(...),
  divider: const Icon(FIcons.chevronRight, size: 14),
  children: [
    FBreadcrumbItem(onPress: () {}, child: const Text('Forui')),
    FBreadcrumbItem.collapsed(
      menu: [
        FItemGroup(
          children: [
            FItem(title: const Text('Documentation'), onPress: () {}),
            FItem(title: const Text('Themes'), onPress: () {}),
          ],
        ),
      ],
      spacing: FPortalSpacing.spacing(4),
      offset: Offset.zero,
      traversalEdgeBehavior: TraversalEdgeBehavior.closedLoop,
    ),
    FBreadcrumbItem(onPress: () {}, child: const Text('Themes')),
    const FBreadcrumbItem(current: true, child: Text('Widgets')),
  ],
);

Examples

Tiles

Custom Divider

Last updated on
Bottom Navigation BarHeader