How to Set navbar active class with Bootstrap and AngularJS ?

Last Updated : 12 Jul, 2025

In this article, we will see how to set the navbar active class with Bootstrap and AngularJS, & will know its implementation through the example. To accomplish this task, you can use ng-controller(NavigationController) to set the bootstrap navbar active class with AngularJS. To run a single controller outside ng-view. You can set class= "active" when the angular route is clicked. The below example implements the above approach.

Example: This example explains how to set bootstrap navbar active class with AngularJS using ng-controller.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <title>
        Bootstrap Navbar Change
        Active Class Link
    </title>

    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

    <link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

    <script src=
'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'>
    </script>

    <script src=
'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'>
    </script>

    <style>
        body {
            margin: 20px;
        }
        #topheader .navbar-nav li > a {
            text-transform: capitalize;
            color: #333;
            -webkit-transition: background-color .2s, color .2s;
            transition: background-color .2s, color .2s;
        }
        #topheader .navbar-nav li > a:hover,
        #topheader .navbar-nav li > a:focus {
            background-color: #005596;
            color: #fff;
        }
        #topheader .navbar-nav li.active > a {
            background-color: #3990E0;
            color: white;
        }
    </style>
</head>

<body>
    <div id="topheader">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" 
                       href="#" 
                       style="color: green;">
                        GeeksforGeeks
                    </a>
                </div>

                <div class="collapse navbar-collapse"
                     id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="#home">home</a>
                        </li>
                        <li>
                            <a href="#page1">HTML</a>
                        </li>
                        <li>
                            <a href="#page2">CSS</a>
                        </li>
                        <li>
                            <a href="#page3">JavaScript</a>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="#">Front-End</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>

    <script>
        $( '#topheader .navbar-nav a' ).on('click',
                    function () {
            $( '#topheader .navbar-nav' ).find( 'li.active' )
            .removeClass( 'active' );
            $( this ).parent( 'li' ).addClass( 'active' );
        });
    </script>
</body>
</html>

Output:

How to make a Bootstrap Modal Popup in Angular 9/8 ?

KumariShwetha

Improve

Article Tags :

How to Set navbar active class with Bootstrap and AngularJS ?

Similar Reads

Thank You!

What kind of Experience do you want to share?