Navigation
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.
CLI
To generate a specific style for customization:
Usage
FBreadcrumb(...)
1FBreadcrumb(2 style: .delta(padding: .value(.zero)),3 divider: Icon(FLucideIcons.chevronRight),4 children: [5 FBreadcrumbItem(child: Text('Home'), onPress: null),6 FBreadcrumbItem(child: Text('Products'), onPress: null),7 ],8)FBreadcrumbItem(...)
1FBreadcrumbItem(2 current: false,3 onPress: () {},4 child: const Text('Home'),5)FBreadcrumbItem.collapsed(...)
1FBreadcrumbItem.collapsed(2 icon: const Icon(FLucideIcons.ellipsis),3 divider: .full,4 menu: [5 FItemGroup(6 children: [7 FItem(title: const Text('Page 1'), onPress: () {}),8 FItem(title: const Text('Page 2'), onPress: () {}),9 ],10 ),11 ],12 popoverMenuStyle: const .delta(maxWidth: 200),13)FBreadcrumbItem.collapsedTiles(...)
1FBreadcrumbItem.collapsedTiles(2 icon: const Icon(FLucideIcons.ellipsis),3 divider: .full,4 menu: [5 FTileGroup(6 children: [7 FTile(title: const Text('Page 1'), onPress: () {}),8 FTile(title: const Text('Page 2'), onPress: () {}),9 ],10 ),11 ],12 popoverMenuStyle: const .delta(maxWidth: 200),13)Examples
Tiles
Custom Divider
Bottom Navigation Bar
A bottom navigation bar is usually present at the bottom of root pages. It is used to navigate between a small number of views, typically between three and five.
Header
A header contains the page's title and navigation actions. It is typically used on pages at the root of the navigation stack.