Search by

erdmannfreunde / onepage-navigation

erdmannfreunde

This extension for Contao CMS adds a new type of navigation to create onepage navigations that are scrolled automatically.

Package info

github.com/erdmannfreunde/contao-onepage-navigation

Homepage

Issues

Language:JavaScript

Type:contao-bundle

pkg:composer/erdmannfreunde/onepage-navigation

Security

Advisories: 0

Aikido package health analysis

Transparency log

Statistics

Installs: 27 663

Dependents: 2

Suggesters: 0

Stars: 6

2.3.2 2026-10-21 11:10 UTC

Requires

Requires (Dev)

Suggests

None

Provides

None

Conflicts

None

Replaces

LGPL-3.0-or-later 5e7deee50bb616e2f07c25fe2ee22d495bbc71bf

navigationarticlecontaoonepageonepage navigation

Published on Packagist.org on 2026-10-21 11:11 UTC

This package is auto-updated.

Last update: 2026-10-21 11:12:46 UTC

README

Function

This extension for Contao Open Source CMS allows you to create a article navigation that can be used to build onepage navigations. It can be used just like a normal navigation but scrolls smoothly between the links within a page automatically rather than redirecting to another page.

Usage

  • Each article has a new area where the onepage navigation settings can be edited
  • Each article can be activated to be a navigation item
  • a new frontend module needs to be created (type: 'Article navigation (Onepage)')
  • place the module on the page (layout or as content element)
  • activate js_onepage_navigation.html5 in your site layout

InsertTags

  • {{scroll::[article-id]::[myCustomLinkTitle]}}
    • [article-id] = article id this link should scroll to
    • [myCustomLinkTitle] = text to be displayed as the link
    • Example: {{scroll::contact::Email us}}

Accessibility

  • Enable Add skip link in the module to render a "Skip navigation" link before the list, just like the core navigation module. It is visually hidden until it receives keyboard focus, so your theme has to style a.invisible:focus-visible. The option is disabled by default, because themes that style every link in the navigation (e.g. position: relative) would otherwise show the hidden link.
  • Use the field ARIA label to name the navigation landmark (e.g. "Main navigation"), especially if the page contains more than one <nav>.
  • After a jump, the target article receives the focus (tabindex="-1" is added if necessary), so keyboard and screen reader users continue reading there.
  • The active item gets aria-current="location" in addition to the active class.
  • Smooth scrolling is disabled when the visitor prefers reduced motion.