Flex
19
18
Laravel

How to highlight current menu item in bootstrap?

Posted 2 months ago by Flex

working with laravel 5.6 and I have following sidebar.blade.php file sidebar.blade.php


<style type="text/css">
.list-group {
     
     margin:auto;
     float:left;
     padding-top:20px;
    }
    .lead {
     
     margin:auto;
     left:0;
     right:0;
     padding-top:10%;
    }
</style>

 <div class="list-group">
   
    <a href="#" class="list-group-item active"><i class="fa fa-key"></i> <span>App Settings</span></a>
    <a href="{{route('vehicles.myads')}}" class="list-group-item" ><i class="fa fa-credit-card"></i> <span>My Ads</span></a>
    <a href="#" class="list-group-item"><i class="fa fa-question-circle"></i> <span>Support</span></a>
    <a href="#" class="list-group-item"><i class="fa fa-arrow-circle-o-left"></i> <span>Sandbox Account</span></a>
    <a href="#" class="list-group-item"><i class="fa fa-book"></i> <span>QuickStart Overview</span></a>
    <a href="#" class="list-group-item"><i class="fa fa-compass"></i> <span>Documentation</span></a>


  </div>

  <script>
    $(document).ready(function() {
  

  $('.list-group-item').click(function(e) {
    e.preventDefault();
    $('.list-group-item').removeClass('active');
    $(this).addClass('active');
  });
});
  </script>
  

now I need highlight current menu item in above sidebar.blade.php file how can do it? current jquery codes is working only highlight in same page but when I go using link other page current link it is not highlight (as an example if I go to myads link from home page in myads page myads menu is not highlight)

Please sign in or create an account to participate in this conversation.

Laracasts Mascot

Hi, Have We Met Yet?

Did you know that, in addition to the forum, Laracasts includes well over 1000 lessons on modern web development? All for the price of one lunch out per month.

Sign Me Up

Channels

Reply to

Use Markdown with GitHub-flavored code blocks.