Skip to content
taipy

navbar

A navigation bar control.

This control is implemented as a list of links.

Properties

Name Type Default Description
lov(★) dict[str, any]

The list of pages. The keys should be:

  • page id (start with "/")
  • or full URL
The values are labels. See the section on List of Values for details.
active bool
dynamic		 True

Indicates if this component is active.
An inactive component allows no user interaction.
id str

The identifier that will be assigned to the rendered HTML component.
properties dict[str, any]

Bound to a dictionary that contains additional properties for this element.
class_name str
dynamic

The list of CSS class names that will be associated with the generated HTML Element.
These class names will be added to the default taipy-<element_type>.
hover_text str
dynamic

The information that is displayed when the user hovers over this element.

(★)lov is the default property for this visual element.

Styling

All the navbar controls are generated with the "taipy-navbar" CSS class. You can use this class name to select the navbar controls on your page and apply style.

Stylekit support

The Stylekit provides a specific class that you can use to style navbar controls:

  • fullheight
    Ensures the tabs fill the full height of their container (in a header bar for example).

Usage

Defining a default navbar

The list of all pages registered in the Gui instance is used to build the navbar.

Definition

<|navbar|>

<taipy:navbar/>

import taipy.gui.builder as tgb
...
tgb.navbar()

Defining a custom navbar

The lov property is used to define the list of elements that are displayed.
If a lov element id starts with "http", the page is opened in another tab.

Definition

<|navbar|lov={[("page1", "Page 1"), ("http://www.google.com", "Google")]}|>

<taipy:navbar lov="{[('page1', 'Page 1'), ('http://www.google.com', 'Google')]}"/>

import taipy.gui.builder as tgb
...
tgb.navbar(lov="{[('page1', 'Page 1'), ('http://www.google.com', 'Google')]}")