Navigation

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.

CLI

To generate a specific style for customization:

Usage

A bottom navigation bar is typically used with FScaffold. A working example can be found here.

`FBottomNavigationBar(...)`

1FBottomNavigationBar(
2  style: const .delta(padding: .value(.zero)),
3  index: 0,
4  onChange: (index) {},
5  children: const [
6    FBottomNavigationBarItem(
7      icon: Icon(FLucideIcons.house),
8      label: Text('Home'),
9    ),
10  ],
11)

`FBottomNavigationBarItem(...)`

1FBottomNavigationBarItem(
2  style: const .delta(padding: .value(.zero)),
3  icon: const Icon(FLucideIcons.house),
4  label: const Text('Home'),
5)

Tile

A specialized Item for touch devices, typically used to group related information together.

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.

On this page

CLI Usage FBottomNavigationBar(...)FBottomNavigationBarItem(...)