`useSelectedLayoutSegment()`

Client hook returning the active route segment one level below a layout.

Since Next 13.1 (App Router) Spec ↗

Syntax

import { useSelectedLayoutSegment } from 'next/navigation'; const seg = useSelectedLayoutSegment()

Parameters

Name	Type	Required	Description
`parallelRoutesKey`	`string`	No	The slot name when reading a parallel route segment.

Returns

string | null — The active child segment, or null at the leaf.

Examples

'use client'
import Link from 'next/link'
import { useSelectedLayoutSegment } from 'next/navigation'

// In app/dashboard/layout.tsx
export function Tabs() {
  const segment = useSelectedLayoutSegment()
  return (
    <nav>
      <Link
        href="/dashboard/overview"
        aria-current={segment === 'overview' ? 'page' : undefined}
      >
        Overview
      </Link>
      <Link
        href="/dashboard/settings"
        aria-current={segment === 'settings' ? 'page' : undefined}
      >
        Settings
      </Link>
    </nav>
  )
}

Notes

Client Components only, intended for building active-state navigation inside a layout. Returns the segment directly below the layout that uses it (e.g. `overview`), or `null` when the layout's own index is active. Use `useSelectedLayoutSegments()` for the full array.