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 more details.
active	bool dynamic	True	Indicates if this element is active. If False, the element is disabled, and user interaction is not allowed.
id	str		The identifier assigned to the rendered HTML component. This can be used in callbacks or to target the element for styling.
properties	dict[str, Any]		A dictionary of additional properties that can be set to the element.
class_name	str dynamic		A space-separated list of CSS class names to be applied to the generated HTML element. These classes are added to the default taipy-navbar class.
hover_text	str dynamic		The text that is displayed when the user hovers over the element.

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

Usage

Defining a default navbar

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

Definition

MarkdownHTMLPython

<|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.
Page names must be prefixed by '/'.
If a lov element id starts with "http", the page is opened in another tab.

Definition

MarkdownHTMLPython

<|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')]}")

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).