Divjoy Docs
  • Divjoy Home
🙅‍♂️

Hide Navbar and Footer on some pages

This guide shows you how to control which pages your Navbar and Footer components show up on. This can be useful if you want your marketing pages to have a different layout than the rest of your app.

🗣
Keep in mind that your code may look slightly different then the examples below, depending on your Divjoy export options. The main structure, variables, and function names should be the same though.

The simplest way to do this is to move those components from your layout component (src/pages/_app.js) into each page you want them to be displayed on. Here's what that would look like, both in code and within the Divjoy editor.

Code

  1. Remove the Navbar component from src/pages/_app.js
image

2. Add the Navbar component to all pages where you'd like it displayed

Note: You'll need to wrap your components with a React fragment (<> ... </>) if not already there
Note: You'll need to wrap your components with a React fragment (<> ... </>) if not already there

3. Repeat for Footer or any other elements in your layout component that you'd like.

Divjoy Editor

image

In the Divjoy editor any component that's not under a page is part of the layout and will be displayed on all pages.

The animation on the left shows us moving Navbar from the layout into / (the homepage). We then clone the component and drag the new instance into /about. We'd repeat that process for each page we want to add the Navbar to.

This would result in the exact same code that you see in the code example above.

But wait, now the props on Footer are duplicated across all Footer instances 😕

If you don't like how every instance of Footer has to specify values like color or logo, then simply remove those props and hardcode those values inside the Footer component. For example, if the Footer on every page has the same logo (which is likely) then you can just hardcode that path inside Footer. You may still want to keep color as a prop if you'd like each page to be able to control the color of its Footer. It's your code, tweak it as needed.

🗣
Did you find this guide helpful? Anything confusing? Please reach out and let us know.