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 class-attribute instance-attribute

animation_duration: DurationValue | None = None

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

bgcolor class-attribute instance-attribute

bgcolor: ColorValue | None = None

The color of the navigation bar itself.

border class-attribute instance-attribute

border: Border | None = None

TBD

destinations class-attribute instance-attribute

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 class-attribute instance-attribute

elevation: Number | None = None

The elevation of the navigation bar itself.

indicator_color class-attribute instance-attribute

indicator_color: ColorValue | None = None

The color of the selected destination indicator.

indicator_shape class-attribute instance-attribute

indicator_shape: OutlinedBorder | None = None

The shape of the selected destination indicator.

label_behavior class-attribute instance-attribute

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 class-attribute instance-attribute

label_padding: PaddingValue | None = None

The padding around the NavigationBarDestination.label.

overlay_color class-attribute instance-attribute

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 class-attribute instance-attribute

selected_index: int = 0

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

shadow_color class-attribute instance-attribute

shadow_color: ColorValue | None = None

The color used for the drop shadow to indicate elevation.

Events

on_change class-attribute instance-attribute

on_change: ControlEventHandler[NavigationBar] | None = None

Called when selected destination changed.