W
Wasp•2mo ago
Sven

Custom landigpage and header/navbar

I want to implement a custom landingpage and navbar. I see different files with different files for the navbar, which to change? My new header file has the navbar in it, do i need to change that too? What are important points to consider taking with the new navbar.
2 Replies
kapa.ai
kapa.ai•2mo ago
Hi @Sven. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To implement a custom landing page and navbar in a Wasp app, here are the key points and best practices based on the knowledge sources: 1. Landing Page - The landing page is defined in your main.wasp file using a route and a page declaration. For example: 
  route RootRoute { path: "/", to: LandingPage }
  page LandingPage {
    component: import { LandingPage } from "@src/LandingPage"
  }
  
  route RootRoute { path: "/", to: LandingPage }
  page LandingPage {
    component: import { LandingPage } from "@src/LandingPage"
  }
You then implement the LandingPage React component in your src directory (e.g., src/LandingPage.jsx or .tsx) Docs: Pages & Routes. 2. Navbar/Header - The navbar is typically implemented as a React component (e.g., TopNavbar.jsx or Header.jsx). You can include it in your layout or directly in your page components. - If you want the navbar to appear on all (or most) pages, the recommended approach is to use a root layout component. You can specify this in your main.wasp file under the client field: 
  app MyApp {
    title: "My app",
    client: {
      rootComponent: import Root from "@src/Root.jsx"
    }
  }
  
  app MyApp {
    title: "My app",
    client: {
      rootComponent: import Root from "@src/Root.jsx"
    }
  }
In src/Root.jsx, you can import and use your custom navbar: 
  import MyNavbar from './MyNavbar'

  export default function Root({ children }) {
    return (
      <div>
        <MyNavbar />
        {children}
      </div>
    )
  }
  
  import MyNavbar from './MyNavbar'

  export default function Root({ children }) {
    return (
      <div>
        <MyNavbar />
        {children}
      </div>
    )
  }
This ensures your navbar is rendered on every page Docs: Client Config. 3. Which Navbar File to Change? - If you see multiple navbar/header files, check which one is actually imported and used in your layout or page components. For example, in the Thoughts example app, the Layout.jsx uses TopNavbar.jsx Discord: Navbar Example. - If you want to replace the navbar everywhere, update the component used in your root layout (e.g., Root.jsx or Layout.jsx). If you only want to change it for specific pages, update those page components directly. 4. Important Points for a Custom Navbar - User Authentication: If you want to show different navbar items based on whether the user is logged in, you can use the useAuth hook in your navbar component to get the current user and conditionally render items Docs: useAuth. - Consistency: Use a root layout to avoid duplicating navbar code across pages. - Props: If your pages require user info, and you have authRequired: true set in your page declaration, the user will be passed as a prop to the page component. 5. Example Structure - src/Root.jsx (or Layout.jsx): Wraps all pages, includes your navbar. - src/MyNavbar.jsx: Your custom navbar implementation. - main.wasp: References the root component and landing page. If you have a new header file with the navbar, make sure it is the one imported and used in your root layout or the relevant pages. You do not need to change every navbar file—just the one(s) actually used in your app's structure. If you need to see a working example, check out the Thoughts example app's Layout and TopNavbar for reference. If you have a more specific file structure or use case, feel free to share more details! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Sven, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?
NEROX
NEROX•2mo ago
hey, what are you using? the opensaas template?

Did you find this page helpful?