Navbar

Utilisée dans les menus de navigation.

Structure de base

• • La classe is-new est nécessaire pour indiquer que l'on souhaite utiliser la structure du nouveau header
• • Deux modes d'affichage seulement : mobile et desktop ; utilisez is-hidden-touch pour gérer le responsive
• • La navigation principale, bien qu'en seconde position visuellement, se trouve en premier dans le code ; c'est la classe navbar-menu qui gère le positionnement.

Navigation principale

Menu

• • Chaque lien de premier niveau comporte au moins la classe navbar-item
• • Les opérations commerciales se gèrent simplement en ajoutant la classe has-text-primary sur le lien (donc pas sur le navbar-item)
• • La seconde partie de la navigation complètement à droite est une autre div.navbar-links, qui suit directement la première ; la séparation visuelle est automatique
• • Si un lien de navigation principale comporte un sous-menu qui s'active au passage de la souris, ajoutez la classe is-megadropdown-parent
• • Si un lien consiste uniquement en une icône, la classe is-icon est nécessaire en plus de navbar-link
• • La classe is-hoverable n'a plus d'utilité.

Sous-menu

• • Le sous-menu suit directement le lien du menu de navigation dans div.navbar-dropdown
• • Les colonnes ne sont plus nécessaires dans le sous-menu, privilégiez une séparation grâce à div.navbar-dropdown-section (jusqu'à 3 par sous-menu)
• • N'utilisez pas la classe title pour les titres des menus déroulants, ceux-ci doivent utiliser la classe navbar-category-title
• • Les liens qui s'y trouvent sont des a classiques ; ceux qui suivent sont des éléments ayant la classe navbar-link
• • Les éléments devant être mis en avant auront en plus la classe is-highlighted

Navigation secondaire

• • Chaque élément enfant de navbar-icons est un navbar-item
• • Les éléments de cette navigation secondaire pousseront le contenu de div.navbar-extras s'ils manquent de place
• • L'affichage est strictement identique à celui de la classe icon-and-text, celle-ci n'est donc pas nécessaire ici
• • Le nombre d'items au panier est géré par la classe is-stacked sur l'icône et l'utilisation du composant Badge (positionné en-haut via is-up)
• • L'élément « se connecter » est une div.is-alternate et contient le lien en lui-même (a.navbar-link) et le sous-menu propre à cet élément (div.navbar-dropdown)
• • La classe is-right-aligned n'est plus nécessaire
• • Le sous-menu se déclenche au clic de souris et ne nécessite pas la classe is-megadropdown-parent
• • Trilogy est un Design System orienté CSS et ne prévoit pas le Javascript nécessaire à ce comportement
• • Pour la structure des sous-menus, voyez la section suivante de la documentation

Sous-menu Espace Client

• • Le bouton pour afficher le dropdown est de taille fixe et son contenu sera tronqué si nécessaire, avec adjonction d'une ellipse
• • Si le menu comporte une croix de fermeture, celle-ci se situe en premier dans le HTML du sous-menu (élément button avec classe navbar-dropdown-close)
• • À nouveau, le Javascript nécessaire à ce comportement n'est pas géré par Trilogy et doit être implémenté de manière indépendante
• • La plupart des éléments présents dans le sous-menu sont des éléments Trilogy classiques (pas besoin d'utiliser des classes telles que navbar-item ou navbar-link)

Version mobile

Activez le « Mode Reponsive » de la documentation pour cette section

Fonctionnement du menu

• • Le menu de navigation principale étant masqué par la classe is-hidden-touch, il faut le recréer dans le menu mobile ; le code n'est pas nécessairement identique.
• • Les contenus bonus placés dans la div.navbar-extras doivent également être répétés si nécessaire
• • Chaque fils direct dans le menu est une div.navbar-dropdown-section (sauf si besoin d'une séparation visuelle)
• • La séparation visuelle est toujours gérée par div.navbar-divider

Fonctionnement du sous-menu

• • Les éléments de sous-menu, comme la navigation principale, doivent être au sein d'une div.navbar-item-accordion
• • Chaque div.navbar-item-accordion possède un attribut id qui permettra d'afficher le sous-menu
• • Le premier enfant s'y trouvant est un lien de retour pointant vers #
• • Chaque titre d'accordéon est un lien avec la classe navbar-item-accordion-header
• • La destination de ce lien est l'ancre interne définie dans l'attribut id de la div.navbar-item-accordion
• • Le sous-menu à afficher se trouve dans une div.navbar-item-accordion-content

Header au complet

• • Ajoutez la classe is-new pour activer le nouveau header
• • Utilisez la classe is-alternate pour le bouton « Se connecter »
• • Le code du moteur de recherche et des liens principaux de navigation nécessite d'être dupliqué dans le menu mobile
• • Pour tester le nouveau menu en sticky, ajouter la classe is-sticky

Header BTE

Topbar

La topbar est sectionnée en deux.

• • Le coté gauche pour un texte
• • le coté droit pour la connexion les liens du compte ainsi que le formulaire de changement de langue