Navigation
Composants de navigation : fil d'Ariane, onglets, pagination, barre de commandes et en-tête de page.
BcBreadcrumb
vue
<BcBreadcrumb :items="[
{ label: 'Accueil', href: '#' },
{ label: 'Utilisateurs', href: '#' },
{ label: 'Alice Martin' },
]" />Props
| Prop | Type | Défaut | Description |
|---|---|---|---|
items | BreadcrumbItem[] | — (requis) | Éléments { label, href? } |
ariaLabel | string | "Fil d'Ariane" | Label ARIA |
separator | string | ">" | Séparateur |
BcTabs
Composant d'onglets. L'onglet actif est distingué par un trait gradient 2px en bas, cohérent avec l'item actif de la side navigation.
Variante simple
vue
<script setup>
const activeTab = ref('general')
const tabs = [
{ id: 'general', label: 'Général' },
{ id: 'security', label: 'Sécurité' },
{ id: 'billing', label: 'Facturation' },
{ id: 'notifications', label: 'Notifications' },
]
</script>
<BcTabs v-model="activeTab" :tabs="tabs">
<template #panel-general>
<!-- contenu de l'onglet Général -->
</template>
<template #panel-security>
<!-- contenu de l'onglet Sécurité -->
</template>
</BcTabs>Variante avec badges
Les badges permettent d'afficher des compteurs sur chaque onglet.
vue
<script setup>
const tabs = [
{ id: 'active', label: 'Dossiers actifs', badge: 12 },
{ id: 'pending', label: 'En attente', badge: 4 },
{ id: 'archive', label: 'Archivés', badge: 38 },
]
</script>
<BcTabs v-model="activeTab" :tabs="tabs" />Props
| Prop | Type | Défaut | Description |
|---|---|---|---|
tabs | TabItem[] | — (requis) | Onglets { id, label, badge?, disabled? } |
modelValue | string | "" | Onglet actif (v-model) |
ariaLabel | string | "Onglets" | Label ARIA |
Type TabItem
ts
interface TabItem {
id: string
label: string
badge?: string | number // compteur affiché sur l'onglet
disabled?: boolean
}Slots
| Slot | Props | Description |
|---|---|---|
#panel-{id} | { tab } | Contenu du panneau pour l'onglet id |
#panel | { tab } | Contenu générique (fallback si #panel-{id} absent) |
Events
| Event | Payload | Description |
|---|---|---|
update:modelValue | string | Changement d'onglet (v-model) |
change | string | Idem, pratique pour les side-effects |
BcPagination
vue
<BcPagination v-model="currentPage" :total-pages="12" />Props
| Prop | Type | Défaut | Description |
|---|---|---|---|
modelValue | number | — (requis) | Page courante (v-model) |
totalPages | number | — (requis) | Nombre total de pages |
maxVisiblePages | number | 7 | Pages visibles |
ariaLabel | string | "Pagination" | Label ARIA |
prevLabel | string | "Précédent" | Label bouton précédent |
nextLabel | string | "Suivant" | Label bouton suivant |
BcPageHeader
Structure le haut de chaque page métier avec navigation, contexte et actions principales. Le breadcrumb s'insère via le slot #breadcrumb.
Variante avec actions
vue
<BcPageHeader
title="Corp Alpha — SAS Nextera"
subtitle="Dossier créé le 15/01/2026 · Responsable : a.lavon"
>
<template #breadcrumb>
<BcBreadcrumb :items="[
{ label: 'Dashboard', href: '#' },
{ label: 'Onboarding', href: '#' },
{ label: 'Corp Alpha' },
]" />
</template>
<template #actions>
<BcButton variant="ghost">Exporter</BcButton>
<BcButton variant="primary">Modifier le dossier</BcButton>
</template>
</BcPageHeader>Props
| Prop | Type | Défaut | Description |
|---|---|---|---|
title | string | — (requis) | Titre H1 de la page |
subtitle | string | "" | Sous-titre contextuel |
meta | string | "" | Métadonnée en monospace (ex: ID, date) |
Slots
| Slot | Description |
|---|---|
#breadcrumb | Fil d'Ariane (utiliser <BcBreadcrumb>) |
default | Contenu complémentaire sous le titre |
#actions | Boutons d'action alignés à droite |
BcCommandBar
Barre d'actions horizontale pour regrouper des boutons, champs de recherche et filtres. Les enfants vont dans le slot par défaut.
Mode actions
vue
<BcCommandBar>
<BcButton variant="ghost" size="sm">Importer</BcButton>
<BcButton variant="ghost" size="sm">Exporter</BcButton>
<BcButton variant="primary" size="sm">Nouveau dossier</BcButton>
</BcCommandBar>Mode compact (dense)
vue
<BcCommandBar :dense="true">
<BcButton variant="ghost" size="sm">Filtrer</BcButton>
<BcButton variant="primary" size="sm">+ Nouveau</BcButton>
</BcCommandBar>Props
| Prop | Type | Défaut | Description |
|---|---|---|---|
wrap | boolean | true | Retour à la ligne si débordement |
dense | boolean | false | Espacement réduit (min-height 38px vs 44px) |
Accordion en contexte
Le composant BcAccordion est utilisé dans les pages de navigation pour les contenus repliables. La documentation canonique (API complète + variantes) est centralisée ici :