Route Based Active Class on Menu Items

LaravelPosted on

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!

Looking for web dev job?
You can check them on Jooble.

To see and write comments, you must allow the related (Disqus) cookies. For more information, please visit our privacy policy page.

Similar Posts

More content in Laravel category