useSelectedLayoutSegments

The useSelectedLayoutSegments hook allows you to read the lower segments from a layout – and is only available inside Client Components.

app/dashboard/layout.tsx
'use client';

// This component can *only* be used inside a layout
// file due to using `useSelectedLayoutSegments`
import { useSelectedLayoutSegments } from 'next/navigation';

export default function DashboardLayout({
  children, // will be a page or nested layout
}: {
  children: React.ReactNode,
}) {
  const selectedLayoutSegments = useSelectedLayoutSegments();

  return (
    <section>
      <ul>
        {selectedLayoutSegments.map((segment, index) => (
          <li key={index}>{segment}</li>
        ))}
      </ul>
      {children}
    </section>
  );
}

Examples

The returned value of useSelectedLayoutSegments is an array of the route segments one level down, for example with the path of /[username]/blog/[slug], you would get the following values if you navigated to /vercel/blog/nextjs-13:

LayoutSegments
app/layout.js['vercel', 'blog', 'nextjs-13']
app/[username]/layout.js['blog', 'nextjs-13']
app/[username]/blog/[slug]/layout.js['nextjs-13']