Navigations

14 snippets

Welcome to the Navigations resource page — a curated directory for developers. Browse practical UI patterns, specialized libraries, and small interactive demos. Use the table of contents to explore subcategories below.

javascript-navigations

Snippets(14)

Kinetic Arc Jump Pagination
A kinetic arc jump pagination built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Technologies
HTML, CSS, JavaScript
Difficulty
Advanced
Browser support
Chrome 60+, Edge 79+, Firefox 60+, Safari 11+
Features
Physics Simulation, Custom Easing, Dynamic Calculation, SVG Manipulation
Scrolleable Wheel Items with JavaScript
A scrolleable wheel items with javascript built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Vertical Full-Screen Slider with 4 Controls
A vertical full-screen slider with 4 controls built with modern frontend techniques for responsive and reusable UI.
Content Slider Carousel Frontend Ui Modern Design+1 more
Demo Code
Navigation Button Interaction
A navigation button interaction built with modern frontend techniques for responsive and reusable UI.
Call To Action Frontend Ui Modern Design Ui Controls+2 more
Demo Code
Stacked Card Pull-Down Navigation
A stacked card pull-down navigation built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Content Card Card Component+1 more
Demo Code
Technologies
HTML, CSS, JavaScript
Difficulty
Intermediate
Browser support
Chrome 86+, Edge 86+, Firefox 85+, Safari 14+
Features
Card Deck UI, Staggered Animation, Dark Mode
Interactive Sidebar Tree Navigation
A interactive sidebar tree navigation built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Technologies
HTML, CSS, Babel
Difficulty
Advanced
Browser support
Chrome 80+, Edge 80+, Firefox 75+, Safari 13.1+
Features
Keyboard Navigation, Real-time Search Filter, Smooth Grid Animation
Expanding Split-Screen Grid Navigation
A expanding split-screen grid navigation built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Technologies
Pug, SCSS, JavaScript
Difficulty
Intermediate
Browser support
Chrome 45+, Edge 15+, Firefox 35+, Safari 9+
Features
Responsive Grid, Staggered Animation, Hover Preview, Tabbed Content
Magnifying Glass Navigation
A magnifying glass navigation built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Technologies
HTML, CSS, JavaScript
Difficulty
Intermediate
Browser support
Chrome 55+, Edge 79+, Firefox 54+, Safari 10+
Features
Clip-Path Animation, Neumorphism, State Management
3D Tilt Mobile Navigation
A 3d tilt mobile navigation built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+1 more
Demo Code
Technologies
HTML, SCSS, JavaScript
Difficulty
Intermediate
Browser support
Chrome 86+, Edge 86+, Firefox 85+, Safari 15.4+
Features
3D Perspective, SVG Morphing, Micro-interactions, Reflow Triggering
Responsive
Yes
Interactive Vertical Parallax Cursor Navigation
A interactive vertical parallax cursor navigation built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
HTML, CSS, JavaScript
Difficulty
Intermediate
Browser support
Chrome 80+, Edge 80+, Firefox 75+, Safari 13.1+
Features
Cursor Image Tracking, Vertical Panning, WAAPI Animation, Fluid Typography
Responsive
Yes
Mission Control Grid Exposé
A mission control grid exposé built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+1 more
Demo Code
Technologies
HTML, CSS, Babel
Difficulty
Advanced
Browser support
Chrome 114+, Edge 114+, Safari 17+, Firefox 125+
Features
Grid Exposé, Popover State, Dynamic Routing
Responsive
Yes
Dynamic Active Table of Contents
A dynamic active table of contents built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
JavaScript, CSS, HTML
Features
Scroll-spy, Dynamic highlighting, Automatic section tracking
Responsive
Yes
Scroll-Snap Grid Navigation with Intersection Observer
A scroll-snap grid navigation with intersection observer built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Html Frontend Ui+2 more
Demo Code
Technologies
Intersection Observer API, CSS Scroll Snap, Container Queries
Difficulty
intermediate
Features
Keyboard Navigation, Snap-to-grid, Responsive Typography
Responsive
Yes
Sticky Observer Navigation
A sticky observer navigation built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
HTML, SCSS, JavaScript
Difficulty
Intermediate
Browser support
Chrome 51+, Edge 15+, Firefox 55+, Safari 12.1+
Features
Scroll Detection, Smooth Transitions, Performance Optimized, Responsive Nav
Responsive
Yes

Snippets(14)

related hubs