Skip to content

Loaders · 50

Pulse Dots

Wave Physics

Spring Matrix

Profile Skeleton Loader

Buttons · 19

Follow Halo Drift Button

Interactive Hover Button

Relief Button

Jelly Button

Magnet

Shatter Halo Drift Button

Sparks Halo Drift Button

Shockwave Halo Drift Button

Gravity Halo Drift Button

Decode Halo Drift Button

Ripple Halo Drift Button

Calm Halo Drift Button

Thinking · 9

Hover · 1

Checkbox · 5

Diagonal Fill Checkbox

Prism Checkbox

Cross Morph Checkbox

Firework Todo Checkbox

Orbs · 16

Tooltips · 3

Switch · 3

Neumorphic LED Switch

Inputs · 3

Selectors · 2

Pagination · 2

Cards · 8

Brands · 2

Menu · 4

Accordion · 1

AI · 2

Range Sliders · 5

Precision Effort Slider

Pixel Effort Slider

Overdrive Effort Slider

Stepper · 1

Testimonials · 2

Breadcrumb · 1

Modal · 1

Unlock the full catalog

$24.99 /month

Get Starter

5.0 on Gumroad · 14 verified ratings

Already have an account? Log in

Morph Breadcrumb

A breadcrumb bar that reshapes instead of re-rendering: long trails fold into a more button that unfolds level by level, and a highlight glides between crumbs.

About this tool

A breadcrumb that morphs. Long trails fold their middle levels into a more button that unfolds them one after another; going up a level retracts the crumbs after it with a blur while the bar springs to its new width; going down grows the new crumb in from a blur; and a highlight glides from crumb to crumb under the pointer or keyboard focus. It is a labelled breadcrumb nav with aria-current on the page you are on, a more button that says how many levels it hides, arrow keys, Home and End to move between crumbs, Escape to fold the trail again, visible focus, 44 px targets and a plain swap under reduced motion. Levels, folding point, separator, home icon, container, colours and bounce are editable live, and the export is one HTML file with no dependencies.

In collections: Navigation Components: Tabs, Steppers & Menus Micro Interactions: UI Animation Examples

Guide: Feature Sections That Explain a Product: Grid, Tabs or Walkthrough? Tailwind Tooltip: Accessible CSS, Popover API and React

UI/UX · HTML / CSS / JS All tools

Layout

Scale %

Trail

Levels (comma separated)

Levels before folding

Separator

caret slash

Home as icon

on off

Current page mark

on off

Page heading

on off

Palette

Container

pill none

Bar

Bar border

Current page

Other levels

Highlight

Current page mark

Motion

Spring bounce

Preview

Autoplay

off loop

Stage

Stage colour

#ffffff

Shopping Cart

Your cart is empty. Add a product to see it here.

Price Amount $0.00

Products are unlocked right after checkout.