Floating Navigation

Barra di navigazione sticky fluttuante con indicatore hover scorrevole, resource dropdown, sezioni mobili, e pannello mobile fluttuante. I link di navigazione al suo interno utilizzano il componente Tabs (TabsList + TabsTrigger).

import { FloatingNavigation } from '@qoovex/ui/components/floating-navigation'

Modalità Marketing (espansa)

Header con link, risorse dropdown, e CTA

Sirio

Anatomia Interna

Il componente FloatingNavigation è composto da:

  • Shell — <header> sticky con backdrop-blur, border, e transizione compact/expanded.
  • Brand — Logo reso tramite render prop brand(compact).
  • Navigation Links — <TabsList> + <TabsTrigger> dal componente Tabs condiviso. L'indicatore hover (.tabs__hover-indicator) scorre tra le voci con cubic-bezier(0.16, 1, 0.3, 1) a 260ms.
  • Resource Dropdown — NavigationResourceDropdown interno che sfrutta useTabsList() per condividere lo stesso indicatore hover.
  • Mobile Sheet — Hamburger menu per viewport sotto il breakpoint desktop.
  • Section Mode — In scroll compatto con sezioni, la barra collassa a capsola e mostra le sezioni della pagina corrente.