Skip to main content

NavigationBar

Material 3 Navigation Bar component.

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

ft.NavigationBar(
    destinations=[
        ft.NavigationBarDestination(icon=ft.Icons.CIRCLE, label="Item 1"),
        ft.NavigationBarDestination(icon=ft.Icons.SQUARE, label="Item 2"),
        ft.NavigationBarDestination(icon=ft.Icons.HEXAGON, label="Item 3"),
    ],
)
NavigationBar
Simple navigation bar

Inherits: LayoutControl, AdaptiveControl

Properties

Events

  • on_change - 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.SafeArea(
            content=ft.Text("Body!"),
        )
    )


if __name__ == "__main__":
    ft.run(main)
basic

Properties​

animation_durationclass-attributeinstance-attribute​

animation_duration: Optional[DurationValue] = None

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

bgcolorclass-attributeinstance-attribute​

bgcolor: Optional[ColorValue] = None

The color of the navigation bar itself.

borderclass-attributeinstance-attribute​

border: Optional[Border] = None

TBD

destinationsclass-attributeinstance-attribute​

destinations: Annotated[list[NavigationBarDestination], V.visible_controls(min_count=2)] = field(default_factory=list)

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

Raises:

  • ValueError - If it does not contain at least two visible destinations.

elevationclass-attributeinstance-attribute​

elevation: Optional[Number] = None

The elevation of the navigation bar itself.

indicator_colorclass-attributeinstance-attribute​

indicator_color: Optional[ColorValue] = None

The color of the selected destination indicator.

indicator_shapeclass-attributeinstance-attribute​

indicator_shape: Optional[OutlinedBorder] = None

The shape of the selected destination indicator.

label_behaviorclass-attributeinstance-attribute​

label_behavior: Optional[NavigationBarLabelBehavior] = 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_paddingclass-attributeinstance-attribute​

label_padding: Optional[PaddingValue] = None

The padding around the flet.NavigationBarDestination.label.

overlay_colorclass-attributeinstance-attribute​

overlay_color: Optional[ControlStateValue[ColorValue]] = None

The highlight color of the NavigationBarDestination in various ControlState states.

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

selected_indexclass-attributeinstance-attribute​

selected_index: int = 0

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

shadow_colorclass-attributeinstance-attribute​

shadow_color: Optional[ColorValue] = None

The color used for the drop shadow to indicate elevation.

Events​

on_changeclass-attributeinstance-attribute​

on_change: Optional[ControlEventHandler[NavigationBar]] = None

Called when selected destination changed.