Navigation Menu in Angular JS

In this blog, I’m explaining how to create a navigation menu using angular js.

Step 1

First create an empty application and add a web form named ”Default.aspx” to it.

Now add “angular.min.js” file to your project because this file is necessary for working with angular js.

Step 2

Now add “angular.min.js” file to your head section of your page by drag-n-drop from the solution explorer like this:

<head runat="server">
    <title>Navigation Menu</title>
    <script src="angular.min.js"></script>

Step 3

Next add the ng-app attribute to the body tag:

<body ng-app>

By defining the ng-app attribute in the body tag, it denotes that the angular will active on whole body tag. If you want to enable angular for whole html page, put it in html tag.

Step 4

Now write the following code in the body section of the webpage:

<nav class="{{active}}" ng-click="$event.preventDefault()">
        <a href="#" class="home" ng-click="active='home'">Home</a>
        <a href="#" class="services" ng-click="active='services'">Services</a>
        <a href="#" class="products" ng-click="active='products'">Products</a>
        <a href="#" class="contactUs" ng-click="active='contactUs'">Contact Us</a>
    <p ng-hide="active">Please click on a menu item</p>
    <p ng-show="active">You Choose:<b>{{active}}</b></p>

And also add the following style tag in the head section:

        * {
            margin: 0;
            padding: 0;
        body {
            margin: 0 auto;
            text-align: center;
        nav {
            display: inline-block;
            margin: 60px auto 45px;
            background-color: #17c5ed;
            border-radius: 2px;
            box-shadow: 0px 1px 1px #ccc;
            nav a {
                display: inline-block;
                font-size: 16px;
                padding: 18px 30px;
                text-decoration: none !important;
                line-height: 1;
                text-transform: uppercase;
                font-weight: bold;
                color: black!important;
                background-color: transparent;
                transition: background-color 0.25s;
            nav.home .home,
            nav.products .products,
            nav.contactUs .contactUs {
                background-color: #e35885;
        p {
            font-size: 22px;
            font-weight: bold;
            color: #7d9098;
            p b {
                color: #ffffff;
                display: inline-block;
                padding: 5px 10px;
                background-color: #c4d7e0;
                border-radius: 2px;
                text-transform: uppercase;
                font-size: 18px;


  Modified On Sep-18-2014 01:24:23 PM

Leave Comment