Highlighting multi-level menu items

highlighting_multi_level_menu.md

Highlighting multi-level menu items

In a multi-level menu, you usually have to highlight the selected menu item and its parent element. This can be done based on the parent route.

<ul>
  <li>
    <a href="{{ route('admin.posts.index') }}"
       class="{{ Str::is('admin.posts.*', Route::currentRouteName()) ? 'is-active' : '' }}">
      Manage 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>
      <li class="{{ Route::currentRouteName() === 'admin.posts.settings' ? 'is-active' : '' }}">
        <a href="{{ route('admin.posts.settings') }}">Settings</a>
      </li>
    </ul>
  </li>
</ul>