Skip to main content

NavigationBarDestination

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.

Inherits: AdaptiveControl

Properties

  • bgcolor - The color of this destination.
  • icon - The name of the icon or Control of the destination.
  • label - The text label that appears below the icon of this NavigationBarDestination.
  • selected_icon - The name of alternative icon or Control displayed when this destination is selected.

Properties​

bgcolorclass-attributeinstance-attribute​

bgcolor: Optional[ColorValue] = None

The color of this destination.

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

labelclass-attributeinstance-attribute​

label: Optional[str] = None

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

selected_iconclass-attributeinstance-attribute​

selected_icon: Optional[IconDataOrControl] = 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.