Breadcrumbs
A parent layout needs to display the current nested path as navigation context.
Next.js 16+ · Hook
useSelectedLayoutSegments
A Client Component hook for reading active route segments below the layout where it is called. It returns an array and can optionally inspect a named parallel-route slot.
How it works
Call this Client Component hook from a layout to obtain the active route segments beneath that layout. It returns the segments one level down as an array, can target a parallel route slot with an optional key, and returns no items when no child segment is active.
Syntax
const segments = useSelectedLayoutSegments(parallelRouteKey?: string)Parameters
| Name | Type | Description |
|---|---|---|
parallelRouteKey | string | undefined | Optional name of the parallel route slot whose active segment should be read. |
Returns
An array of strings representing active route segments one level below the calling layout, or an empty array when none exist.
Key points
- Use it inside a Client Component to inspect active child route segments from a layout.
- The optional argument selects a named parallel-route slot.
- Its result is an array containing active segments immediately below the calling layout.
- No active child segment produces an empty array.
- Static routes and routes with generateStaticParams can resolve this hook during prerendering without Suspense.
Common mistakes
- With Cache Components enabled, dynamic segments may suspend during prerendering; wrap the hook's component or an ancestor in Suspense when required.
- A route whose active segments are not known during prerendering needs a Suspense fallback; otherwise the build fails.
Example: Render active child segments
'use client'
import { useSelectedLayoutSegments } from 'next/navigation'
export default function Breadcrumbs() {
const segments = useSelectedLayoutSegments()
return (
<nav aria-label="Breadcrumb">
{segments.map((segment, index) => (
<span key={`${segment}-${index}`}>
{index > 0 && ' / '}{segment}
</span>
))}
</nav>
)
}This Client Component reads the active segments below its layout and renders them as a simple breadcrumb trail.
When to use it
Route-aware layout UI
A layout renders controls whose state depends on which child route is active.
Parallel-route awareness
A layout needs to inspect navigation state inside a named slot.
Interview questions
QWhat does useSelectedLayoutSegments return?
It is a Client Component hook that reads the active route segments below the layout where it runs. The result is an array of strings, or an empty array when no such segments exist.
Follow-up: How would you inspect a named parallel route? Pass its parallel route key as the optional argument, such as useSelectedLayoutSegments('auth').
QWhy would you pass a parallel route key?
The hook accepts an optional parallelRouteKey parameter. Supplying it reads the active segment within that parallel-route slot instead of the default route context.
Follow-up: What rendering concern can arise with cacheComponents? The hook may suspend when active segments cannot be resolved during prerendering, so a Suspense boundary may be needed.
QWhy is this hook useful in a layout?
It must run in a Client Component, making it suitable for layout-based client UI such as breadcrumbs that depends on active child routes. A layout itself cannot directly access the route segments below it.
Follow-up: When is Suspense unnecessary? Static routes and routes using generateStaticParams can resolve their segments during prerendering, so no boundary is required for this hook.
Related
useSelectedLayoutSegmentusePathnamegenerateStaticParamsSuspenseparallelRouteKey