How to make curved active tab in navigation menu using HTML CSS & JavaScript ?

Last Updated : 17 May, 2023

In this article, we will learn about the curved outside in the active tab used in the navigation menu using HTML, CSS & Javascript. One of the most beautiful and good-looking designs of a navigation menu is the ‘Curve outside in Active Tab’ design. With the help of the CSS border-radius property, it is very easy to make an inside curve. But while making an outside curve it becomes complex. So we are going to learn How to make a ‘Curved Outside in Active Tab’ in Navigation Menu Using Html CSS & JavaScript using the following approaches:

Method 1: Styling two pseudo-elements.
Method 2: Using the box-shadow of an above circle

Outside Curve: An outside curve is the rounded outward corner through which we connect our active element to any other element of the document. Let’s see an example:

We are going to make a ‘Curved Outside in Active Tab in Navigation Menu’ using the following steps:

Make a Navigation Menu With an active tab:

Now before going to the ‘Outside Curve’ part, we are going to create a simple navigation menu using HTML and CSS and make a default active item inside the navigation menu in the following steps :

Create a div element of class navigation.
Create an unordered list inside the div.
Add the icons and links you want to as a list item of the unordered list.
Choose a list item for our default active item. Add a class active to this item.
Add custom CSS, background and font to make our navigation good-looking.

Add the JavaScript – Make the active tab movable on click:

We have successfully created a side navigation bar with an active tag. Now it is our task to make the link active which is clicked. With the help of JavaScript and jQuery, we are going to do it in the following steps :

Add the jQuery library into our HTML document.
Add a click event to all the list items of the navigation menu.
Prevent the default to prevent the restoration of the previous state.
Inside that function remove the ‘active’ class from the existing active list item.
Add the ‘active’ class to the clicked list item.

Method 1: Styling two pseudo-elements

Add two extra tags at the top of the <a> tag inside the list element. These will perform as pseudo-elements.
Add a class of ‘left-curve’ to the first tag and ‘bottom-curve’ to the second tag.
Create a rectangle at the left using the tag with class ‘left-curve’.
Add a border-radius to the elements of this class using css : : before selector.
Make the display of the left-curve as ‘none’.
Make the display a ‘block’ when the link is active.
Repeat the same process for the ‘right-curve’ (the second tag).

Example: In this example, we will use the above-explained method.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Curved Outside Active Tab | Geeksforgeeks</title>
 
    <!--JQuery Library-->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
 
    <!--Font Awesome for the icons-->
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
 
    <!--Style for making the navigation menu-->
    <style>
        .navbar {
            position: fixed;
            left: 0px;
            top: 0px;
            height: auto;
            width: 100%;
            background: #308d46;
        }
 
        .navbar ul {
            display: flex;
            list-style-type: none;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            padding-inline-start: 0px;
            margin-bottom: 0px;
            padding-left: 40px;
        }
 
        .navbar ul li {
            display: inline;
            list-style: none;
            padding-left: 30px;
            padding-right: 30px;
            padding-top: 10px;
            padding-bottom: 10px;
            font-size: 1rem;
            border-radius: 20px 20px 0px 0px;
            position: relative;
        }
 
        .navbar ul li.active {
            background: #fff;
        }
 
        .navbar ul li a {
            text-decoration: none;
            color: #fff;
        }
 
        .navbar ul li.active a {
            color: #308d46;
        }
    </style>
 
    <!-- The Pseudo elements : Style 
      for the outside curve-->
    <style>
        .navbar ul li b.left-curve {
            position: absolute;
            bottom: 0px;
            left: -20px;
            height: 100%;
            width: 20px;
            background: #fff;
            display: none;
        }
 
        .navbar ul li b.left-curve::before {
            content: "";
            top: 0;
            left: 0;
            position: absolute;
            width: 100%;
            height: 100%;
            border-bottom-right-radius: 20px;
            background: #308d46;
        }
 
        .navbar ul li b.right-curve {
            position: absolute;
            right: -20px;
            top: 0px;
            height: 100%;
            width: 20px;
            background: #fff;
            display: none;
        }
 
        .navbar ul li b.right-curve::before {
            content: "";
            right: 0;
            position: absolute;
            width: 100%;
            top: 0;
            height: 100%;
            border-bottom-left-radius: 20px;
            background: #308d46;
        }
 
        .navbar ul li.active b.left-curve,
        .navbar ul li.active b.right-curve {
            display: block;
        }
    </style>
 
    <script>
        $(function () {
            $("li").click(function (e) {
                e.preventDefault();
                $("li").removeClass("active");
                $(this).addClass("active");
            });
        });
    </script>
</head>
 
<body>
    <div class="navbar">
        <ul>
            <li class="list-item">
                <b class="left-curve"></b>
                <b class="right-curve"></b>
                <a>
                    <i class="fa fa-home"></i>
                    Home
                </a>
            </li>
            <li class="list-item">
                <b class="left-curve"></b>
                <b class="right-curve"></b>
                <a>
                    <i class="fa fa-book"></i>
                    My Courses
                </a>
            </li>
            <li class="list-item">
                <b class="left-curve"></b>
                <b class="right-curve"></b>
                <a>
                    <i class="fa fa-user"></i>
                    My Profile
                </a>
            </li>
            <li class="list-item active">
                <b class="left-curve"></b>
                <b class="right-curve"></b>
                <a>
                    <i class="fa fa-star"></i>
                    Go Premium
                </a>
            </li>
        </ul>
    </div>
</body>
</html>

Output :

Method 2: Using the box-shadow of an above circle

Create a circle at the top and at the bottom of the active link using ::before and ::after selectors.
Create a box-shadow of the circle with the same parameters.

Make the color of the circle the same as the background color of the navigation bar and the color of the box-shadow same as the color of the outside div. Now the active link is curved outside.

Example: Here we will use the above-explained method.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Curved Outside Active Tab | Geeksforgeeks</title>
 
    <!--Font Awesome for the icons-->
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
 
    <!--JQuery Library-->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
 
    <!--Style for making the navigation menu-->
    <style>
        .navbar {
            position: fixed;
            left: 0px;
            top: 0px;
            height: auto;
            width: 100%;
            background: #308d46;
        }
 
        .navbar ul {
            display: flex;
            list-style-type: none;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            padding-inline-start: 0px;
            margin-bottom: 0px;
            padding-left: 40px;
        }
 
        .navbar ul li {
            display: inline;
            list-style: none;
            padding-left: 30px;
            padding-right: 30px;
            padding-top: 10px;
            padding-bottom: 10px;
            font-size: 1rem;
            border-radius: 20px 20px 0px 0px;
            position: relative;
        }
 
        .navbar ul li.active {
            background: #fff;
        }
 
        .navbar ul li a {
            text-decoration: none;
            color: #fff;
        }
 
        .navbar ul li.active a {
            color: #308d46;
        }
    </style>
 
    <!-- The Circles with box-shadow-->
    <style>
        li.active a::before {
            content: "";
            left: -30px;
            bottom: 0;
            height: 30px;
            width: 30px;
            position: absolute;
            background: #308d46;
            border-radius: 50%;
            box-shadow: 15px 15px 0 #fff;
        }
 
        li.active a::after {
            content: "";
            right: -30px;
            bottom: 0;
            height: 30px;
            width: 30px;
            position: absolute;
            background: #308d46;
            border-radius: 50%;
            box-shadow: -15px 15px 0 #fff;
        }
    </style>
 
    <script>
        $(function () {
            $("li").click(function (e) {
                e.preventDefault();
                $("li").removeClass("active");
                $(this).addClass("active");
            });
        });
    </script>
</head>
 
<body>
    <div class="navbar">
        <ul>
            <li class="list-item">
                <a>
                    <i class="fa fa-home"></i>
                    Home
                </a>
            </li>
            <li class="list-item">
                <a>
                    <i class="fa fa-book"></i>
                    My Courses
                </a>
            </li>
            <li class="list-item">
                <a>
                    <i class="fa fa-user"></i>
                    My Profile
                </a>
            </li>
            <li class="list-item active">
                <a>
                    <i class="fa fa-star"></i>
                    Go Premium
                </a>
            </li>
        </ul>
    </div>
</body>
</html>