NavigationBar

Material 3 Navigation Bar component.

Navigation bars offer a persistent and convenient way to switch between primary destinations in an app.

Inherits: LayoutControl, AdaptiveControl

Properties

• animation_duration(DurationValue | None) –

  The transition time for each destination as it goes between selected and unselected.

• bgcolor(ColorValue | None) –

  The color of the navigation bar itself.

• border(Border | None) –

  TBD

• destinations(list[NavigationBarDestination]) –

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

• elevation(Number | None) –

  The elevation of the navigation bar itself.

• indicator_color(ColorValue | None) –

  The color of the selected destination

• indicator_shape(OutlinedBorder | None) –

  The shape of the selected destination indicator.

• label_behavior(NavigationBarLabelBehavior | None) –

  Defines how the destinations' labels will be laid out and when they'll be displayed.

• label_padding(PaddingValue | None) –

  The padding around the

• overlay_color(ControlStateValue[ColorValue] | None) –

  The highlight color of the NavigationBarDestination in various

• selected_index(int) –

  The index into destinations for the current selected NavigationBarDestination or

• shadow_color(ColorValue | None) –

  The color used for the drop shadow to

Events

• on_change(ControlEventHandler[NavigationBar] | None) –

  Called when selected destination changed.

Examples

Live example

Basic Example

import flet as ft


def main(page: ft.Page):
    page.title = "NavigationBar Example"

    page.navigation_bar = ft.NavigationBar(
        destinations=[
            ft.NavigationBarDestination(icon=ft.Icons.EXPLORE, label="Explore"),
            ft.NavigationBarDestination(icon=ft.Icons.COMMUTE, label="Commute"),
            ft.NavigationBarDestination(
                icon=ft.Icons.BOOKMARK_BORDER,
                selected_icon=ft.Icons.BOOKMARK,
                label="Favorites",
            ),
        ]
    )

    page.add(ft.Text("Body!"))


ft.run(main)

Properties

animation_duration

animation_duration: DurationValue | None = None

The transition time for each destination as it goes between selected and unselected.

bgcolor

bgcolor: ColorValue | None = None

The color of the navigation bar itself.

border

border: Border | None = None

TBD

destinations

destinations: list[NavigationBarDestination] = field(
    default_factory=list
)

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.

elevation

elevation: Number | None = None

The elevation of the navigation bar itself.

indicator_color

indicator_color: ColorValue | None = None

The color of the selected destination indicator.

indicator_shape

indicator_shape: OutlinedBorder | None = None

The shape of the selected destination indicator.

label_behavior

label_behavior: NavigationBarLabelBehavior | None = None

Defines how the destinations' labels will be laid out and when they'll be displayed.

Can be used to show all labels, show only the selected label, or hide all labels.

Defaults to NavigationBarLabelBehavior.ALWAYS_SHOW.

label_padding

label_padding: PaddingValue | None = None

The padding around the NavigationBarDestination.label.

overlay_color

overlay_color: ControlStateValue[ColorValue] | None = None

The highlight color of the NavigationBarDestination in various ControlState states.

The following ControlState values are supported: PRESSED, HOVERED and FOCUSED.

selected_index

selected_index: int = 0

The index into destinations for the current selected NavigationBarDestination or None if no destination is selected.

shadow_color

shadow_color: ColorValue | None = None

The color used for the drop shadow to indicate elevation.

Events

on_change

on_change: ControlEventHandler[NavigationBar] | None = None

Called when selected destination changed.