Route Based Active Class on Menu Items

When we work with multi-level menus, it’s a good feature to highlight the parent item if any child item is active. With this snippet, we can highlight the parent item dynamically, also the proper child items, based on the current route.

<ul>
    <li>
        <a href="{{ route('admin.posts.index') }}" class="{{ Str::is('admin.posts.*', Route::currentRouteName()) ? 'is-active' : '' }}">
            Posts
        </a>
        <ul>
            <li class="{{ Route::currentRouteName() === 'admin.posts.index' ? 'is-active' : '' }}">
                <a href="{{ route('admin.posts.index') }}">All Posts</a>
            </li>
            <li class="{{ Route::currentRouteName() === 'admin.posts.create' ? 'is-active' : '' }}">
                <a href="{{ route('admin.posts.create') }}">Create Post</a>
            </li>
        </ul>
    </li>
</ul>

Need a web developer? Maybe we can help, get in touch!