🍞 Mo Breadcrumb Manager

Mo Breadcrumb Manager est une bibliothèque Angular moderne qui génère automatiquement des fils d'Ariane (breadcrumbs) dynamiques basés sur la configuration de vos routes. Simple à intégrer, hautement personnalisable et entièrement responsive. À intégrer avec tailwind css.

✨ Fonctionnalités

🔄 Génération automatique des breadcrumbs depuis les routes
🎯 Navigation intuitive avec support du clic
📱 Design responsive avec Tailwind CSS
🚀 Compatible Angular 20+ avec support standalone
⚡ Configuration simple via les données de route
🎨 Entièrement personnalisable
📖 Support TypeScript complet
🔍 Gestion intelligente des titres de page

📦 Installation

npm install mo-breadcrumb-manager

🚀 Utilisation rapide

1. Import du composant

Pour les composants standalone :

import { MoBreadcumbManager } from "mo-breadcrumb-manager";

@Component({
  selector: "app-home",
  standalone: true,
  imports: [MoBreadcumbManager],
  template: `
    <mo-breadcrumb-manager></mo-breadcrumb-manager>
    <router-outlet></router-outlet>
  `,
})
export class HomeComponent {}

export class AppModule {}


### 2. Configuration des routes

Ajoutez les propriétés `breadcrumb` et `title` dans vos routes :

```typescript
const routes: Routes = [
  {
    path: "dashboard",
    component: DashboardComponent,
    data: {
      breadcrumb: "Tableau de bord",
      title: "Dashboard - Mon App",
    },
  },
  {
    path: "properties",
    data: { breadcrumb: "Propriétés" },
    children: [
      {
        path: "list",
        component: ListComponent,
        data: {
          breadcrumb: "Liste des unités locatives à vérifier",
          title: "Gestion des unités locatives",
        },
      },
      {
        path: "edit/:id",
        component: EditComponent,
        data: {
          breadcrumb: "Modifier",
          title: "Modification de propriété",
        },
      },
    ],
  },
];

3. Utilisation dans le template

<mo-breadcrumb-manager></mo-breadcrumb-manager>

🎨 Exemples visuels

Navigation simple

Accueil > Propriétés > Liste des unités locatives

Avec titre de page

Gestion des unités locatives
Accueil > Propriétés > Liste des unités locatives à vérifier

Navigation complexe

Analytics Dashboard
Accueil > Administration > Utilisateurs > Détails

⚙️ Configuration avancée

Propriétés des données de route

Propriété	Type	Description	Obligatoire
`breadcrumb`	`string`	Texte affiché dans le breadcrumb	✅
`title`	`string`	Titre de la page (optionnel)	❌

Exemples de configuration

// Route avec breadcrumb uniquement
{
  path: 'users',
  component: UsersComponent,
  data: { breadcrumb: 'Utilisateurs' }
}

// Route avec breadcrumb et titre
{
  path: 'profile',
  component: ProfileComponent,
  data: {
    breadcrumb: 'Mon Profil',
    title: 'Profil utilisateur - Mon App'
  }
}

// Route sans titre (titre vide)
{
  path: 'settings',
  component: SettingsComponent,
  data: {
    breadcrumb: 'Paramètres',
    title: ''
  }
}

Gestion des routes dynamiques

Pour les routes avec paramètres, le breadcrumb s'adapte automatiquement :

{
  path: 'user/:id',
  component: UserDetailComponent,
  data: {
    breadcrumb: 'Détail utilisateur',
    title: 'Profil utilisateur'
  }
}

🎨 Personnalisation du style

Le composant utilise Tailwind CSS par défaut. Vous pouvez personnaliser l'apparence :

Classes CSS utilisées

.text-primary : Couleur du premier élément
.text-gray-600 : Couleur des éléments intermédiaires
.text-black : Couleur de l'élément actuel
.font-semibold : Police du dernier élément

Exemple de personnalisation

/* Dans votre fichier CSS global */
mo-breadcrumb-manager .text-primary {
  color: #your-primary-color;
}

mo-breadcrumb-manager .text-gray-600:hover {
  color: #your-hover-color;
}

🔧 API du composant

Sélecteur

<mo-breadcrumb-manager></mo-breadcrumb-manager>

Propriétés en lecture seule

breadcrumbItems: Liste des éléments du breadcrumb
pageTitle: Titre de la page actuelle

Méthodes

onBreadcrumbClick(item): Gère la navigation lors du clic

🏗️ Développement

Prérequis

Angular 20+
Angular Router
Node.js 18+

Installation pour le développement

git clone https://github.com/votre-username/mo-breadcrumb-manager.git
cd mo-breadcrumb-manager
npm install

Build de la library

ng build mo-breadcrumb-manager

Tests

ng test mo-breadcrumb-manager

🤝 Contribution

Les contributions sont les bienvenues ! Voici comment procéder :

Forkez le projet
Créez votre branche de fonctionnalité (git checkout -b feature/amazing-feature)
Commitez vos changements (git commit -m 'Add some amazing feature')
Poussez vers la branche (git push origin feature/amazing-feature)
Ouvrez une Pull Request

📋 Roadmap

[ ] Support des icônes personnalisées
[ ] Thèmes prédéfinis (Dark mode, Material, etc.)
[ ] Animation des transitions
[ ] Support i18n
[ ] Breadcrumb condensé pour mobile
[ ] Intégration avec Angular Material

📝 Changelog

Version 0.0.1

✨ Génération automatique des breadcrumbs
✨ Support des titres de page
✨ Navigation par clic
✨ Design responsive avec Tailwind CSS
✨ Support Angular 20+

🐛 Signaler un bug

Si vous trouvez un bug, veuillez créer une issue avec :

Version d'Angular utilisée
Description du problème
Étapes pour reproduire
Comportement attendu vs réel

📄 Licence

Ce projet est sous licence MIT. Voir le fichier LICENSE pour plus de détails.

👨‍💻 Auteur

Votre Nom

GitHub: https://github.com/Mbra-Oliver
Email: mbraoliver28@gmail.com

🙏 Remerciements

Équipe Angular pour le framework
Communauté Tailwind CSS
Tous les contributeurs

⭐ N'hésitez pas à donner une étoile si ce projet vous aide ! ⭐

パッケージの詳細