FloatingNav

A pill‑shaped navigation bar that floats at the top or bottom of the screen. It features rounded corners, a shadow, and requires an icon for each navigation item, making it ideal for modern, minimalist designs.

Use Cases

• Modern landing pages with clean, minimalist design
• Single-page apps with smooth scrolling sections
• Portfolio sites emphasizing visual design
• Apps where traditional navbar feels too heavy
• Mobile‑first designs with bottom navigation preference

Properties

variant

Visual style variant. Type: string. Options: light, dark, glass. Default: glass. Tip: Visual Impact – light: White background with subtle border; dark: Dark background with white text; glass: Translucent with backdrop blur (RECOMMENDED).

position

Screen position for floating navbar. Only 'top' or 'bottom' – always horizontally centered. Type: string. Options: bottom, top. Default: bottom. Tip: Recommendations – desktop: Use 'top' for standard desktop layouts; mobile‑first: Use 'bottom' for mobile‑first apps (easier thumb reach).

items

Navigation items. Each MUST have an icon (icon‑first design). Keep to 3‑5 for best visual appearance. Type: array (minItems: 2, maxItems: 6). Tip: Recommendations – item-count: 3‑5 items for clean pill shape; icons: REQUIRED on every item – floating nav is icon‑first; label-length: 1 word per label for compact appearance.

blur

Enable backdrop blur effect. Most impactful with variant='glass'. Type: boolean. Default: true.

showCartIcon

Show shopping cart icon with badge count (for e-commerce). Type: boolean. Default: false.

cartTargetPage

Target page slug for cart icon click. Defaults to 'shop'. Type: string.

customCss

Custom CSS for styling. Type: string.

Best Practices

• Limit to 3‑5 navigation items for clean pill shape
• EVERY item MUST have an icon — this is icon‑first navigation
• Use position='bottom' for mobile‑first apps, 'top' for desktop
• Use variant='glass' for premium blur effect (recommended)
• Keep labels short (1 word) for compact design
• Works best with single‑page anchor navigation or small multi‑page apps
• Add visibleToRoles on admin‑only items