Bottom Sheet Mobile Menu
Dark mobile app menu that slides up from the bottom as a rounded sheet with a drag handle, quick action tiles, scrim, focus trap and swipe to close.
Tag: navigation
Components tagged with "navigation".
21 component(s)
Scrollable Tabs for Mobile
Bootstrap 5 tabs that scroll horizontally on small screens, with fade edges, arrow buttons, scroll snapping and the active tab centered automatically.
Bottom Navigation Bar with Badges
Fixed Bootstrap 5 mobile bottom navigation with icons, labels, notification badges, a 9+ overflow badge and a floating pill on desktop.
Link Underline Effects
Six animated link underline styles in pure CSS (slide, center, highlighter, ink fill, line swap and wave) that also work on links that wrap.
Bottom Navigation with Center Action Button
Pure CSS mobile tab bar with a curved notch, a raised gradient center button and three quick actions that fan out when it is tapped.
Icon Sidebar that Expands on Hover
Pure CSS icon rail that widens to reveal labels, section headings and a profile on hover or keyboard focus, with an active link and badge.
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.
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.