Pill Navbar
A modern floating navigation bar with glassmorphism design, customizable positioning, and call-to-action support
The Navbar will show on top of the page
Customization Examples
Clean bottom navigation without logo or CTA
Installation
npx shadcn@latest add https://hex-ui.com/r/pill-navbar.json
Props
| Prop | Type | Default | Description |
|---|---|---|---|
logo | React.ReactNode | string | - | Logo image URL, text, or React component |
links | NavLink[] | required | Array of navigation links |
position | "top" | "bottom" | "bottom" | Navigation bar position |
cta | CTAButton | - | Optional call-to-action button |
className | string | - | Additional CSS classes |