grapesjs-navbar - how to navigate to different tab on canvas ? #6370
Unanswered
chetan-bbc
asked this question in
Q&A
Replies: 1 comment
-
|
So if I understand correctly, you can use Recording.2025-01-22.042849.mp4<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GrapesJS Navbar Navigation</title>
<!-- Include GrapesJS CSS -->
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet" />
<style>
body,
html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#gjs {
height: 100vh;
}
.navbar {
padding: 10px;
background: #f0f0f0;
display: flex;
gap: 10px;
}
.navbar-link {
color: #333;
text-decoration: none;
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.navbar-link:hover {
background: #ddd;
}
</style>
<script src="https://unpkg.com/grapesjs"></script>
</head>
<body>
<nav class="navbar">
<a href="#" class="navbar-link" data-page="home">Home</a>
<a href="#" class="navbar-link" data-page="about">About</a>
<a href="#" class="navbar-link" data-page="contact">Contact</a>
</nav>
<div id="gjs"></div>
<script>
const editor = grapesjs.init({
container: '#gjs',
storageManager: false, // Disable storage for simplicity
});
// Define page data for navigation
const pages = {
home: {
components: '<div style="padding: 20px;">Welcome to the Home Page!</div>',
},
about: {
components: '<div style="padding: 20px;">This is the About Page.</div>',
},
contact: {
components: '<div style="padding: 20px;">Contact us at support@example.com.</div>',
},
};
// Function to handle navigation
function navigateToPage(pageId) {
const pageData = pages[pageId];
if (pageData) {
editor.setComponents(pageData.components); // Update canvas content
console.log(`Navigated to ${pageId} page`);
} else {
console.error(`Page "${pageId}" not found`);
}
}
// Attach click event listeners to navbar links
document.addEventListener('click', (event) => {
if (event.target.matches('.navbar-link')) {
event.preventDefault(); // Prevent default link behavior
const pageId = event.target.getAttribute('data-page');
navigateToPage(pageId);
}
});
// Load the home page by default
navigateToPage('home');
</script>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hi,
We are using
grapesjs-navbarin order to navigate to different pages.We still don't have the domain ready so we would like to test the navigation on the canvas directly. Like how we can handle the button click.
how do we navigate to different page/projectData on canvas when user click on the nav bar link ?
Thank for your help in advance.
Beta Was this translation helpful? Give feedback.
All reactions