Camel2.0 — Dokumentacja komponentów UI

2.22 #Components.Navbar Navbar

Toggle example guides Toggle HTML markup

Główna nawigacja – sticky header z logo, linkami, dropdowns, points badge, profile toggle. Domyślne tło: Camel Yellow. Wariant .navbar--negative (przezroczyste tło, biały tekst na ciemnym hero). Stan .navbar--scrolled (JS, po 30% vh – slide-in z position:fixed). Mobile overlay: .mobile-nav z animacją stagger. Desktop megamenu. JS: src/js/modules/navbar.js.

Examples
Default styling

Złożony komponent (sticky header + mobile overlay + megamenu). Widoczny na każdej podstronie. Podgląd: index.html

.navbar--negative
Przezroczyste tło, biały tekst (na ciemnym hero)

Złożony komponent (sticky header + mobile overlay + megamenu). Widoczny na każdej podstronie. Podgląd: index.html

Markup: navbar.html 
<!-- Navbar: Informacja -->
<p style="color:#666;font-size:14px;">
  Złożony komponent (sticky header + mobile overlay + megamenu).
  Widoczny na każdej podstronie. Podgląd: 
  <a href="/index.html" target="_blank">index.html</a>
</p>
Source: src/scss/components/_navbar.scss, line 1