Skip to content

Navigation Components

Navigation components link between pages and help users understand where they are in your application.

A hyperlink. Supports both internal SPA navigation and external links.

Signature 

Link(text, *, href="#", external=False)

Parameter Type Default Description
text str | callable — Link label text
href str "#" Destination URL
external bool False If True, opens in a new tab with target="_blank"

Example 

ui.Link("Go to dashboard", href="/dashboard")
ui.Link("FluxUI on GitHub", href="https://github.com/Minato3000/FluxApp", external=True)
ui.Link("Back to home", href="/")

A top navigation bar. Place NavItem children inside a NavMenu context manager.

Signature 

NavMenu(*, brand="")
NavItem(label, *, href="/", active=False, icon="")

NavMenu parameters

Parameter Type Default Description
brand str "" Brand name or logo text shown at the left

NavItem parameters

Parameter Type Default Description
label str — Menu item text
href str "/" Navigation target
active bool | callable False Highlight as the current page
icon str "" Emoji or icon shown before the label

Example 

@app.page("/")
def home(session):
    with ui.NavMenu(brand="MyApp"):
        ui.NavItem("Home",      href="/",        active=True,  icon="🏠")
        ui.NavItem("Dashboard", href="/dashboard",             icon="📊")
        ui.NavItem("Settings",  href="/settings",             icon="⚙️")

    with ui.Column():
        ui.Heading("Welcome", level=1)


# Reactive active state based on current route
@app.page("/dashboard")
def dashboard(session):
    route = session.current_route   # "/dashboard"

    with ui.NavMenu(brand="MyApp"):
        ui.NavItem("Home",      href="/",          active=lambda: route == "/")
        ui.NavItem("Dashboard", href="/dashboard", active=lambda: route == "/dashboard")

A breadcrumb trail showing the user's current location hierarchy.

Signature 

Breadcrumb(items)

Parameter Type Description
items list[dict] List of {"label": str, "href": str} dicts. The last item is shown as the current page (no link).

Example 

ui.Breadcrumb([
    {"label": "Home",     "href": "/"},
    {"label": "Products", "href": "/products"},
    {"label": "Widget Pro"},   # current page — no href needed
])

Pagination

A page-number selector for navigating multi-page datasets.

Signature 

Pagination(*, page, total_pages, on_change=None)

Parameter Type Default Description
page int | ReactiveVar[int] — Current page number (1-based)
total_pages int | callable — Total number of pages
on_change Callable[[int], None] | None None Called with the new page number when clicked

Example 

page = ui.state(1)
PAGE_SIZE = 20

all_rows = load_all_data()
total_pages = ui.computed(lambda: max(1, (len(all_rows) + PAGE_SIZE - 1) // PAGE_SIZE))

def current_rows():
    start = (page.value - 1) * PAGE_SIZE
    return all_rows[start : start + PAGE_SIZE]

ui.Table(data=current_rows)

ui.Pagination(
    page=page,
    total_pages=total_pages,
    on_change=page.set,
)