Skip to content
Related Articles

Related Articles

How to Set navbar active class with Bootstrap and AngularJS ?

View Discussion
Improve Article
Save Article
  • Last Updated : 05 Jan, 2022

To set an active class in your bootstrap navbar, you can use ng-controller(NavigationController) to set 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.

Below example implements the above approach:

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


<!DOCTYPE html>
<html lang="en" >
    <meta charset="UTF-8">
        Bootstrap Navbar Change
        Active Class Link
    <link rel="stylesheet" href=
    <link rel='stylesheet' href=
    <script src=
    <script src=
        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 > a {
            background-color: #3990E0;
            color: white;
    <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 class="collapse navbar-collapse"
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#home">
                        <li><a href="#page1">HTML</a></li>
                        <li><a href="#page2">CSS</a></li>
                        <li><a href="#page3">JavaScript</a></li>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Front-End</a></li>
        $( '#topheader .navbar-nav a' ).on('click', 
                    function () {
            $( '#topheader .navbar-nav' ).find( '' )
            .removeClass( 'active' );
            $( this ).parent( 'li' ).addClass( 'active' );


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!