# Floating Nav

> This is a responsive floating bottom navigation bar built with React and Framer Motion. It displays multiple menu items with icons and labels, adapting to screen size by showing icons only on small screens and icons with labels on larger screens. A sliding indicator smoothly animates under the active item, always staying aligned, providing clear visual feedback for the selected section. The design is modern, minimal, and works seamlessly in both light and dark themes.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: lucide-react, framer-motion
- Live preview: https://21st.dev/@ruixen.ui/components/floating-nav

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/floating-nav?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt