Breadcrumbs

Reading an array of all active segments below a layout.

Next.js3 min readConcept 43 of 65

The Segment Array

useSelectedLayoutSegments is a Client Component hook that returns an array containing all active route segments below the layout where it is called.

Building Breadcrumbs

While the singular version of this hook is used for styling active tabs, the plural version is almost exclusively used for building breadcrumb navigation components.

By mapping over the returned array, you can dynamically generate links like Home > Store > Shoes > Nike.

Relative Depth

Just like useSelectedLayoutSegment, this hook is relative.

If called in the root /app/layout.tsx while visiting /store/shoes, it returns ['store', 'shoes'].

If called in /app/store/layout.tsx for the exact same URL, it returns ['shoes'].

The Breadcrumb Builder

Click the deeply nested routes below to see how the array populates, and how you can map it into a breadcrumb UI.

Browser URL

Visit Route

Root Layout (/app/layout.tsx)

const segments = useSelectedLayoutSegments();
// segments array:
["store","shoes","nike"]
Rendered UI Output:
Home
store
shoes
nike

Check yourself

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

  1. 1You call `useSelectedLayoutSegments()` in `/app/dashboard/layout.tsx`. The user visits `/dashboard/settings/security/keys`. What does the hook return?

Remember this

  • useSelectedLayoutSegments returns an array of all active segments below the calling layout.
  • It is primarily used for building breadcrumb UI.
  • It is relative to where it is called (does not include parent segments).
  • It returns an empty array [] if there are no child segments.

Done with this concept?

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