NavigationBar

Examples#

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)

NavigationBar #

Bases: LayoutControl, AdaptiveControl

Material 3 Navigation Bar component.

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

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.

on_change #

on_change: ControlEventHandler[NavigationBar] | None = None

Called when selected destination changed.

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.