Layout Segments

Reading the active route segment below a layout.

Next.js3 min readConcept 42 of 65

Active Child Routes

useSelectedLayoutSegment is a Client Component hook that tells you which route segment is currently active directly below the layout where the hook is called.

Layout Navigation

While usePathname is great for full-page navigation, useSelectedLayoutSegment is perfect for nested navigation, like tabs inside a specific layout.

By knowing which child segment is active, you can highlight the correct tab without needing to parse the full URL string.

Relative Depth

The hook is relative to the folder it is called in.

If you call it from /app/dashboard/layout.tsx, and the user visits /dashboard/settings, the hook returns 'settings'.

If the user visits /dashboard (the root of the layout), the hook returns null because there is no active segment *below* the layout.

The Relative Return

Click the URLs below to see what useSelectedLayoutSegment returns when called from different depths in the file tree.

Browser URL

Visit Route
/app structure
layout.tsx
dashboard/
layout.tsx
settings/

Hook Execution at Different Depths

/app/layout.tsxDepth: Root
const segment = useSelectedLayoutSegment();
// Returns the segment 1 level down:
// => 'dashboard'
/app/dashboard/layout.tsxDepth: Nested
const segment = useSelectedLayoutSegment();
// Returns the segment 1 level down from dashboard:
// => 'settings'

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1You call `useSelectedLayoutSegment()` inside `/app/layout.tsx`. The user visits `/blog/my-first-post`. What does the hook return?

Remember this

  • useSelectedLayoutSegment returns the active segment ONE level below where it is called.
  • It is primarily used for styling tabs or nested navigation inside Layouts.
  • It returns null if there is no active child segment.
  • It ignores Route Groups.

Done with this concept?

Mark it complete to track your progress. No login needed.