Navbar visibility issue
2025-11-052 turns3,746 charsgpt-5
Summary
User wants to conditionally hide Navbar on dynamic route /article/[slug] in Next.js App Router.
Messages
Hey everyone,
,i mbegineer in next,I’m working on a Next.js project using the App Router.
In my app/layout.js, I’ve included a <Navbar /> so it shows on all pages. But now I have a dynamic route /article/[slug], and I don’t want the Navbar to appear there.
I tried creating a separate layout.js inside the /article folder hoping it would override the root layout, but the Navbar still shows.
I also attempted to use route groups like (no-navbar) but couldn’t get it to work as expected.
root layout==
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
<SessionWrapper>
<Navbar/>
{children}
</SessionWrapper>
</body>
</html>
);
}export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
<SessionWrapper>
<Navbar/>
{children}
</SessionWrapper>
</body>
</html>
);
}
article layout.js
export default function ArticleLayout({ children }) {
return (
<>
{children}
</>
);
}export default function ArticleLayout({ children }) {
return (
<>
{children}
</>
);
}
wht have to do
You’re **very close**, but here’s the key point:
✅ **Layouts in App Router are nested, not replaced.**
So your `/article/layout.js` **does NOT override** the root `layout.js` — it gets rendered *inside* it.
That’s why your `<Navbar />` still shows.
---
# ✅ **Correct Solutions**
## ✅ **✅ Option 1 — Move Navbar into a route-group layout**
Instead of putting `<Navbar />` in the root layout directly, create a route group that contains all pages that need the navbar.
### Folder Structure
```
app/
(with-navbar)/
layout.js
page.js
article/
[slug]/
page.js
layout.js
```
### Root `app/layout.js`
Keep it clean:
```jsx
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
```
### `app/(with-navbar)/layout.js`
Put your navbar here:
```jsx
import Navbar from "@/components/Navbar";
export default function WithNavbarLayout({ children }) {
return (
<>
<Navbar />
{children}
</>
);
}
```
✅ Now every page in `(with-navbar)` shows the navbar.
✅ `/article/[slug]` will NOT show it.
---
## ✅ **Option 2 — Conditional check inside root layout**
If you want the navbar only missing on `/article/[slug]`, you can check the path with `usePathname()`.
> ⚠️ Only works in a **client component**
### Root Layout
```jsx
"use client";
import { usePathname } from "next/navigation";
import Navbar from "@/components/Navbar";
export default function RootLayout({ children }) {
const pathname = usePathname();
const hideNavbar = pathname.startsWith("/article/");
return (
<html lang="en">
<body>
{!hideNavbar && <Navbar />}
{children}
</body>
</html>
);
}
```
✅ `/article/[slug]` hides navbar
✅ Everything else shows it
⚠️ Layout becomes client-side
---
## ✅ **Best Way (Recommended)**
➡️ **Option 1: Route groups**
This keeps your layout structure clean and avoids making `layout.js` a client component.
---
# ✅ Why your attempt failed
> You added `article/layout.js` but layouts are nested, not replaced.
So the tree becomes:
```
Root layout
┗ Article layout
┗ Page
```
Thus Navbar still renders.
---
# TL;DR
✔ Layouts **nest**
✔ Put Navbar into a route-group layout
✔ Pages outside that group won’t get Navbar
---
If you want, I can rewrite your folder structure cleanly with your actual component names—just tell me!
gpt-5