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.
FBreadcrumb(
children: [
FBreadcrumbItem(onPress: () {}, child: const Text('Forui')),
FBreadcrumbItem.collapsed(
menu: [
FItemGroup(
children: [
FItem(title: const Text('Documentation'), onPress: () {}),
FItem(title: const Text('Themes'), onPress: () {}),
],
),
],
),
FBreadcrumbItem(onPress: () {}, child: const Text('Layout')),
const FBreadcrumbItem(current: true, child: Text('Widgets')),
],
);CLI
To generate and customize this style:
dart run forui style create breadcrumbUsage
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
FBreadcrumb(
children: [
FBreadcrumbItem(onPress: () {}, child: const Text('Forui')),
FBreadcrumbItem.collapsedTiles(
menu: [
FTileGroup(
children: [
FTile(title: const Text('Documentation'), onPress: () {}),
FTile(title: const Text('Themes'), onPress: () {}),
],
),
],
),
FBreadcrumbItem(onPress: () {}, child: const Text('Layout')),
const FBreadcrumbItem(current: true, child: Text('Widgets')),
],
);Custom Divider
FBreadcrumb(
divider: Transform.rotate(angle: -60, child: const Icon(FIcons.slash, 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: () {}),
],
),
],
),
FBreadcrumbItem(onPress: () {}, child: const Text('Layout')),
const FBreadcrumbItem(current: true, child: Text('Widgets')),
],
);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.