Animated Pill Tabs
Segmented pill tabs with a sliding, springy background, ARIA tabs keyboard support and fading panels, shown on an analytics card. Pure CSS and vanilla JS.
Navigation
Menus and elements that help users move around a site or app.
23 component(s)
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.
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.
Checkout Stepper
Bootstrap 5 four-step checkout with cart, shipping, payment and review steps, a progress bar, per-step validation, Back/Continue buttons and a live order summary.
Vertical Tabs
Bootstrap 5 vertical nav-pills tabs styled as a settings panel with a dark sidebar, icons, fading content panes and a scrollable mobile tab strip.
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.
Horizontal Progress Stepper
Tailwind CSS horizontal stepper with numbered circles, animated connector lines, completed/current/upcoming states and Back/Continue controls.
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.
Transparent Navbar that Turns Solid on Scroll
Bootstrap 5 navbar that sits transparently over a gradient hero and becomes a solid, blurred bar with a shadow when the page scrolls.
Navbar with Centered Logo
Dark Tailwind CSS navbar with links split around a centered logo, animated underlines and an accessible slide-down mobile menu.
Navbar with Dropdown and Mobile Menu
Tailwind CSS navbar with an accessible dropdown, call-to-action buttons and a collapsible mobile menu.
Bootstrap Navbar with Search and Dropdown
Responsive Bootstrap 5 navbar with brand, dropdown menu, search form and user actions.
Responsive Navbar with Hamburger Menu
Accessible pure CSS navbar that collapses into a hamburger menu on small screens.