Skip to content

NavigationBarDestination

Examples#

See these.

NavigationBarDestination #

Bases: 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.

bgcolor #

bgcolor: ColorValue | None = None

The color of this destination.

icon #

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 #

label: str | None = None

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

selected_icon #

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.