useSelectedLayoutSegments

Core Idea

Client Component hook that reads all active route segments below the Layout it's called from, as an array — useful for breadcrumbs and other UI that needs full knowledge of the descendant path.

Key Concepts

• useSelectedLayoutSegments(parallelRouteKey?): Retorna array de strings dos segmentos ativos; array vazio se não houver.
• Route Groups incluídos: segmentos entre parênteses ((group)) aparecem no array; filtre com .filter() se não forem desejados na UI.
• Catch-all: todos os segmentos casados aparecem unidos como uma única string dentro do array.

Code Examples

'use client'
import { useSelectedLayoutSegments } from 'next/navigation'

export default function ExampleClientComponent() {
  const segments = useSelectedLayoutSegments()
  return (
    <ul>
      {segments.map((segment, index) => <li key={index}>{segment}</li>)}
    </ul>
  )
}

• O que demonstra: Renderiza uma lista de breadcrumb a partir de todos os segmentos ativos abaixo do layout.

Reference Tables

Layout	Visited URL	Returned Segments
app/layout.js	/	[]
app/layout.js	/dashboard	['dashboard']
app/layout.js	/dashboard/settings	['dashboard', 'settings']
app/dashboard/layout.js	/dashboard/settings	['settings']
app/layout.js (catch-all)	/blog/a/b/c	['blog', 'a/b/c']
app/blog/layout.js	/blog/a/b/c	['a/b/c']

Key Takeaways

1. Deve ser chamado a partir de um Client Component importado num Layout (Server Component por padrão).
2. Filtre segmentos de Route Groups com filter(s => !s.startsWith('(')) se eles não devem aparecer na UI.
3. Com cacheComponents ativo, exige Suspense quando algum param dinâmico abaixo não é coberto por generateStaticParams.

Connects To

• useSelectedLayoutSegment: variante que retorna só o próximo nível.
• route-groups: convenção que introduz segmentos entre parênteses que este hook expõe.