One Page Navigation
Matrix Framework includes a One Page navigation feature that allows you to enable a single-page menu. With this option, the first-level navigation items automatically scroll to their corresponding anchor sections within the page, instead of opening new pages.
Sub-pages will continue to work as usual - you can create additional pages, which will be displayed as dropdown menu items under the main navigation.
How to activate
To enable the One Page navigation, update your configuration file by setting the following option: onePage: true
Make sure you have uploaded the one-page-scroll.matrix.js file to your project directory. This script is required for the One Page navigation to work correctly.
onePage: true, // One-page scroll navigationAdding Anchor Sections
To define the sections for One Page navigation, use the Widget/Html module. Within each section of your page, manually add an anchor with the corresponding name (ID).
<div class="cc-section" id="home">
<span>Home</span>
</div><div class="cc-section" id="about-1">
<span>About</span>
</div><div class="cc-section" id="contact">
<span>Contact</span>
</div>You can also use the Helper Classes module, where you’ll find preset anchor section code ready to use. This provides 4 preset sections if you don’t want to create each section manually.
Navigating in Admin Mode
Once One Page navigation is active, the main menu will be disabled and will not allow you to switch between different pages.
To access other pages while working in Admin Mode, use the mobile navigation:
- Click the hamburger menu icon.
- Select the desired page from the dropdown list.
If you have encountered any bugs, errors, or unexpected behavior, please leave a comment below.