Design your space exactly how you want it !
<ul class="flex items-center flex-wrap gap-1.5 *:flex-center *:gap-1.5 leading-none text-gray-900 dark:text-dark-text">
<li class="text-primary-500 after:font-remix after:flex-center after:font-extrabold after:text-gray-900 after:size-5 after:content-['/'] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two">
<a href="#">Home</a>
</li>
<li class="text-primary-500 after:font-remix after:flex-center after:font-extrabold after:text-gray-900 after:size-5 after:content-['/'] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two">
<a href="#">Course</a>
</li>
<li class="text-primary-500 after:font-remix after:flex-center after:font-extrabold after:text-gray-900 after:size-5 after:content-['/'] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two">
<a href="#">New Course</a>
</li>
<li class="text-primary-500 after:font-remix after:flex-center after:font-extrabold after:text-gray-900 after:size-5 after:content-['/'] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two current-page">
<a href="#">Update</a>
</li>
</ul>
<ul class="flex items-center flex-wrap gap-1.5 *:flex-center *:gap-1.5 leading-none text-gray-900 dark:text-dark-text">
<li class="text-primary-500 after:font-remix after:flex-center after:font-thin after:text-gray-900 after:size-5 after:content-['\f3c1'] after:text-[6px] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two">
<a href="#">Home</a>
</li>
<li class="text-primary-500 after:font-remix after:flex-center after:font-thin after:text-gray-900 after:size-5 after:content-['\f3c1'] after:text-[6px] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two">
<a href="#">Course</a>
</li>
<li class="text-primary-500 after:font-remix after:flex-center after:font-thin after:text-gray-900 after:size-5 after:content-['\f3c1'] after:text-[6px] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two">
<a href="#">New Course</a>
</li>
<li class="text-primary-500 after:font-remix after:flex-center after:font-thin after:text-gray-900 after:size-5 after:content-['\f3c1'] after:text-[6px] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two current-page">
<a href="#">Update</a>
</li>
</ul>
<ul class="flex items-center flex-wrap gap-1.5 *:flex-center *:gap-1.5 leading-none text-gray-900 dark:text-dark-text">
<li class="text-primary-500 after:font-remix after:flex-center after:font-thin after:text-gray-900 after:size-5 after:content-['\ea6d'] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two">
<a href="#">Home</a>
</li>
<li class="text-primary-500 after:font-remix after:flex-center after:font-thin after:text-gray-900 after:size-5 after:content-['\ea6d'] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two">
<a href="#">Course</a>
</li>
<li class="text-primary-500 after:font-remix after:flex-center after:font-thin after:text-gray-900 after:size-5 after:content-['\ea6d'] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two">
<a href="#">New Course</a>
</li>
<li class="text-primary-500 after:font-remix after:flex-center after:font-thin after:text-gray-900 after:size-5 after:content-['\ea6d'] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two current-page">
<a href="#">Update</a>
</li>
</ul>
<ul class="flex items-center flex-wrap gap-1.5 *:flex-center *:gap-1.5 leading-none text-gray-900 dark:text-dark-text">
<li class="text-primary-500 after:font-remix after:flex-center after:font-thin after:text-gray-900 after:size-5 after:content-['\ea6e'] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two">
<a href="#">Home</a>
</li>
<li class="text-primary-500 after:font-remix after:flex-center after:font-thin after:text-gray-900 after:size-5 after:content-['\ea6e'] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two">
<a href="#">Course</a>
</li>
<li class="text-primary-500 after:font-remix after:flex-center after:font-thin after:text-gray-900 after:size-5 after:content-['\ea6e'] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two">
<a href="#">New Course</a>
</li>
<li class="text-primary-500 after:font-remix after:flex-center after:font-thin after:text-gray-900 after:size-5 after:content-['\ea6e'] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two current-page">
<a href="#">Update</a>
</li>
</ul>
<ul class="flex items-center flex-wrap gap-1.5 *:flex-center *:gap-1.5 leading-none text-gray-900 dark:text-dark-text">
<li class="text-primary-500 after:font-remix after:flex-center after:font-thin after:text-gray-900 after:size-5 after:content-['\f2e5'] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two">
<a href="#">Home</a>
</li>
<li class="text-primary-500 after:font-remix after:flex-center after:font-thin after:text-gray-900 after:size-5 after:content-['\f2e5'] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two">
<a href="#">Course</a>
</li>
<li class="text-primary-500 after:font-remix after:flex-center after:font-thin after:text-gray-900 after:size-5 after:content-['\f2e5'] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two">
<a href="#">New Course</a>
</li>
<li class="text-primary-500 after:font-remix after:flex-center after:font-thin after:text-gray-900 after:size-5 after:content-['\f2e5'] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two current-page">
<a href="#">Update</a>
</li>
</ul>
<ul class="flex items-center flex-wrap gap-4 *:flex-center *:gap-1.5 leading-none text-gray-900 dark:text-dark-text">
<li class="text-primary-500 [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two">
<a href="#">Home</a>
</li>
<li class="text-primary-500 [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two">
<a href="#">Course</a>
</li>
<li class="text-primary-500 [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two">
<a href="#">New Course</a>
</li>
<li class="text-primary-500 [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two current-page">
<a href="#">Update</a>
</li>
</ul>
<ul class="flex items-center flex-wrap gap-1.5 *:flex-center *:gap-1.5 leading-none text-gray-900 dark:text-dark-text">
<li class="text-primary-500 after:font-remix after:flex-center after:font-extrabold after:text-gray-900 after:size-5 after:content-['/'] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two">
<a href="#" class="flex-center shrink-0 gap-2 text-inherit">
<i class="ri-home-6-line text-[16px] text-inherit"></i>
Home
</a>
</li>
<li class="text-primary-500 after:font-remix after:flex-center after:font-extrabold after:text-gray-900 after:size-5 after:content-['/'] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two">
<a href="#" class="flex-center shrink-0 gap-2 text-inherit">
<i class="ri-article-line text-[16px] text-inherit"></i>
Course
</a>
</li>
<li class="text-primary-500 after:font-remix after:flex-center after:font-extrabold after:text-gray-900 after:size-5 after:content-['/'] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two">
<a href="#" class="flex-center shrink-0 gap-2 text-inherit">
<i class="ri-bank-card-line text-[16px] text-inherit"></i>
Wallet
</a>
</li>
<li class="text-primary-500 after:font-remix after:flex-center after:font-extrabold after:text-gray-900 after:size-5 after:content-['/'] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two current-page">
<a href="#" class="flex-center shrink-0 gap-2 text-inherit">
<i class="ri-heart-2-line text-[16px] text-inherit"></i>
Like Wishlist
</a>
</li>
</ul>
<ul class="flex items-center flex-wrap gap-1.5 *:flex-center *:gap-1.5 leading-none text-gray-900 dark:text-dark-text">
<li class="text-primary-500 after:font-remix after:flex-center after:font-thin after:text-gray-900 after:size-5 after:content-['\f3c1'] after:text-[6px] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two">
<a href="#" class="flex-center shrink-0 gap-2 text-inherit">
<i class="ri-home-6-line text-[16px] text-inherit"></i>
Home
</a>
</li>
<li class="text-primary-500 after:font-remix after:flex-center after:font-thin after:text-gray-900 after:size-5 after:content-['\f3c1'] after:text-[6px] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two">
<a href="#" class="flex-center shrink-0 gap-2 text-inherit">
<i class="ri-article-line text-[16px] text-inherit"></i>
Course
</a>
</li>
<li class="text-primary-500 after:font-remix after:flex-center after:font-thin after:text-gray-900 after:size-5 after:content-['\f3c1'] after:text-[6px] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two">
<a href="#" class="flex-center shrink-0 gap-2 text-inherit">
<i class="ri-bank-card-line text-[16px] text-inherit"></i>
Wallet
</a>
</li>
<li class="text-primary-500 after:font-remix after:flex-center after:font-thin after:text-gray-900 after:size-5 after:content-['\f3c1'] after:text-[6px] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two current-page">
<a href="#" class="flex-center shrink-0 gap-2 text-inherit">
<i class="ri-heart-2-line text-[16px] text-inherit"></i>
Like Wishlist
</a>
</li>
</ul>
<ul class="flex items-center flex-wrap gap-1.5 *:flex-center *:gap-1.5 leading-none text-gray-900 dark:text-dark-text">
<li class="text-primary-500 after:font-remix after:flex-center after:font-thin after:text-gray-900 after:size-5 after:content-['\ea6d'] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two">
<a href="#" class="flex-center shrink-0 gap-2 text-inherit">
<i class="ri-home-6-line text-[16px] text-inherit"></i>
Home
</a>
</li>
<li class="text-primary-500 after:font-remix after:flex-center after:font-thin after:text-gray-900 after:size-5 after:content-['\ea6d'] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two">
<a href="#" class="flex-center shrink-0 gap-2 text-inherit">
<i class="ri-article-line text-[16px] text-inherit"></i>
Course
</a>
</li>
<li class="text-primary-500 after:font-remix after:flex-center after:font-thin after:text-gray-900 after:size-5 after:content-['\ea6d'] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two">
<a href="#" class="flex-center shrink-0 gap-2 text-inherit">
<i class="ri-bank-card-line text-[16px] text-inherit"></i>
Wallet
</a>
</li>
<li class="text-primary-500 after:font-remix after:flex-center after:font-thin after:text-gray-900 after:size-5 after:content-['\ea6d'] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two current-page">
<a href="#" class="flex-center shrink-0 gap-2 text-inherit">
<i class="ri-heart-2-line text-[16px] text-inherit"></i>
Like Wishlist
</a>
</li>
</ul>
<ul class="flex items-center flex-wrap gap-1.5 *:flex-center *:gap-1.5 leading-none text-gray-900 dark:text-dark-text">
<li class="text-primary-500 after:font-remix after:flex-center after:font-thin after:text-gray-900 after:size-5 after:content-['\ea6e'] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two">
<a href="#" class="flex-center shrink-0 gap-2 text-inherit">
<i class="ri-home-6-line text-[16px] text-inherit"></i>
Home
</a>
</li>
<li class="text-primary-500 after:font-remix after:flex-center after:font-thin after:text-gray-900 after:size-5 after:content-['\ea6e'] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two">
<a href="#" class="flex-center shrink-0 gap-2 text-inherit">
<i class="ri-article-line text-[16px] text-inherit"></i>
Course
</a>
</li>
<li class="text-primary-500 after:font-remix after:flex-center after:font-thin after:text-gray-900 after:size-5 after:content-['\ea6e'] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two">
<a href="#" class="flex-center shrink-0 gap-2 text-inherit">
<i class="ri-bank-card-line text-[16px] text-inherit"></i>
Wallet
</a>
</li>
<li class="text-primary-500 after:font-remix after:flex-center after:font-thin after:text-gray-900 after:size-5 after:content-['\ea6e'] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two current-page">
<a href="#" class="flex-center shrink-0 gap-2 text-inherit">
<i class="ri-heart-2-line text-[16px] text-inherit"></i>
Like Wishlist
</a>
</li>
</ul>
<ul class="flex items-center flex-wrap gap-1.5 *:flex-center *:gap-1.5 leading-none text-gray-900 dark:text-dark-text">
<li class="text-primary-500 after:font-remix after:flex-center after:font-thin after:text-gray-900 after:size-5 after:content-['\f2e5'] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two">
<a href="#" class="flex-center shrink-0 gap-2 text-inherit">
<i class="ri-home-6-line text-[16px] text-inherit"></i>
Home
</a>
</li>
<li class="text-primary-500 after:font-remix after:flex-center after:font-thin after:text-gray-900 after:size-5 after:content-['\f2e5'] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two">
<a href="#" class="flex-center shrink-0 gap-2 text-inherit">
<i class="ri-article-line text-[16px] text-inherit"></i>
Course
</a>
</li>
<li class="text-primary-500 after:font-remix after:flex-center after:font-thin after:text-gray-900 after:size-5 after:content-['\f2e5'] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two">
<a href="#" class="flex-center shrink-0 gap-2 text-inherit">
<i class="ri-bank-card-line text-[16px] text-inherit"></i>
Wallet
</a>
</li>
<li class="text-primary-500 after:font-remix after:flex-center after:font-thin after:text-gray-900 after:size-5 after:content-['\f2e5'] after:translate-y-[1.4px] last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two current-page">
<a href="#" class="flex-center shrink-0 gap-2 text-inherit">
<i class="ri-heart-2-line text-[16px] text-inherit"></i>
Like Wishlist
</a>
</li>
</ul>
<ul class="flex items-center flex-wrap gap-2 *:flex-center *:gap-1.5 leading-none text-gray-900 dark:text-dark-text">
<li class="text-primary-500 last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two group/cb">
<a href="#" class="custom-breadcrumb-outline">
Home
</a>
</li>
<li class="text-primary-500 last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two group/cb">
<a href="#" class="custom-breadcrumb-outline">
Course
</a>
</li>
<li class="text-primary-500 last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two group/cb">
<a href="#" class="custom-breadcrumb-outline">
Wallet
</a>
</li>
<li class="text-primary-500 last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two group/cb current-page">
<a href="#" class="custom-breadcrumb-outline">
Like Wishlist
</a>
</li>
</ul>
<ul class="flex items-center flex-wrap gap-2 *:flex-center *:gap-1.5 leading-none text-gray-900 dark:text-dark-text">
<li class="text-primary-500 last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two group/cb">
<a href="#" class="flex-center shrink-0 gap-2 text-inherit custom-breadcrumb-outline">
<i class="ri-home-6-line text-[16px] text-inherit"></i>
Home
</a>
</li>
<li class="text-primary-500 last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two group/cb">
<a href="#" class="flex-center shrink-0 gap-2 text-inherit custom-breadcrumb-outline">
<i class="ri-article-line text-[16px] text-inherit"></i>
Course
</a>
</li>
<li class="text-primary-500 last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two group/cb">
<a href="#" class="flex-center shrink-0 gap-2 text-inherit custom-breadcrumb-outline">
<i class="ri-bank-card-line text-[16px] text-inherit"></i>
Wallet
</a>
</li>
<li class="text-primary-500 last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two group/cb current-page">
<a href="#" class="flex-center shrink-0 gap-2 text-inherit custom-breadcrumb-outline">
<i class="ri-heart-2-line text-[16px] text-inherit"></i>
Like Wishlist
</a>
</li>
</ul>
<ul class="flex items-center flex-wrap gap-2 *:flex-center *:gap-1.5 leading-none text-gray-900 dark:text-dark-text">
<li class="text-primary-500 last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two group/cb">
<a href="#" class="custom-breadcrumb-solid">
Home
</a>
</li>
<li class="text-primary-500 last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two group/cb">
<a href="#" class="custom-breadcrumb-solid">
Course
</a>
</li>
<li class="text-primary-500 last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two group/cb">
<a href="#" class="custom-breadcrumb-solid">
Wallet
</a>
</li>
<li class="text-primary-500 last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two group/cb current-page">
<a href="#" class="custom-breadcrumb-solid">
Like Wishlist
</a>
</li>
</ul>
<ul class="flex items-center flex-wrap gap-2 *:flex-center *:gap-1.5 leading-none text-gray-900 dark:text-dark-text">
<li class="text-primary-500 last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two group/cb">
<a href="#" class="flex-center shrink-0 gap-2 custom-breadcrumb-solid">
<i class="ri-home-6-line text-[16px] text-inherit"></i>
Home
</a>
</li>
<li class="text-primary-500 last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two group/cb">
<a href="#" class="flex-center shrink-0 gap-2 custom-breadcrumb-solid">
<i class="ri-article-line text-[16px] text-inherit"></i>
Course
</a>
</li>
<li class="text-primary-500 last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two group/cb">
<a href="#" class="flex-center shrink-0 gap-2 custom-breadcrumb-solid">
<i class="ri-bank-card-line text-[16px] text-inherit"></i>
Wallet
</a>
</li>
<li class="text-primary-500 last:after:hidden [&.current-page]:text-gray-500 dark:[&.current-page]:text-dark-text-two group/cb current-page">
<a href="#" class="flex-center shrink-0 gap-2 custom-breadcrumb-solid">
<i class="ri-heart-2-line text-[16px] text-inherit"></i>
Like Wishlist
</a>
</li>
</ul>