Tailwind CSS Application Shell

Application Shell with navbar

Use this Tailwind Application Shell Layout to show navigation bar with menu items and links on the top side of the page

Preview
Code

                                                <div class="relative ">
      <!--header-->
      <nav class="bg-white dark:bg-gray-900 py-3.5 px-6  w-full lg:shadow-none shadow-sm fixed ">
      <div class="flex items-center justify-between gap-1 sm:gap-6 lg:flex-row flex-col">
         <div class="flex justify-between items-center lg:w-auto w-full">
           <a href="#" class="block">
              <img src="https://pagedone.io/asset/uploads/1701235273.png" alt="Pagedone logo image" class="block dark:hidden object-cover">
              <img src="https://pagedone.io/asset/uploads/1712310504.png" alt="Pagedone logo image" class="hidden dark:block object-cover">
          </a>
          <button id="navbar-toggle" type="button" class="inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none " aria-controls="navbar-default" aria-expanded="false">
              <span class="sr-only">Open main menu</span>
              <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
              </svg>
            </button>
          </div> 
          <div id="mobile-navbar" class="hidden lg:flex flex-row w-full flex-1">  
            <ul class="text-center flex lg:flex-row flex-col lg:gap-2 xl:gap-4 gap-2 items-center lg:ml-auto">
                  <li><a href="#" class="py-1.5 px-3 bg-indigo-600 transition-all duration-500 ease-in-out text-xs text-white font-semibold rounded-md">Dashboard</a></li>
                  <li><a href="#" class="py-1.5 px-3 bg-transparent transition-all duration-500 ease-in-out text-xs text-gray-500 dark:text-white hover:bg-indigo-600 hover:text-white font-semibold rounded-md">Employees</a></li>
                  <li><a href="#" class="py-1.5 px-3 bg-transparent transition-all duration-500 ease-in-out text-xs text-gray-500 dark:text-white hover:bg-indigo-600 hover:text-white font-semibold rounded-md">Attendances</a></li>
                  <li><a href="#" class="py-1.5 px-3 bg-transparent transition-all duration-500 ease-in-out text-xs text-gray-500 dark:text-white hover:bg-indigo-600 hover:text-white font-semibold rounded-md">Calendar</a></li>
                  <li><a href="#" class="py-1.5 px-3 bg-transparent transition-all duration-500 ease-in-out text-xs text-gray-500 dark:text-white hover:bg-indigo-600 hover:text-white font-semibold rounded-md">Leaves</a></li>
                  <li><a href="#" class="py-1.5 px-3 bg-transparent transition-all duration-500 ease-in-out text-xs text-gray-500 dark:text-white hover:bg-indigo-600 hover:text-white font-semibold rounded-md">Payroll</a></li>
                  <li><a href="#" class="py-1.5 px-3 bg-transparent transition-all duration-500 ease-in-out text-xs text-gray-500 dark:text-white hover:bg-indigo-600 hover:text-white font-semibold rounded-md">Document</a></li>
              </ul>
              <div class="text-center lg:flex  items-center gap-1  sm:gap-4 lg:ml-auto">
              <div class=" flex items-center lg:justify-start justify-center gap-1 sm:gap-2">
                  <div class="relative w-max p-3">
                  <svg class="" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                      <path d="M17.5001 17.5L15.4167 15.4167M15.8334 9.16667C15.8334 5.48477 12.8486 2.5 9.16673 2.5C5.48483 2.5 2.50006 5.48477 2.50006 9.16667C2.50006 12.8486 5.48483 15.8333 9.16673 15.8333C11.0006 15.8333 12.6615 15.0929 13.8668 13.8947C15.0814 12.6872 15.8334 11.0147 15.8334 9.16667Z" stroke="#6B7280" stroke-width="1.3" stroke-linecap="round"></path>
                  </svg>
                  
                  </div>
                  <p class="text-gray-200 dark:text-gray-700 font-normal">|</p>
                  <button class="w-8 sm:w-11 h-8 sm:h-11 flex items-center justify-center lg:p-3">
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                      <path d="M11.3235 2.5H9.16667C6.02397 2.5 4.45262 2.5 3.47631 3.47631C2.5 4.45262 2.5 6.02397 2.5 9.16667V10.8333C2.5 13.976 2.5 15.5474 3.47631 16.5237C4.45262 17.5 6.02397 17.5 9.16667 17.5H10.8333C13.976 17.5 15.5474 17.5 16.5237 16.5237C17.5 15.5474 17.5 13.976 17.5 10.8333V9.55882M10 10H5.83333M12.5 13.3333H5.83333M17.5 4.58333C17.5 5.73393 16.5673 6.66667 15.4167 6.66667C14.2661 6.66667 13.3333 5.73393 13.3333 4.58333C13.3333 3.43274 14.2661 2.5 15.4167 2.5C16.5673 2.5 17.5 3.43274 17.5 4.58333Z" stroke="#6B7280" stroke-width="1.3" stroke-linecap="round"></path>
                  </svg>
                  </button>
              </div>
              <button class="group py-2 px-2 lg:pr-5 lg:pl-3.5 lg:mx-0 mx-auto flex items-center whitespace-nowrap gap-1.5 font-medium text-sm text-white border border-solid border-indigo-600 bg-indigo-600 rounded-lg transition-all duration-300 hover:bg-indigo-700 hover:border-indigo-700">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
                  <path d="M9 4.5V13.5M13.5 9H4.5" stroke="white" stroke-width="1.3" stroke-linecap="round"></path>
                  </svg>
                  <span class="max-lg:hidden">Add Employee</span>
              </button>
              </div>
          </div> 
            
        </div>
      </nav> 
       <!--main content--> 
      <div class="pt-[68px]">
      <div class="py-3.5 lg:px-8 px-3 bg-gray-50 dark:bg-gray-800 ">
          <div class="block max-lg:pl-6">
              <h6 class="text-sm sm:text-lg font-semibold text-gray-900 dark:text-white whitespace-nowrap mb-1.5">
                Welcome back,
                <span class="text-indigo-600 text-base sm:text-lg font-semibold">
                  Ronald!</span>
              </h6>
              <p class="text-xs font-medium text-gray-900 dark:text-white">Home</p>
            </div>
      </div>
      <div class="w-full p-8 ">
          <div class="border-gray-200 border rounded-xl">
              <img src="https://pagedone.io/asset/uploads/1712309277.png" alt="image" class="object-cover w-full h-full"/>
          </div>
        </div>
      </div>  
 </div>
<!--JavaScript-->
<script>
  document.addEventListener("DOMContentLoaded", function () {
      const navbarToggle = document.getElementById('navbar-toggle');
      const mobileNavbar = document.getElementById('mobile-navbar');

      navbarToggle.addEventListener('click', function () {
          mobileNavbar.classList.toggle('hidden');
      });
  });

</script>

HTML Copy

Dashboard Layout with navbar

Use following code to create a dashboard layout with simple design in top navigation bar.

Preview
Code

Figma File

                                                <div class="relative bg-gray-50 dark:bg-gray-900">
      <!--header-->
      <nav class="border-b lg:border-gray-200 dark:border-gray-700 dark:bg-gray-900 border-transparent py-3.5 px-6  w-full  fixed ">
      <div class="flex items-center justify-between gap-1 sm:gap-6 lg:flex-row flex-col">
         <div class="flex justify-between items-center lg:w-auto w-full">
           <a href="#" class="block">
              <img src="https://pagedone.io/asset/uploads/1701235273.png" alt="Pagedone logo image" class="block dark:hidden">
              <img src="https://pagedone.io/asset/uploads/1712310504.png" alt="Pagedone logo image" class="hidden dark:block">
          </a>
          <button id="navbar-toggle" type="button" class="inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none " aria-controls="navbar-default" aria-expanded="false">
              <span class="sr-only">Open main menu</span>
              <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
              </svg>
            </button>
          </div> 
          <div id="mobile-navbar" class="hidden lg:flex flex-row w-full flex-1 shadow-sm lg:shadow-none bg-white dark:bg-transparent lg:bg-transparent rounded-xl py-4 lg:py-0">  
            <ul class="text-center flex lg:flex-row flex-col lg:gap-2 xl:gap-4 gap-2 items-center lg:ml-auto">
                  <li><a href="#" class="py-1.5 px-3 bg-indigo-600 transition-all duration-500 ease-in-out text-xs text-white font-semibold rounded-md">Dashboard</a></li>
                  <li><a href="#" class="py-1.5 px-3 bg-transparent transition-all duration-500 ease-in-out text-xs text-gray-500 dark:text-white hover:bg-indigo-600 hover:text-white font-semibold rounded-md">Employees</a></li>
                  <li><a href="#" class="py-1.5 px-3 bg-transparent transition-all duration-500 ease-in-out text-xs text-gray-500 dark:text-white hover:bg-indigo-600 hover:text-white font-semibold rounded-md">Attendances</a></li>
                  <li><a href="#" class="py-1.5 px-3 bg-transparent transition-all duration-500 ease-in-out text-xs text-gray-500 dark:text-white hover:bg-indigo-600 hover:text-white font-semibold rounded-md">Calendar</a></li>
                  <li><a href="#" class="py-1.5 px-3 bg-transparent transition-all duration-500 ease-in-out text-xs text-gray-500 dark:text-white hover:bg-indigo-600 hover:text-white font-semibold rounded-md">Leaves</a></li>
                  <li><a href="#" class="py-1.5 px-3 bg-transparent transition-all duration-500 ease-in-out text-xs text-gray-500 dark:text-white hover:bg-indigo-600 hover:text-white font-semibold rounded-md">Payroll</a></li>
                  <li><a href="#" class="py-1.5 px-3 bg-transparent transition-all duration-500 ease-in-out text-xs text-gray-500 dark:text-white hover:bg-indigo-600 hover:text-white font-semibold rounded-md">Document</a></li>
              </ul>
              <div class="text-center lg:flex  items-center gap-1  sm:gap-4 lg:ml-auto">
              <div class=" flex items-center lg:justify-start justify-center gap-1 sm:gap-2">
                  <div class="relative w-max p-3">
                  <svg class="" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                      <path d="M17.5001 17.5L15.4167 15.4167M15.8334 9.16667C15.8334 5.48477 12.8486 2.5 9.16673 2.5C5.48483 2.5 2.50006 5.48477 2.50006 9.16667C2.50006 12.8486 5.48483 15.8333 9.16673 15.8333C11.0006 15.8333 12.6615 15.0929 13.8668 13.8947C15.0814 12.6872 15.8334 11.0147 15.8334 9.16667Z" stroke="#6B7280" stroke-width="1.3" stroke-linecap="round"></path>
                  </svg>
                  
                  </div>
                  <p class="text-gray-200 dark:text-gray-700 font-normal">|</p>
                  <button class="w-8 sm:w-11 h-8 sm:h-11 flex items-center justify-center lg:p-3">
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                      <path d="M11.3235 2.5H9.16667C6.02397 2.5 4.45262 2.5 3.47631 3.47631C2.5 4.45262 2.5 6.02397 2.5 9.16667V10.8333C2.5 13.976 2.5 15.5474 3.47631 16.5237C4.45262 17.5 6.02397 17.5 9.16667 17.5H10.8333C13.976 17.5 15.5474 17.5 16.5237 16.5237C17.5 15.5474 17.5 13.976 17.5 10.8333V9.55882M10 10H5.83333M12.5 13.3333H5.83333M17.5 4.58333C17.5 5.73393 16.5673 6.66667 15.4167 6.66667C14.2661 6.66667 13.3333 5.73393 13.3333 4.58333C13.3333 3.43274 14.2661 2.5 15.4167 2.5C16.5673 2.5 17.5 3.43274 17.5 4.58333Z" stroke="#6B7280" stroke-width="1.3" stroke-linecap="round"></path>
                  </svg>
                  </button>
              </div>
              <button class="group py-2 px-2 lg:pr-5 lg:pl-3.5 lg:mx-0 mx-auto flex items-center whitespace-nowrap gap-1.5 font-medium text-sm text-white border border-solid border-indigo-600 bg-indigo-600 rounded-lg transition-all duration-300 hover:bg-indigo-700 hover:border-indigo-700">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
                  <path d="M9 4.5V13.5M13.5 9H4.5" stroke="white" stroke-width="1.3" stroke-linecap="round"></path>
                  </svg>
                  <span class="max-lg:hidden">Add Employee</span>
              </button>
              </div>
          </div> 
        </div>
      </nav> 
       <!--main content--> 
      <div class="pt-[70px]">
      <div class="py-4 lg:px-8 px-3 bg-gray-50 dark:bg-gray-900 ">
          <div class="block max-lg:pl-6">
              <h6 class="text-sm sm:text-lg font-semibold text-gray-900 dark:text-white whitespace-nowrap mb-1.5">
                Welcome back,
                <span class="text-indigo-600 text-base sm:text-lg font-semibold">
                  Ronald!</span>
              </h6>
              <p class="text-xs font-medium text-gray-900 dark:text-white">Home</p>
            </div>
      </div>
      <div class="w-full p-8 bg-white rounded-3xl ">
          <div class="border-gray-200 border rounded-xl">
              <img src="https://pagedone.io/asset/uploads/1712309277.png" alt="image" class="object-cover w-full h-full"/>
          </div>
        </div>
      </div>  
 </div>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const navbarToggle = document.getElementById('navbar-toggle');
        const mobileNavbar = document.getElementById('mobile-navbar');

        navbarToggle.addEventListener('click', function () {
            mobileNavbar.classList.toggle('hidden');
        });
    });
</script>

HTML Copy

Appplication Shell with Background

Use this style of App dashboard shell to show a list of navigation items and show content below navigation with background in main content.

Preview
Code

Figma File

                                                <div class="relative bg-indigo-600 dark:bg-gray-900">
      <!--header-->
      <nav class="py-3.5 px-6 bg-indigo-600 dark:bg-gray-900 border-b border-solid border-indigo-400 dark:border-gray-700 fixed w-full top-0 z-20">
      <div class="flex items-center justify-between gap-1 sm:gap-6 lg:flex-row flex-col">
          <div class="flex justify-between items-center lg:w-auto w-full">
          <a href="#" class="block">
              <img src="https://pagedone.io/asset/uploads/1712310504.png" alt="Pagedone logo image" >
          </a>
          <button id="navbar-toggle" type="button" class="inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none " aria-controls="navbar-default" aria-expanded="false">
              <span class="sr-only">Open main menu</span>
              <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
              </svg>
            </button>
          </div>
          <div id="mobile-navbar" class="hidden lg:flex flex-row w-full flex-1 shadow-sm lg:shadow-none lg:bg-transparent rounded-xl py-4 lg:py-0">   
            <ul class="text-center flex lg:flex-row flex-col xl:gap-1 gap-2 lg:ml-auto lg:flex lg:bg-indigo-500 dark:bg-transparent items-center p-1 rounded-xl">
                  <li><a href="#" class="py-2 px-5 flex justify-center bg-white transition-all duration-500 ease-in-out text-xs text-gray-900 font-semibold rounded-lg">Dashboard</a></li>
                  <li><a href="#" class="py-2 px-5  bg-transparent transition-all duration-500 ease-in-out text-xs text-white hover:bg-white hover:text-gray-900 font-semibold rounded-lg flex justify-center">Employees</a></li>
                  <li><a href="#" class="py-2 px-5  bg-transparent transition-all duration-500 ease-in-out text-xs text-white hover:bg-white hover:text-gray-900 font-semibold rounded-lg flex justify-center">Attendances</a></li>
                  <li><a href="#" class="py-2 px-5  bg-transparent transition-all duration-500 ease-in-out text-xs text-white hover:bg-white hover:text-gray-900 font-semibold rounded-lg flex justify-center">Calendar</a></li>
                  <li><a href="#" class="py-2 px-5  bg-transparent transition-all duration-500 ease-in-out text-xs text-white hover:bg-white hover:text-gray-900 font-semibold rounded-lg flex justify-center">Leaves</a></li>
                  <li><a href="#" class="py-2 px-5  bg-transparent transition-all duration-500 ease-in-out text-xs text-white hover:bg-white hover:text-gray-900 font-semibold rounded-lg flex justify-center">Payroll</a></li>
                  <li><a href="#" class="py-2 px-5  bg-transparent transition-all duration-500 ease-in-out text-xs text-white hover:bg-white hover:text-gray-900 font-semibold rounded-lg flex justify-center">Document</a></li>
              </ul>
              <div class="text-center lg:flex  items-center gap-1  sm:gap-4 lg:ml-auto">
              <div class="flex items-center gap-1 sm:gap-2 lg:justify-start justify-center">
                  <div class="relative w-max p-3">
                  <svg class="" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                      <path d="M17.5001 17.5L15.4167 15.4167M15.8334 9.16667C15.8334 5.48477 12.8486 2.5 9.16673 2.5C5.48483 2.5 2.50006 5.48477 2.50006 9.16667C2.50006 12.8486 5.48483 15.8333 9.16673 15.8333C11.0006 15.8333 12.6615 15.0929 13.8668 13.8947C15.0814 12.6872 15.8334 11.0147 15.8334 9.16667Z" stroke="#fff" stroke-width="1.3" stroke-linecap="round"></path>
                  </svg>
                  
                  </div>
                  <p class="text-indigo-400 dark:text-gray-700 font-normal">|</p>
                  <button class="w-8 sm:w-11 h-8 sm:h-11 flex items-center justify-center p-3">
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                      <path d="M11.3235 2.5H9.16667C6.02397 2.5 4.45262 2.5 3.47631 3.47631C2.5 4.45262 2.5 6.02397 2.5 9.16667V10.8333C2.5 13.976 2.5 15.5474 3.47631 16.5237C4.45262 17.5 6.02397 17.5 9.16667 17.5H10.8333C13.976 17.5 15.5474 17.5 16.5237 16.5237C17.5 15.5474 17.5 13.976 17.5 10.8333V9.55882M10 10H5.83333M12.5 13.3333H5.83333M17.5 4.58333C17.5 5.73393 16.5673 6.66667 15.4167 6.66667C14.2661 6.66667 13.3333 5.73393 13.3333 4.58333C13.3333 3.43274 14.2661 2.5 15.4167 2.5C16.5673 2.5 17.5 3.43274 17.5 4.58333Z" stroke="#fff" stroke-width="1.3" stroke-linecap="round"></path>
                  </svg>
                  </button>
              </div>
              
              <button class="group py-2 px-2 lg:pr-5 lg:pl-3.5 lg:mx-0 mx-auto flex items-center whitespace-nowrap gap-1.5 font-medium text-sm text-indigo-600 border border-solid  bg-indigo-50 rounded-lg transition-all duration-300 hover:bg-indigo-100 hover:border-indigo-700">
                  <svg class="stroke-indigo-600" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
                  <path d="M9 4.5V13.5M13.5 9H4.5" stroke="stroke-current" stroke-width="1.3" stroke-linecap="round"></path>
                  </svg>
                  <span class="max-lg:hidden">Add Employee</span>
              </button>
              </div>
             
            </div>
        </div>
      </nav> 
      <!--main content--> 
        <div class="py-3.5 px-8 lg:mt-[72px] mt-[68px] ">
          <div class="block max-lg:pl-6">
              <h6 class="text-sm sm:text-lg font-semibold text-white whitespace-nowrap mb-1.5">
                Welcome back,
                <span class="text-white text-base sm:text-lg font-semibold">
                  Ronald!</span>
              </h6>
              <p class="text-xs font-medium text-white">Home</p>
            </div>
        </div>
        
        <div class=" p-4 ">
          <div class="rounded-2xl bg-white overflow-hidden p-8">
             <div class="border border-gray-200 rounded-2xl">
               <img src="https://pagedone.io/asset/uploads/1712309277.png" alt="image" class="object-cover w-full h-full"/>
              </div> 
          </div>
        </div>
 </div>
<script>
   document.addEventListener("DOMContentLoaded", function () {
        const navbarToggle = document.getElementById('navbar-toggle');
        const mobileNavbar = document.getElementById('mobile-navbar');

        navbarToggle.addEventListener('click', function () {
            mobileNavbar.classList.toggle('hidden');
        });
    });

</script>

HTML Copy

Alternate style of Application Shell

Following example is a alternate style of application shell, which has a background color in navigation bar and content below it.

Preview
Code

Figma File

Stacked layout with multiple navbars

Use this advanced stacked application shell layout with a responsive navigation bar that includes search, user options, menu items and add content in a grid layout.

Preview
Code

Figma File

Shell layout with expandable sidebar

Use this Dashboard Shell example to show a expandable sidebar with collapsable content together, main content area are on the right side of the page.

Preview
Code

Figma File

Advanced layout with collapsable sidebar

Use this shell layout to show a collapsible sidebar. The sidebar can be expanded or collapsed by clicking on the hamburger icon at the left.

Preview
Code

Figma File

Advanced layout with Double Sidebar layout

Use this Tailwind Application Shell Layout with double sidebar on the left side of the page and content shows on the right.

Preview
Code

Figma File

Creative Dashboard Layout Tailwind

Use following example to create an advanced dashboard layout with collapsible sidebar, main content can be show inside grid layout.

Preview
Code

Figma File

Dashboard Layout with collapsable sidebar

Use this Dashboard layout in Tailwind CSS with collapsable sidebar and collapsable main content area.

Preview
Code

Figma File