🍞 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 :

1. Forkez le projet
2. Créez votre branche de fonctionnalité (git checkout -b feature/amazing-feature)
3. Commitez vos changements (git commit -m 'Add some amazing feature')
4. Poussez vers la branche (git push origin feature/amazing-feature)
5. 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: [email protected]

🙏 Remerciements

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

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