Component

FloatingNavBar

A transparent navigation bar that floats over scrolling content — the back button always shows, while the title and background fade in on scroll.

Details

jsx

import { MoreHorizontal } from 'lucide-react';

<FloatingNavBar
  title="Details"
  onBack={() => navigate(-1)}
  showTitle={scrolled}
  showNavBg={scrolled}
  right={
    <ButtonCircle aria-label="More">
      <MoreHorizontal size={18} />
    </ButtonCircle>
  }
/>

Props

Prop	Type	Default	Description
`title`	string	—	Centered title text.
`onBack`	() => void	—	Back button handler.
`showTitle`	boolean	false	Fade the title in (e.g. once the page is scrolled).
`showNavBg`	boolean	false	Fade in the blurred background and bottom border.
`right`	ReactNode	—	Content for the trailing slot.
`titleClassName`	string	'text-sm'	Extra classes for the title.