Mark the active child tab
Parent layout navigation
Next.js 16+ · Hook
useSelectedLayoutSegment
A Client Component hook that reads the active route segment one level below the layout where it is called. Use it for route-aware navigation and optionally target a named parallel-route slot.
How it works
This Client Component hook reads the active route segment immediately below the layout where it runs. It can inspect a named parallel-route slot, returns the segment as a string or null when absent, and combines catch-all matches into one string.
Syntax
const segment = useSelectedLayoutSegment(parallelRouteKey?: string)Parameters
| Name | Type | Description |
|---|---|---|
parallelRouteKey | string | Optional name of the parallel-route slot whose active segment should be read. |
Returns
A string containing the active segment, or null if no active segment exists. For catch-all routes, matched segments are returned as one joined string.
Key points
- Use it inside a Client Component to identify the active child route beneath the current layout.
- A common use is styling tabs or links according to which child route is currently selected.
- Call the hook without arguments when reading the default route branch under the layout.
- Pass a slot key when the segment should be read from a named parallel route.
- The value is either the active segment name or null when the layout has no active child segment.
Common mistakes
- It does not return every active segment; use useSelectedLayoutSegments when navigation needs the complete descendant path.
- A catch-all route does not produce one value per path component; its matched components arrive joined in one returned string.
- The component that calls it must be a Client Component, so add the 'use client' directive at the top of that module.
Example: Highlight the active child route
'use client'
import { useSelectedLayoutSegment } from 'next/navigation'
export default function NavTabs() {
const segment = useSelectedLayoutSegment()
return (
<nav aria-label="Sections">
{['overview', 'settings'].map((slug) => (
<a
key={slug}
href={`/${slug}`}
aria-current={segment === slug ? 'page' : undefined}
>
{slug}
</a>
))}
</nav>
)
}A Client Component reads the child segment below its layout and marks the matching navigation item as current.
When to use it
Inspect a named slot's active segment
Parallel Routes
Read the matched path as one segment string
Catch-all routing
Interview questions
QWhat does useSelectedLayoutSegment return?
It is a Client Component hook that reads the active route segment one level below the layout that calls it. The result is a string, or null when no child segment exists.
Follow-up: How would you read all descendants instead? Use useSelectedLayoutSegments, which returns an array of active segments below the calling layout.
QWhy might the hook receive a parallel route key?
The optional parameter is parallelRouteKey. Supplying it selects the active segment from a particular parallel-route slot rather than the default route.
Follow-up: When would this matter? A layout rendering a named slot such as auth can pass 'auth' to inspect that slot's active child.
QHow does the hook behave with catch-all routes?
For a catch-all route such as [...slug], the returned value contains all matched path segments joined into one string. It therefore is not an array of individual segments.
Follow-up: What API should be used for a hierarchy of separate active segments? useSelectedLayoutSegments is the related hook designed to return an array.
Related
useSelectedLayoutSegmentsusePathnameuseParams