#Layouts

1 messages · Page 1 of 1 (latest)

ancient vesselBOT
#

Hi @lethal ginkgo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Yes, it's perfectly fine to have different navigation bars for different layouts in your Next.js application. You can achieve this by using Route Groups, which allow you to have different layouts for different pages. This is especially useful if you need a specific navigation bar in some of the pages, and not in others.

Here's how you can do it:

  1. Remove the main Navbar from the RootLayout. The RootLayout should only contain the <html> and <body> tags as per the Next.js documentation (https://nextjs.org/docs/app/api-reference/file-conventions/layout#root-layouts).

  2. Create different layout files for different groups of pages. Each layout file can contain its own Navbar. For example, you can have a DashboardLayout.js for your dashboard-related pages and a EventLayout.js for your event-related pages. Each of these layout files can have its own Navbar.

Here's an example of how you can define a layout:

export default function DashboardLayout({
  children, // will be a page or nested layout
}: {
  children: React.ReactNode
}) {
  return (
    <section>
      {/* Include shared UI here e.g. a header or sidebar */}
      <nav></nav>
 
      {children}
    </section>
  )
}
  1. Group your routes and assign the appropriate layout to each group. You can use the Route Groups feature (https://nextjs.org/docs/app/building-your-application/routing/route-groups) of Next.js to do this.

Remember, navigating across multiple root layouts will cause a full page load. This only applies to multiple root layouts. If you navigate between pages that use the same layout, it will not cause a full page load.

Also, passing data between a parent layout and its children is not possible. However, you can fetch the same data in a route more than once, and React will automatically dedupe the requests without affecting performance.