FLIN App

Basic Breadcrumb

Simple text-based path showing the navigation trail.

Documentation Path

Multi-level path for nested documentation structure.

With Home Icon

Replace "Home" text with a home icon for a compact root link.

E-commerce Path

Product category navigation for online stores.

Settings Navigation

Nested settings pages with clear hierarchy.

Dashboard Path

Admin dashboard navigation with project context.

Usage

<Breadcrumb> <a href="/">Home</a> <a href="/products">Products</a> <span>Running Shoes</span></Breadcrumb><Breadcrumb> <a href="#"><Icon name="home" size="14" /></a> <a href="/users">Users</a> <span>Edit Profile</span></Breadcrumb>

Props

Prop	Type	Description
`children`	content	Links and a final span for the current page. Separators added automatically.

Breadcrumb

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Basic Breadcrumb

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Documentation Path

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } With Home Icon

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } E-commerce Path

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Settings Navigation

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Dashboard Path

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Usage

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Props