# nav

Featured UI Elements⚛ TSX Live preview

Hamburger → Close Morph

Three gradient bars that spring into an X with rotation — the classic menu toggle, pure CSS.

5.2k37.4k8.9kOpen

Animations⚛ TSX Live preview

Orbiting Ring Menu

Eight nav pills orbit a glowing core on a circular path — counter-rotation keeps labels upright; hover pauses.

30100Open

Gradient stepper progress nav

4-step wizard indicator: numbered nodes light up with gradient borders as the fill bar advances.

32800Open

HTMLCSSJavaScriptModerate

Components Live preview

Numbered pagination with underline sweep

Monospace page numbers with a gradient underline that sweeps in on hover and active state dot.

24600Open

Hamburger to X morph button

Three gradient bars morph into an X with a springy cubic-bezier when toggled — the classic nav button.

35400Open

Sliding underline tabs

Gradient underline springs between tabs with width+left animation; output line reflects the active tab.

31800Open

Components Live preview

Breadcrumb with chevron separators

Simple accessible breadcrumb trail: dim ancestors with cyan hover, fuchsia chevrons, bold current page.

HTMLCSSSimple

21400Open

Components Live preview

Underline sweep nav links

Gradient underline grows from the left on hover while the label brightens — one-pseudo-element nav polish.

HTMLCSSSimple

28900Open

Tabbed Content Panel

Animated tab panel with sliding indicator and fade-in content transitions.

UI Elements Live preview

Breadcrumb Dots

Trailing breadcrumb with collapse-to-dots and expand on hover.

HTMLCSSSimple

UI Elements⚛ TSX Live preview

Breadcrumb Toggle

Breadcrumb that collapses to a button on small screens.

UI Elements⚛ TSX Live preview

Breadcrumb Trail with Dots

Breadcrumb path with chevrons, home icon and collapse-to-dots overflow.

UI Elements⚛ TSX Live preview

Pagination Ellipsis Pager

Pager with first/last, ellipsis compression and active page glow.