useSelectedLayoutSegments

useSelectedLayoutSegments is aClient Component hook that lets you read the active route segmentsbelow the Layout it is called from.

It is useful for creating UI in parent Layouts that need knowledge of active child segments such as breadcrumbs.

'use client'import { useSelectedLayoutSegments }from'next/navigation'exportdefaultfunctionExampleClientComponent() {constsegments=useSelectedLayoutSegments()return (    <ul>      {segments.map((segment, index)=> (        <likey={index}>{segment}</li>      ))}    </ul>  )}

Good to know:

• SinceuseSelectedLayoutSegments is aClient Component hook, and Layouts areServer Components by default,useSelectedLayoutSegments is usually called via a Client Component that is imported into a Layout.
• The returned segments includeRoute Groups, which you might not want to be included in your UI. You can use thefilter array method to remove items that start with a bracket.

Parameters

constsegments=useSelectedLayoutSegments(parallelRoutesKey?: string)

useSelectedLayoutSegmentsoptionally accepts aparallelRoutesKey, which allows you to read the active route segment within that slot.

Returns

useSelectedLayoutSegments returns an array of strings containing the active segments one level down from the layout the hook was called from. Or an empty array if none exist.

For example, given the Layouts and URLs below, the returned segments would be:

Version History