useSelectedLayoutSegment
useSelectedLayoutSegment is aClient Component hook that lets you read the active route segmentone level below the Layout it is called from.
It is useful for navigation UI, such as tabs inside a parent layout that change style depending on the active child segment.
'use client'import { useSelectedLayoutSegment }from'next/navigation'exportdefaultfunctionExampleClientComponent() {constsegment=useSelectedLayoutSegment()return <p>Active segment: {segment}</p>}Good to know:
- Since
useSelectedLayoutSegmentis aClient Component hook, and Layouts areServer Components by default,useSelectedLayoutSegmentis usually called via a Client Component that is imported into a Layout.useSelectedLayoutSegmentonly returns the segment one level down. To return all active segments, seeuseSelectedLayoutSegments
Parameters
constsegment=useSelectedLayoutSegment(parallelRoutesKey?: string)useSelectedLayoutSegmentoptionally accepts aparallelRoutesKey, which allows you to read the active route segment within that slot.
Returns
useSelectedLayoutSegment returns a string of the active segment ornull if one doesn't exist.
For example, given the Layouts and URLs below, the returned segment would be:
| Layout | Visited URL | Returned Segment |
|---|---|---|
app/layout.js | / | null |
app/layout.js | /dashboard | 'dashboard' |
app/dashboard/layout.js | /dashboard | null |
app/dashboard/layout.js | /dashboard/settings | 'settings' |
app/dashboard/layout.js | /dashboard/analytics | 'analytics' |
app/dashboard/layout.js | /dashboard/analytics/monthly | 'analytics' |
Examples
Creating an active link component
You can useuseSelectedLayoutSegment to create an active link component that changes style depending on the active segment. For example, a featured posts list in the sidebar of a blog:
'use client'import Linkfrom'next/link'import { useSelectedLayoutSegment }from'next/navigation'// This *client* component will be imported into ablog layoutexportdefaultfunctionBlogNavLink({ slug, children,}: { slug:string children:React.ReactNode}) {// Navigating to `/blog/hello-world` will return 'hello-world'// for the selected layout segmentconstsegment=useSelectedLayoutSegment()constisActive= slug=== segmentreturn ( <Linkhref={`/blog/${slug}`}// Change style depending on whether the link is activestyle={{ fontWeight: isActive?'bold':'normal' }} > {children} </Link> )}// Import the Client Component into a parent Layout (Server Component)import { BlogNavLink }from'./blog-nav-link'import getFeaturedPostsfrom'./get-featured-posts'exportdefaultasyncfunctionLayout({ children,}: { children:React.ReactNode}) {constfeaturedPosts=awaitgetFeaturedPosts()return ( <div> {featuredPosts.map((post)=> ( <divkey={post.id}> <BlogNavLinkslug={post.slug}>{post.title}</BlogNavLink> </div> ))} <div>{children}</div> </div> )}Version History
| Version | Changes |
|---|---|
v13.0.0 | useSelectedLayoutSegment introduced. |
Was this helpful?