NavigationBarDestination

Inherits: AdaptiveControl

Defines the appearance of the button items that are arrayed within the navigation bar.

The value must be a list of two or more NavigationBarDestination instances.

Properties

• bgcolor(ColorValue | None) –

  The color of this destination.

• icon(IconDataOrControl) –

  The name of the icon or Control of the

• label(str | None) –

  The text label that appears below the icon of this NavigationBarDestination.

• selected_icon(IconDataOrControl | None) –

  The name of alternative icon or Control

Properties

bgcolor class-attribute instance-attribute

bgcolor: ColorValue | None = None

The color of this destination.

icon instance-attribute

icon: IconDataOrControl

The name of the icon or Control of the destination.

Example with icon name:

icon=ft.Icons.BOOKMARK

Example with Control:

icon=ft.Icon(ft.Icons.BOOKMARK)

If selected_icon is provided, this will only be displayed when the destination is not selected.

To make the NavigationBar more accessible, consider choosing an icon with a stroked and filled version, such as ft.Icons.CLOUD and ft.Icons.CLOUD_QUEUE. The icon should be set to the stroked version and selected_icon to the filled version.

label class-attribute instance-attribute

label: str | None = None

The text label that appears below the icon of this NavigationBarDestination.

selected_icon class-attribute instance-attribute

selected_icon: IconDataOrControl | None = None

The name of alternative icon or Control displayed when this destination is selected.

Example with icon name:

selected_icon=ft.Icons.BOOKMARK

Example with Control:

selected_icon=ft.Icon(ft.Icons.BOOKMARK)

If this icon is not provided, the NavigationBar will display icon in either state.