Floating Nav Bar

Custom

A floating segmented control that sits over content. Each segment is an independent on/off toggle used to show or hide a region of the layout — sidebar, board, or right panel. Active segments fill with the primary color.

@/components/ui/floating-nav-bar

Live demo — toggle the panels

Sidebar

Board

Click any segment — the matching panel shows or hides instantly. This is exactly how the bar works at the bottom of the app shell.

Item states

Active (on)

Inactive (off)

Mixed group

FloatingNavBar props

Prop	Type	Description
className	string	Extra classes on the floating container (e.g. positioning).
children	ReactNode	FloatingNavItem segments.

FloatingNavItem props

Prop	Type	Description
icon	LucideIcon	Optional leading icon.
active	boolean	Whether the segment is toggled on. Default: false
onClick	() => void	Fires on click — flip your state here.
children	ReactNode	Segment label.

On this page