Arrow Breadcrumbs
Chevron-shaped breadcrumb steps cut with CSS clip-path, with an interlocking layout, a color ramp toward the current page and a compact dark variant. No JavaScript.
Tag: navigation
Components tagged with "navigation".
15 component(s)
Full-Screen Overlay Mobile Menu
Hamburger button that opens a full-screen menu with a circular clip-path reveal, staggered serif links, focus trap and Escape to close, in pure CSS and vanilla JS.
Navbar with Sliding Active Indicator
Dark responsive navbar with a glowing underline that slides between links on hover, focus and click, built with CSS custom properties and vanilla JS.
Pagination with Page Jump
Bootstrap 5 pagination with smart ellipses, previous and next arrows, a page counter and a validated 'go to page' input.
Breadcrumb with Icons
Bootstrap 5 breadcrumbs with a home icon, icons per level and custom chevron, slash or dot dividers that collapse middle levels on mobile.
Bootstrap Mega Menu Dropdown
Full-width Bootstrap 5 mega menu with icon feature links, link columns and a gradient promo block, keyboard friendly and stacked on mobile.
Sidebar with Nested Collapsible Menu
Dark Bootstrap 5 sidebar with three-level collapsible menu groups, accordion behavior, active link highlight and an off-canvas panel on mobile.
Mobile Bottom Tab Bar
Fixed Tailwind CSS bottom tab bar with icons, labels, an active pill, an unread badge, safe-area padding and optional hide-on-scroll.
Slide-In Mobile Menu
Tailwind CSS off-canvas mobile menu that slides in from the left with a backdrop, focus trap, Escape to close and an expandable submenu.
Products Mega Menu
Tailwind CSS mega menu with two columns of product links, icons and descriptions, a featured promo card and full keyboard support.
Collapsible Dashboard Sidebar
Dark Tailwind CSS dashboard sidebar with icons, grouped sections, an unread badge and a button that collapses it to an icon rail with tooltips.
Multi-Column Footer
Dark Tailwind CSS website footer with brand block, social icons, four labelled link columns and a bottom bar with copyright and status.
Underline Tabs
Accessible Tailwind CSS tabs with a sliding underline indicator, arrow-key and Home/End navigation, count badge and scrollable tab bar on mobile.
Pagination with Results Info
Tailwind CSS pagination bar with Previous/Next, numbered pages with ellipsis, a per-page select and a live 'Showing 1 to 10 of 97 results' summary.
Rounded Pagination
Pill-shaped pagination with ellipsis, previous/next buttons and a gradient active page, made interactive with a few lines of vanilla JS.