We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Trying to add tabs that only load when click on them.

I am trying to create a website which contains some tabs. I tried to link these tabs with "a rel='nofollow' href" link but it load whole page when clicking. So i search in internet and found a js that works for me. But the problem is that when page load or refresh whole content is load that pages it very slow loading. What i want is to create tabs that only load when click in them. First tabs that ia shown on main oage but other tabs load when click on them somewhat like youtube tabs of home, videos, playlist, community type..? I am nee to web development and still learning. I tried internet searches but most of them are not same thing and some of them are not that simple. Can i get some help?

1 Reply

VK Vinoth Kumar Sundara Moorthy Syncfusion Team September 27, 2019 05:15 AM

Hi Bhanu, 
Thank you for contacting Syncfusion support. 
We have checked your requirement and achieved it by rendering the Menu component in layout.cshtml page and navigate the page by using url property. Please find the below code snippet, 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
        <div class="navbar-header"> 
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
                <span class="sr-only">Toggle navigation</span> 
                <span class="icon-bar"></span> 
                <span class="icon-bar"></span> 
                <span class="icon-bar"></span> 
            <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">WebApplication1</a> 
        <div class="menu-control"> 
            <ejs-menu id="menu" items="ViewBag.menuItems" asp-action="About"></ejs-menu> 
public IActionResult Index() 
    //define the array of JSON 
    ViewBag.menuItems = GetMenuItems(); 
    return View(); 
public IActionResult About() 
    ViewData["Message"] = "Your application description page."; 
    ViewBag.menuItems = GetMenuItems(); 
    return View(); 
public List<MenuItem> GetMenuItems() 
    List<MenuItem> menuItems = new List<MenuItem>(){ 
        new MenuItem 
            Text = "File", 
            Url ="../Home/About" 
    new MenuItem { Text = "Help", Url = "../Home/About" } 
    return menuItems; 
For your convenience we have prepared a sample. Please find the sample link in below, 
Vinoth Kumar S 

Live Chat Icon For mobile
Up arrow icon