🧭 Navigation Orochi
Le composant Navigation (Navbar) d'Orochi CSS vous permet de créer des barres de navigation modernes, flexibles et responsives. Elle s’adapte automatiquement aux différents écrans et peut intégrer des éléments tels que des menus déroulants, des boutons, des logos et bien plus encore.
Navigation de base
La navigation de base constitue le cœur du système de navigation Orochi. Elle contient un logo, des liens de menu et un bouton “burger” qui s’affiche automatiquement sur les petits écrans pour une meilleure accessibilité mobile.
<nav class="o-nav o-nav-light">
<div class="o-box-fluid">
<a href="#" class="o-nav-logo">Logo</a>
<button class="o-burger">
<span class="o-burger-icon"></span>
</button>
<div class="o-menu">
<ul class="o-nav-list">
<li class="o-nav-item"><a href="#" class="o-nav-link">Accueil</a></li>
<li class="o-nav-item"><a href="#" class="o-nav-link">Services</a></li>
<li class="o-nav-item"><a href="#" class="o-nav-link">Contact</a></li>
</ul>
</div>
</div>
</nav>Navigation alignée à droite
En ajoutant la classe o-justify-content-end à l’élément
<div class="o-menu">, les liens du menu sont automatiquement alignés
à droite dans la barre de navigation.
Cela permet d’organiser les éléments pour obtenir une mise en page plus équilibrée
lorsque le logo se trouve à gauche et le menu à droite.
<nav class="o-nav o-nav-light">
<div class="o-box-fluid">
<a href="#" class="o-nav-logo">Logo</a>
<button class="o-burger">
<span class="o-burger-icon"></span>
</button>
<div class="o-menu o-justify-content-end">
<ul class="o-nav-list">
<li class="o-nav-item"><a href="#" class="o-nav-link">Accueil</a></li>
<li class="o-nav-item"><a href="#" class="o-nav-link">Services</a></li>
<li class="o-nav-item"><a href="#" class="o-nav-link">Contact</a></li>
</ul>
</div>
</div>
</nav>Avec dropdown
Les menus déroulants (dropdowns) permettent d’ajouter des sous-catégories dans votre navigation. Ils sont parfaits pour les sites comportant plusieurs sections ou produits.
<nav class="o-nav o-bg-light">
<div class="o-box-fluid">
<a href="#" class="o-nav-logo">Menu</a>
<button class="o-burger">
<span class="o-burger-icon"></span>
</button>
<div class="o-menu">
<ul class="o-nav-list">
<li class="o-nav-item o-dropdown">
<a href="#" class="o-nav-link">Produits</a>
<ul class="o-dropdown-menu">
<li><a href="#" class="o-dropdown-item">Logiciels</a></li>
<li><a href="#" class="o-dropdown-item">Applications</a></li>
</ul>
</li>
<li class="o-nav-item"><a href="#" class="o-nav-link">Support</a></li>
</ul>
</div>
</div>
</nav>Variantes de couleur
Le système de couleur Orochi vous permet de modifier facilement le thème de votre barre de navigation.
Utilisez les classes utilitaires comme o-bg-dark, o-bg-primary ou
o-bg-danger pour correspondre à votre identité visuelle.
<!-- Danger -->
<nav class="o-nav o-bg-danger">...</nav>
<!-- Dark -->
<nav class="o-nav o-bg-dark">...</nav>Position fixed
Grâce aux classes de positionnement d’Orochi, vous pouvez fixer votre barre de navigation en haut de la page
(o-nav-fixed) pour la garder visible lors du défilement.
Cela améliore la navigation et l’expérience utilisateur sur les sites à longue page.
<nav class="o-nav o-fixed">
<!-- Contenu navigation -->
</nav>