Breadcrumb

1@override
2Widget build(BuildContext _) => Row(
3  mainAxisAlignment: .center,
4  children: [
5    FBreadcrumb(
6      children: [
7        FBreadcrumbItem(onPress: () {}, child: const Text('Forui')),
8        FBreadcrumbItem.collapsed(
9          menu: [
10            .group(
11              children: [
12                .item(title: const Text('Documentation'), onPress: () {}),
13                .item(title: const Text('Themes'), onPress: () {}),
14              ],
15            ),
16          ],
17        ),
18        FBreadcrumbItem(onPress: () {}, child: const Text('Layout')),
19        const FBreadcrumbItem(current: true, child: Text('Widgets')),
20      ],
21    ),
22  ],
23);
24

CLI

To generate and customize this style:

dart run forui style create breadcrumb

Usage

`FBreadcrumb(...)`

1FBreadcrumb(
2  style: .delta(padding: .zero),
3  divider: Icon(FIcons.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  divider: .full,
3  menu: [
4    FItemGroup(
5      children: [
6        FItem(title: const Text('Page 1'), onPress: () {}),
7        FItem(title: const Text('Page 2'), onPress: () {}),
8      ],
9    ),
10  ],
11  popoverMenuStyle: const .delta(maxWidth: 200),
12)

`FBreadcrumbItem.collapsedTiles(...)`

1FBreadcrumbItem.collapsedTiles(
2  divider: .full,
3  menu: [
4    FTileGroup(
5      children: [
6        FTile(title: const Text('Page 1'), onPress: () {}),
7        FTile(title: const Text('Page 2'), onPress: () {}),
8      ],
9    ),
10  ],
11  popoverMenuStyle: const .delta(maxWidth: 200),
12)

Examples

Tiles

1@override
2Widget build(BuildContext _) => Row(
3  mainAxisAlignment: .center,
4  children: [
5    FBreadcrumb(
6      children: [
7        FBreadcrumbItem(onPress: () {}, child: const Text('Forui')),
8        FBreadcrumbItem.collapsedTiles(
9          menu: [
10            FTileGroup(
11              children: [
12                FTile(title: const Text('Documentation'), onPress: () {}),
13                FTile(title: const Text('Themes'), onPress: () {}),
14              ],
15            ),
16          ],
17        ),
18        FBreadcrumbItem(onPress: () {}, child: const Text('Layout')),
19        const FBreadcrumbItem(current: true, child: Text('Widgets')),
20      ],
21    ),
22  ],
23);
24

Custom Divider

1@override
2Widget build(BuildContext _) => Row(
3  mainAxisAlignment: .center,
4  children: [
5    FBreadcrumb(
6      divider: Transform.rotate(
7        angle: -60,
8        child: const Icon(FIcons.slash, size: 14),
9      ),
10      children: [
11        FBreadcrumbItem(onPress: () {}, child: const Text('Forui')),
12        FBreadcrumbItem.collapsed(
13          menu: [
14            .group(
15              children: [
16                .item(title: const Text('Documentation'), onPress: () {}),
17                .item(title: const Text('Themes'), onPress: () {}),
18              ],
19            ),
20          ],
21        ),
22        FBreadcrumbItem(onPress: () {}, child: const Text('Layout')),
23        const FBreadcrumbItem(current: true, child: Text('Widgets')),
24      ],
25    ),
26  ],
27);
28

On this page