Breadcrumb

Free

Enhanced breadcrumb navigation with smooth animations, customizable separators, and improved accessibility. Perfect for showing hierarchical page location with visual clarity.

Installation

Install via CLI

npx @moontra/moonui-cli add breadcrumb

Usage

Examples

Basic Breadcrumb

Simple breadcrumb with home and current page

Variants & Sizes

Tune how loud the trail is: default for standalone page headers, muted when it sits above a large title that should win attention, ghost for dense toolbars. Size follows the heading it belongs to

With Icons

Anchor the trail with a recognisable root icon when the breadcrumb sits directly under a global header — users scan for the house before they read the labels

Custom Separator

Swap the chevron when the trail has to match an existing house style — pass the replacement as children, or as the icon prop when you want to set it once in a wrapper component

With Ellipsis

Collapse the middle of a deep hierarchy so the trail never wraps to a second line. The ellipsis is decorative on screen but announces "More pages" to screen readers

Responsive Breadcrumb

Hides middle items on mobile