Flex Navbar

Icon navbar whose items spring open to reveal a tinted label on hover or focus while their neighbours flex aside.

accent

showActiveLabel

bounce0.35

iconSize20

Installation

npx shadcn@latest add @glint-ui/flex-navbar

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/flex-navbar.json

Usage

import { FlexNavbar } from "@/components/ui/flex-navbar";

<FlexNavbar
  items={[
    { label: "Home", icon: <House />, color: "#a78bfa" },
    { label: "Explore", icon: <Compass />, color: "#22d3ee" },
    { label: "Profile", icon: <User />, color: "#f472b6" },
  ]}
/>

Props

Prop	Type	Default	Description
items	ReactNode	—	Array of { label, icon, color?, onClick? }.
accent	string	"#a78bfa"	Accent for items without their own color.
showActiveLabel	boolean	true	Keep the active item open when nothing is hovered.
bounce	number	0.35	Spring bounce.
iconSize	number	20	Icon size in px.
defaultActive	number	0	Index of the initially active item.
onChange	ReactNode	—	Called with the new active index.
className	string	—	Extra classes for the root element.