Navigation & Structure
Composants essentiels pour structurer la navigation globale et secondaire de vos applications administrative et portails publics.
01. Barre de Navigation Principale (.ml-header-nav)
La barre de navigation principale (.ml-header-nav) héberge les liens de premier niveau de votre application web ou portail institutionnel. Elle gère la mise en avant de l'onglet actif (.ml-nav-item.active) avec soulignement dynamique vert national et survol lumineux.
<nav class="ml-header-nav" aria-label="Menu principal">
<a href="/" class="ml-nav-item active">Accueil</a>
<a href="/demarches/" class="ml-nav-item">Démarches</a>
<a href="/ministeres/" class="ml-nav-item">Ministères</a>
<a href="/actualites/" class="ml-nav-item">Actualités</a>
</nav>02. Sous-Menu et Menu Déroulant (Dropdown)
Les sous-menus contextuels s'affichent sous forme de panneau flottant en verre dépoli (glassmorphism) lors du survol ou du clic sur l'élément déclencheur.
<!-- Menu déroulant (Sous-menu contextuel) -->
<div class="ml-dropdown">
<button type="button" class="ml-dropdown-trigger" aria-expanded="true">
<span>Espace Citoyen</span>
<svg viewBox="0 0 24 24" width="14" height="14"><path d="M6 9l6 6 6-6"></path></svg>
</button>
<div class="ml-dropdown-menu show">
<div class="ml-dropdown-title">Accès sécurisé</div>
<a href="#" class="ml-dropdown-item active">
<span class="ml-dropdown-dot user"></span>
Mes Démarches en ligne
</a>
<a href="#" class="ml-dropdown-item">
<span class="ml-dropdown-dot agent"></span>
Portail Agent Public
</a>
<div class="ml-dropdown-divider"></div>
<a href="#" class="ml-dropdown-item">Aide & Support</a>
</div>
</div>03. Fil d'Ariane (Breadcrumbs)
<nav class="ml-breadcrumb" aria-label="Fil d'Ariane">
<ol class="ml-breadcrumb-list">
<li class="ml-breadcrumb-item"><a href="#">Accueil</a></li>
<li class="ml-breadcrumb-item"><a href="#">Démarches</a></li>
<li class="ml-breadcrumb-item active" aria-current="page">Carte Consulaire</li>
</ol>
</nav>04. Pagination
<nav class="ml-pagination" aria-label="Pagination">
<a href="#" class="ml-pagination-btn disabled">‹ Préc.</a>
<a href="#" class="ml-pagination-btn active">1</a>
<a href="#" class="ml-pagination-btn">2</a>
<span class="ml-pagination-ellipsis">...</span>
<a href="#" class="ml-pagination-btn">10</a>
<a href="#" class="ml-pagination-btn">Suiv. ›</a>
</nav>05. Indicateur d'étapes (Stepper)
<div class="ml-stepper">
<!-- Completed step -->
<div class="ml-step completed">
<div class="ml-step-circle">✓</div>
<div class="ml-step-label">Pièces requises</div>
</div>
<!-- Active step -->
<div class="ml-step active">
<div class="ml-step-circle">2</div>
<div class="ml-step-label">Formulaire</div>
</div>
<!-- Pending step -->
<div class="ml-step">
<div class="ml-step-circle">3</div>
<div class="ml-step-label">Rendez-vous</div>
</div>
</div>06. Menu Latéral (Sidemenu) & Accordéon Mobile
Le menu latéral (.ml-sidemenu) organise la navigation secondaire d'une sous-section. Sur grand écran, il s'affiche verticalement. Sur mobile ou avec la classe .ml-sidemenu--mobile, il s'enroule sous forme d'un bouton de niveau de rubrique escamotable avec chevron.
<!-- Desktop side menu / mobile accordion -->
<nav class="ml-sidemenu" aria-label="Menu de section">
<button type="button" class="ml-sidemenu__btn" aria-expanded="false" aria-controls="sidemenu-content">
<span>Dans cette rubrique (Nom de la section)</span>
<svg class="ml-sidemenu__btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
<div class="ml-sidemenu__content" id="sidemenu-content">
<div class="ml-sidemenu__title">Nom de la section</div>
<ul class="ml-sidemenu__list">
<li class="ml-sidemenu__item"><a href="#" class="ml-sidemenu__link active">Page active</a></li>
<li class="ml-sidemenu__item"><a href="#" class="ml-sidemenu__link">Autre page</a></li>
</ul>
</div>
</nav>07. Sommaire d'in-page (Summary)
Le sommaire permet à l'usager de naviguer directement entre les différentes sections d'une même page d'article ou de documentation via des ancres.
<nav class="ml-summary" aria-label="Sommaire de la page">
<div class="ml-summary__title">SOMMAIRE</div>
<ol class="ml-summary__list">
<li class="ml-summary__item"><a href="#section1" class="ml-summary__link">1. Cadre légal et règlementation</a></li>
<li class="ml-summary__item"><a href="#section2" class="ml-summary__link">2. Administrations concernées</a></li>
<li class="ml-summary__item"><a href="#section3" class="ml-summary__link">3. Questions fréquentes</a></li>
</ol>
</nav>08. Barre d'Administration (Admin Toolbar & Scroll Horizontale Optionnel)
La barre d'administration (.ml-admin-bar) offre une barre fixe d'actions (positionnée en sticky en haut par défaut sur toutes les résolutions). La classe modificatrice optionnelle .ml-admin-bar-scrollable permet un défilement horizontal fluide du contenu sur mobile sans rogner ni déformer les éléments d'action.
<!-- Standard Admin Bar -->
<div class="ml-admin-bar">
<div class="ml-admin-bar-container">
<!-- Barre d'outils d'administration -->
</div>
</div>
<!-- Optionnel: Barre d'outils avec scroll horizontal fluide sur mobile -->
<div class="ml-admin-bar ml-admin-bar-scrollable">
<div class="ml-admin-bar-container">
<!-- Contenu défilable sans déformation -->
</div>
</div>