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 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

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(FLucideIcons.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