Section 1
Welcome to the page-scroll navigation demo, where smooth anchored jumps turn a long page into an effortless, continuous journey. The dotted menu fixed to the side of the viewport tracks your position as you scroll, highlighting the active section in real time so visitors always know exactly where they are in the story. Each menu dot expands on hover to reveal its descriptive label, keeping the overall layout clean and uncluttered while staying instantly readable when you need it. Click any item and the page glides to the matching section using a configurable easing curve, with an adjustable offset that accounts for any sticky header sitting at the top. This pattern is ideal for one-page portfolios, product launches, marketing landing pages, and storytelling layouts that benefit from a single, uninterrupted narrative. Because every section shares one URL with hash fragments, links remain shareable and bookmarkable, and the browser back button behaves exactly as users expect it to. Built entirely with native Canvas components, the scroll menu requires no extra plugins and inherits your chosen theme color automatically. You can position it on the left or right, switch freely between dotted and labelled styles, and fine-tune the animation speed to match your brand. The result is a navigation experience that feels modern, intuitive, and genuinely polished across desktop and mobile screens alike.
Section 2
Scroll-driven page menus solve a common problem for long pages: keeping orientation simple without forcing visitors to hunt for a traditional top navigation bar. As the reader moves steadily down the page, the active section indicator updates automatically, giving constant visual feedback about progress through the content. The menu sits unobtrusively against the very edge of the viewport, expanding only when it is hovered so it never competes with the rest of your design. Smooth scrolling replaces abrupt jumps, and the easing option lets you choose anything from a gentle, gradual slide to a snappy, energetic transition. An offset value keeps target headings clear of any fixed header, so anchored sections always land in a comfortable, readable position on screen. This approach pairs beautifully with full-height hero blocks, feature grids, pricing tables, testimonials, and call-to-action panels arranged in a logical sequence. Everything is responsive by default, collapsing gracefully on smaller devices where a compact trigger icon quietly takes over. Because it is part of the Canvas framework, the component integrates seamlessly with everything else, sharing typography, spacing, and color tokens for a consistent look throughout. Setting it up takes only a data attribute or two, leaving you free to focus on writing great content rather than wiring up scripts.
Section 3
A one-page layout works best when wayfinding stays quietly invisible until the visitor actually needs it, and that is exactly what this scroll menu is designed to deliver. The dotted indicator gently mirrors your scroll position, brightening the dot for whichever section currently fills the screen so your place is never in question. Hovering expands the entire menu to show clear, descriptive labels, then it collapses smoothly again to preserve your carefully minimalist aesthetic. Selecting an item animates the page to the right anchor with a customizable easing function and a header-aware offset, so nothing important ever ends up hidden behind a sticky bar. Designers love this pattern for in-depth case studies, agency showcases, event microsites, and app landing pages where forward momentum genuinely matters. Since the navigation lives inside the page itself, it loads instantly and adds no perceptible weight to the document at all. Canvas handles the heavy lifting, wiring the click handlers, the active-state tracking, and the smooth animation through clean, thoroughly documented markup. You control placement, style, and timing without editing a single line of JavaScript, and the menu respects your theme color straight out of the box. The outcome is a refined, distraction-free way to move through content that keeps readers engaged from the first section all the way to the last.
Section 3
Smooth page scrolling transforms a dense single-page document into a guided, enjoyable tour, and the side menu is the steady compass that keeps everyone on course. Each anchor link is tied directly to a section, and as you scroll the corresponding indicator activates so the reader's exact place is never in doubt for a moment. The compact dotted form keeps the interface tidy and discreet, while a simple hover reveals the full set of labels for quick navigation between any two points on the page. Clicking glides the viewport to the chosen section with adjustable easing and a precise offset that clears fixed headers cleanly every time. This is a natural fit for product features, onboarding flows, marketing stories, and portfolios that gradually unfold as one continuous, scrolling experience. Because it is native to Canvas, the menu shares the framework's responsive grid, spacing scale, and color system for a truly seamless, integrated result. Implementation is refreshingly simple, relying on data attributes rather than custom code, which makes ongoing maintenance painless for any future edits you might need. You can flip the menu to the left or right edge, choose dotted or labelled styling, and tune the scroll speed precisely to taste. The finished effect is elegant and dependable, giving visitors a smooth, confident path through every single section of your page.
Section 4
Anchored navigation paired with smooth scrolling is the dependable backbone of any great one-page site, and this demo shows the technique working at its very best. The fixed menu observes your scroll position continuously, lighting up the dot that matches the section currently in view so orientation feels completely effortless. In its resting state the menu is just a slim column of dots; hover over it and the labels slide neatly into view, then tuck away again to keep the design uncluttered. A single click animates the page to the selected anchor using your chosen easing curve and a configurable offset that allows for sticky headers. Use it for feature tours, restaurant menus, conference schedules, photo essays, or any layout that reads naturally from top to bottom. The component is fully responsive, swapping to a tidy trigger button on phones where every pixel of screen space is precious. As part of the Canvas framework it inherits your fonts, colors, and spacing automatically, so it always looks like it genuinely belongs. Configuration is handled entirely through clean attributes, meaning you rarely need to touch a line of script to get exactly the behavior you want. The end result is a navigation system that feels both effortless and intentional, guiding readers smoothly through the whole story from start to finish.
Section 5
Page-scroll menus give long-form layouts a genuine sense of structure that visitors can feel intuitively rather than have to read about. As content rolls past, the active section indicator follows steadily along, providing quiet reassurance about how far the reader has come and how much still remains ahead. The dotted style keeps the menu discreet and out of the way, expanding on hover to surface section names and then shrinking back to protect your clean, considered composition. Each link triggers a smooth animated scroll to its anchor, complete with adjustable easing and a precise offset tuned to your particular header height. This makes it perfect for marketing landing pages, single-scroll resumes, product showcases, and editorial features arranged as one flowing narrative. Everything adapts to smaller screens automatically, collapsing into a compact toggle so mobile users keep full access to every section without any clutter. Because the menu is a true Canvas component, it draws on the framework's shared styles for consistent typography, spacing, and theme color throughout. You configure placement and behavior with simple data attributes, sidestepping the need for any bespoke scripting entirely. The payoff is a confident, polished navigation experience that helps readers stay oriented and engaged from the opening section right through to the final call to action.
Section 6
Great one-page design depends on letting people move around freely without ever once losing their place, and that is precisely the promise of this scroll navigation. The side menu watches the viewport closely and highlights the indicator for whatever section is currently on screen, updating live and instantly as the reader scrolls. Its dotted resting state stays politely out of the way, then expands on hover to reveal clear, readable labels before collapsing again to keep everything minimal. Clicking any entry animates the page smoothly to the matching anchor, with easing and offset options that carefully respect sticky headers and overall reading comfort. Designers reach for this pattern on agency sites, app launches, event pages, and storytelling layouts that genuinely reward a long, continuous scroll. The whole system is responsive by nature, folding into a neat trigger icon on mobile so smaller screens stay clean, focused, and usable. As a Canvas component it automatically matches your theme color, fonts, and spacing for a unified, cohesive appearance across the board. You set it up with just a couple of attributes instead of hand-written scripts, which keeps the build fast and the maintenance pleasantly light. The result is a smooth, reliable way to navigate a long page that feels thoroughly modern and keeps visitors comfortably in control.
Section 7
Section seven shows just how versatile a scrolling page menu can be when the content runs long, detailed, and varied. The active indicator keeps steady pace with your reading, so you always know which part of the page is currently in view and roughly how much further the story still goes. While it rests, the menu is nothing more than a slim, unobtrusive row of dots; a quick hover brings the descriptive labels forward, then they slip away again to keep the interface calm and genuinely uncluttered. Each entry triggers a smooth animated scroll straight to its anchor, with easing and offset settings you can adjust freely to suit any sticky header or particular design. This works wonderfully for product walkthroughs, service overviews, team pages, and long-form editorial features that read best as a single, continuous flow. The menu is responsive right from the start, collapsing neatly into a compact trigger on smaller screens so phones stay clean and effortless to use. Because it is woven directly into the Canvas framework, it picks up your theme color, fonts, and spacing automatically for a thoroughly unified feel. You configure the whole thing with simple data attributes rather than fiddly custom scripting, which keeps everything quick to build and painless to maintain later. The result is a smooth, dependable way to guide visitors through even the very longest of pages with real, lasting confidence.
Section 8
To wrap up the demo, this final section underlines exactly why smooth page scrolling has become such a staple of contemporary web design. The fixed dotted menu provides constant, gentle wayfinding, lighting the indicator for the section in view and updating instantly the moment the reader scrolls. It stays compact by default and only widens on hover to expose its labels, striking a thoughtful balance between clarity and true minimalism. Every link animates the page to its anchor with configurable easing and a header-aware offset, ensuring each section arrives in a comfortable, readable position. The technique suits portfolios, product pages, marketing stories, photo galleries, and any layout best experienced as one uninterrupted scroll. Responsiveness is built in from the ground up, so the menu collapses to a tidy toggle on phones without ever sacrificing access to a single section. Because it ships as part of Canvas, it inherits your theme color, typography, and spacing for a cohesive finish across the whole site. Configuration relies on straightforward data attributes rather than custom code, keeping the initial setup quick and any later edits genuinely painless. Taken together, these small touches create a navigation experience that is smooth, intuitive, and truly enjoyable, guiding visitors confidently from the very first section all the way down to the last.