BjHeader

En-tête institutionnel avec marque, nom de service, outils et navigation ; menu mobile intégré. Expose menuOpen et toggleMenu pour un contrôle programmatique.

Utilisation

<script setup>
import { BjHeader } from '@flrxnt/dsbj/vue'
</script>

<template>
  <BjHeader service-name="Mon service" service-tagline="Portail des démarches">
    <template #logo>
      <span class="bj-logo bj-logo--md"><!-- mark --></span>
    </template>
    <template #tools>
      <a href="#" class="bj-header__tools-link">Aide</a>
    </template>
    <template #nav>
      <li class="bj-header__nav-item">
        <a class="bj-header__nav-link" href="#">Accueil</a>
      </li>
    </template>
  </BjHeader>
</template>

Aperçu

Mon servicePortail des démarches

Aide

Prop serviceName

Mon service

<BjHeader service-name="Service seul">
  <template #logo><span class="bj-logo bj-logo--md" /></template>
  <template #nav>
    <li class="bj-header__nav-item"><a class="bj-header__nav-link" href="#">Accueil</a></li>
  </template>
</BjHeader>

Prop serviceTagline

Sous-titre ou baseline sous le nom du service.

Mon servicePortail des démarches

<BjHeader service-name="Titre" service-tagline="Sous-titre affiché">
  <template #logo><span class="bj-logo bj-logo--md" /></template>
  <template #nav>
    <li class="bj-header__nav-item"><a class="bj-header__nav-link" href="#">Accueil</a></li>
  </template>
</BjHeader>

serviceName + serviceTagline

Mon servicePortail des démarches

Slot brand

Marque personnalisée

<BjHeader>
  <template #brand>
    <a class="bj-header__brand" href="/custom">
      <strong>Marque personnalisée</strong>
    </a>
  </template>
  <template #nav>
    <li class="bj-header__nav-item"><a class="bj-header__nav-link" href="#">Accueil</a></li>
  </template>
</BjHeader>

Slot logo

Mon service

Slot tools

Mon service

Aide

Slot nav

Mon service

Expose (menuOpen, toggleMenu)

Via une ref template, appelez toggleMenu() ou lisez menuOpen (ref) pour synchroniser avec votre logique.

Expose demo

<script setup>
import { ref } from 'vue'
import { BjHeader } from '@flrxnt/dsbj/vue'

const headerRef = ref<InstanceType<typeof BjHeader> | null>(null)

function openMenu() {
  headerRef.value?.toggleMenu()
}
</script>

<template>
  <BjHeader ref="headerRef" service-name="App">
    <template #logo><span class="bj-logo bj-logo--md" /></template>
    <template #nav>
      <li class="bj-header__nav-item"><a class="bj-header__nav-link" href="#">Accueil</a></li>
    </template>
  </BjHeader>
  <button type="button" class="bj-btn bj-btn--secondary" @click="openMenu">Ouvrir le menu</button>
</template>

Slots

Slot	Description
`#brand`	Remplace tout le bloc marque par défaut (lien + logo + textes). Utiliser pour une structure HTML personnalisée.
`#logo`	Contenu du sigle ou image à l’intérieur du lien marque par défaut.
`#tools`	Zone droite (liens, recherche, etc.) à côté du bouton menu.
`#nav`	Éléments li à placer dans la liste de navigation (classes .bj-header__nav-item / .bj-header__nav-link).

Props

Prop	Description
`serviceName`	Titre du service affiché à côté du logo (dans le bloc marque par défaut).
`serviceTagline`	Sous-titre ou baseline sous le nom du service.