Navigation
Header landing page, bottom navigation bar app, menus et patterns de navigation.
1. Header Landing Page
Le header de swellr.fr adopte un comportement sticky : transparent sur le hero, il devient blanc avec une légère ombre au scroll.
Le header adopte des hauteurs responsives : 56px sur mobile, 64px sur tablet, 72px sur desktop. Il contient le logo à gauche, les liens de navigation centrés, et le bouton CTA "Devenir testeur" à droite. La transition sticky est animée sur 300ms.
Version transparente — sur hero sombre
État par défaut — position: top of page
scroll = 0
S
SWELLR
↓ Devenir testeur
La meilleure appli surf — prévisions simplifiées, spots, sessions
Version scrollée — fond blanc avec ombre
État sticky — après scroll
scroll > 64px
Spécifications Header
| Élément | Valeur / Token | Note |
|---|---|---|
| Hauteur — Mobile | 56px | < 768px |
| Hauteur — Tablet | 64px | 768px – 1199px |
| Hauteur — Desktop | 72px | ≥ 1200px |
| Padding horizontal | 32px | --space-8 |
| Fond transparent | transparent | Au top de page (hero) |
| Fond scrollé | #ffffff | Avec box-shadow: var(--shadow-sm) |
| Logo | Manrope ExtraBold 20px | Couleur teal sur blanc, blanc sur sombre |
| Liens nav | Inter Medium 15px | Gris #637887 → teal #028490 au hover |
| Lien actif | #028490 + underline 2px | Indicateur positionné à -4px |
| CTA | Inter SemiBold 14px pill | bg #028490, radius 9999px |
| Transition sticky | 0.3s ease | background + box-shadow |
| z-index | 100 | Au-dessus de tous les éléments de page |
2. Bottom Navigation Bar — App
Composant principal de navigation de l'application mobile. Reproduit fidèlement depuis Figma (node 85-4961). Fond blanc cassé, 4 onglets, labels Manrope Bold 11px.
La bottom nav bar est ancrée en bas de l'écran sur mobile (position: fixed, bottom: 0). Sa hauteur totale est de 85px : 10px padding-top + contenu + 22px padding-bottom (safe area iOS). Largeur totale de référence : 394px (iPhone 14).
État 1 — Spots actif
iPhone 14 — 394px
Écran Spots
État 2 — Recherche active
iPhone 14 — 394px
Écran Recherche
3. Spécifications techniques — Bottom Nav Bar
Référence complète des valeurs issues du fichier Figma (node 85-4961).
| Élément | Valeur | Token CSS / Note |
|---|---|---|
| Hauteur totale | 85px | 10px top + contenu + 22px bottom |
| Padding top | 10px | --space-2-5 |
| Padding bottom | 22px | Safe area iOS inclus |
| Padding horizontal | 40px | De chaque côté |
| Taille icônes | 31 × 31px | Zone de touch 44×44px recommandée |
| Police labels | Manrope Bold 11px | font-weight: 700 |
| Couleur active | #028490 | --color-teal — icône + label |
| Couleur inactive | #757575 | Icône + label inactifs |
| Fond | #F8F8F8 | --color-blanc |
| Border top | 1px solid rgba(2,132,144,0.1) | --color-teal-10 |
| Largeur de référence | 394px | iPhone 14 — s'adapte en flex |
| Nombre d'onglets | 4 | Spots · Recherche · Météo · Profil |
| Gap label / icône | 4px | flex-direction: column, align-items: center |
| Position | fixed, bottom: 0 | En production React Native (tabBar) |
4. Header Mobile — Menu Hamburger
Animation CSS pure (checkbox trick) sans JavaScript. Le menu coulisse verticalement avec une transition fluide sur max-height et opacity.
ⓘ
Cliquez sur l'icône hamburger ☰ pour ouvrir/fermer le menu — animation CSS uniquement
Détails d'implémentation
| Propriété | Valeur | Détail |
|---|---|---|
| Technique | CSS only — checkbox trick | Aucun JavaScript requis pour la démo |
| Animation ouverture | max-height: 0 → 320px | Transition 0.35s ease |
| Animation hamburger → X | rotate(45deg) + translateY | Ligne 1 : +45°, Ligne 2 : opacity 0, Ligne 3 : -45° |
| Hauteur header mobile | 64px | Même hauteur que desktop |
| Breakpoint mobile | < 768px | Masquer nav desktop, afficher hamburger |
| Fond menu ouvert | #ffffff | Fond blanc opaque, pas de blur |
5. Breadcrumbs — Fil d'Ariane
Patterns de navigation secondaire avec différentes variantes de séparateurs et de fond.
Variante 1 — Séparateur › (angle droit)
Usage : charte graphique, backoffice
Variante 2 — Séparateur / (slash)
Usage : URLs, chemins de fichier
Variante 3 — Fond mint teal
Usage : pages app, contexte teal
Variante 4 — Dark (fond sombre)
Usage : hero sombre, sections dark
| Propriété | Valeur |
|---|---|
| Police | Inter Regular 14px |
| Couleur lien | #637887 → #028490 au hover |
| Couleur page courante | #073742 — font-weight 600 |
| Séparateurs | › / / / — |
| Gap entre items | 6px |
| Hauteur ligne | auto (padding: 12px 20px) |