# Smart Breadcrumb

> The SmartBreadcrumb component is a modern, fully configurable breadcrumb navigation solution for React projects. It supports dynamic routes, optional icons using Lucide React, ellipsis handling for long paths, and customizable separators, making it ideal for dashboards, analytics pages, or complex web apps. Each breadcrumb item can be a clickable link or the current page indicator, and the component includes smooth hover transitions and a clean, responsive design. With props to control icon visibility, maximum visible items, separator style, and overall styling, SmartBreadcrumb provides a flexible, reusable, and visually appealing way to guide users through multi-level navigation paths.

- 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
- Live preview: https://21st.dev/@ruixen.ui/components/smart-breadcrumb

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/smart-breadcrumb?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