Shared Navigation

Part of the Next.js Essentials section of Coddy's React journey — lesson 12 of 47.

A navigation bar is the classic thing to put in a layout: written once, present on every route, never re-mounted.

// app/layout.jsx
import Link from 'next/link';

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                <nav>
                    <Link href="/">Home</Link>
                </nav>
                {children}
            </body>
        </html>
    );
}

Note where {children} sits: after the nav. Anything you put before it appears above the page, anything after it appears below. The layout is just JSX. The only rule is that {children} has to be in there somewhere.

Now the layout is your file, not a locked one. Add the nav, then watch it stay put as the page changes underneath it.

Challenge

Easy

Give Coddy Eats a nav bar that lives on every page.

In app/layout.jsx, inside <body> and above {children}, add:

A <nav> with id="nav"
Inside it, a <Link> to / with id="home-link" and the text Home
And a <Link> to /menu with id="menu-link" and the text Menu

The pages are locked: you only touch the layout. The tests visit /menu afterwards and check the nav is still on screen.

Try it yourself

import './globals.css';
import Link from 'next/link';

export const metadata = {
    title: 'Coddy Eats',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}