bpm.topnav
Barre de navigation supérieure d'application : logo/titre cliquable à gauche et liens ou boutons de section. Chaque item accepte un href (lien) ou un onClick (action). Dans la démo, les onglets utilisent onClick : cliquer un onglet le rend actif.
Python
bpm.topNav(title="FleetOps", title_href="/", items=[{"label": "Tableau de bord", "href": "/tableau-de-bord"}, {"label": "Interventions", "href": "/interventions"}, {"label": "Flotte", "href": "/flotte"}, {"label": "Rapports", "href": "/rapports"}])| Prop | Type | Défaut | Requis | Description |
|---|---|---|---|---|
title | ReactNode | — | Non | Titre ou logo (texte simple ou JSX : logo + nom, badge…). |
titleHref | string | # | Non | Lien du titre (retour à l'accueil en général). |
items | { label, href?, onClick? }[] | [] | Non | Éléments de navigation : lien si href, bouton si onClick. |
className | string | — | Non | Classes CSS additionnelles (ex. sticky top-0 z-10 pour figer la barre). |
Exemples
bpm.topNav(title="FleetOps", title_href="/", items=[
{"label": "Tableau de bord", "href": "/tableau-de-bord"},
{"label": "Interventions", "href": "/interventions"},
{"label": "Flotte", "href": "/flotte"},
{"label": "Rapports", "href": "/rapports"},
])# Items en boutons (actions) plutôt qu'en liens
bpm.topNav(title="Console admin", items=[{"label": "Recharger", "on_click": reload_data}, {"label": "Aide", "on_click": show_help}])# Barre figée en haut de page via className
bpm.topNav(title="FleetOps", items=nav_items, class_name="sticky top-0 z-10")Limites et composition
bpm.topNav ne prévoit pas de zone d'actions à droite (recherche, avatar, notifications) : pour une barre d'application complète, composer avec bpm.pageLayout et bpm.avatar, ou utiliser bpm.sidebar pour une navigation dense. L'état « lien actif » est géré par l'application (comme dans la démo, via onClick), pas par le composant.