HeaderBar

Utilisation

Exemples

Titre et sous-titre

Vous pouvez afficher un titre et un sous-titre en utilisant les props service-title et service-sub-title.

Accessibilité

Vous pouvez personnaliser la propriété aria-label du lien de retour à l’accueil en utilisant la prop home-arialabel.

Menu de navigation

Vous pouvez afficher un menu de navigation en utilisant la prop navigation-items.

Marque partenaire

Vous pouvez afficher une marque partenaire en utilisant le slot secondary-logo.

Slot par défaut

Vous pouvez ajouter du contenu dans la partie droite du header en utilisant le slot par défaut.

Contenu supplémentaire dans la barre de navigation

Vous pouvez ajouter du contenu avant ou après le contenu principal de la barre de navigation en utilisant les slots navigation-bar-prepend et navigation-bar-secondary-content.

Contenu supplémentaire dans le menu mobile

Vous pouvez ajouter du contenu avant ou après le contenu principal du menu sur mobile en utilisant les slots navigation-drawer-prepend et navigation-drawer-append.

Thème

Vous pouvez utiliser un thème différent en utilisant la prop theme.

API

Personnalisation

Largeur interne

Vous pouvez définir une largeur interne en utilisant la prop inner-width.

Bouton menu dans la barre de navigation

Vous pouvez afficher le bouton pour activer le menu dans la barre de navigation sur les écrans mobiles en utilisant la prop show-nav-bar-menu-btn.

Marque personnalisée

Vous pouvez personnaliser le contenu de la marque (titre, sous-titre…) en utilisant le slot brand-content.

Composants Vuetify

Vous pouvez personnaliser les composants Vuetify contenus dans le pattern Header en utilisant la prop vuetify-options.

Slots

Vous pouvez remplacer le contenu de la barre de navigation ainsi que du menu sur les écrans mobiles en utilisant les slots navigation-bar-content et navigation-drawer-content.