FloatingMenu
A compact, inverted pill of destinations that floats over the page once the reader scrolls away from the header, with an optional Back to top button.
LayoutContainer renders it for the site; pass targetRef and position sticky to use it inside a scroll container.
Installation
Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.
Usage
Examples
Playground
Reveal Past Threshold
With Call To Action
Keyboard Reveal
API
10 props
Accessibility
A labelled navigation landmark that stays in the tab order while hidden; focusing it reveals it. The current link has aria-current="page". Reduced motion removes the slide and makes Back to top jump. On phones the links scroll inside the pill and Back to top collapses to its icon, so the page never overflows.
Related
LayoutContainerAsync server layout that composes theme context, navigation, a skip link, article content, footer, and host-provided structured data.BreadcrumbBreadcrumb renders hierarchical page trails for navigation context.5 examplesNavigationMenuNavigationMenu renders grouped site navigation with dropdown panels for categories, sections, and related destinations.2 examplesPaginationPagination renders blog-style previous/status/next navigation. Hovering or focusing the center status reveals direct page shortcuts.4 examplesScrollspyTrack the visible section and navigate a long document using anchor links.1 exampleStepperShow progress through a sequence of labelled steps.6 examples