SenangStart

Back

Alternating Experiences App Screenshot Previews Award Showcase Grid Bonus Content Grid Course Card Grid Course Offer Cards Custom Section Benefits Dual Product Cards Filterable Portfolio Offer Image Grid Partners & Clients Portfolio Reveal Grid Quality Asym Images Service Icon Grid Specialty Icon Grid STEM Learning Previews Template Showcase Grid Webinar Grid

App Download CTA CTA Profile Card CTA Stats & Image Newsletter CTA Logos Plan CTA Testimonial Product CTA Interactive Profile CTA Background

App Features Centered App Features Mobile Feature Image Toggle Feature Large Image

App Onboarding Steps Event Timeline Step Image Cards Story Mission Banners

Basic Testimonial Grid Simple Testimonial Testimonial Cards Stats Testimonial Slider

Centered Video Show Video Feature Highlights Video Fullwidth Overlay Video Gallery Video Testimonial Video with Sidebar

Challenge Icon Cards Dual Problem Cards Multi-Format Problems Problem Before/After Problem Image Stack Tabbed Problem Explore

Classic Accordion Colored Block FAQ Formal List FAQ Grid Toggle FAQ Interactive List FAQ Sidebar Intro FAQ

Course Product Page Webinar Product Booking

Footer Sitemap Simple Footer Social

Founder's Perspective Guiding Core Values Our Journey Timeline Our Working Philosophy The Evolution Story

Global Scale Stats Impact Highlights Key Metrics Showcase Milestone Cards Progress Report List Statistic Box Grid

Hero BG Pattern Card Hero Centered Media Hero Feature Cards Hero Full BG Image Hero Split BG Image Hero Split Overlay

Medical Team Grid Team Leadership Grid

Navbar Announce User Navbar Mega Menu Navbar Prev/Next Nav Navbar Top Bar Links Navbar with Search Standard Navbar

Pricing Compare Table Pricing Toggle Cards

#Navbar Prev/Next Nav

navigation

A navigation bar incorporating 'Previous' and 'Next' links, suitable for navigating sequential content or articles.

<div class="w-full lg:h-40">
  <nav class="z-50 w-full p-6" x-data="{ isOpen: false }">
    <div class="container mx-auto w-full rounded-lg bg-white bg-opacity-80 p-2 backdrop-blur backdrop-filter">
      <div class="flex flex-col lg:flex-row">
        <div class="flex h-12 items-center">
          <img
                src="https://placehold.co/120x48"
                class="h-full"
                alt="Logo"
              />
          <div class="flex-grow lg:hidden"></div>
          <div x-on:click="isOpen = !isOpen" x-on:click.outside="isOpen = false" class="flex w-12 cursor-pointer items-center justify-center lg:hidden">
            <span :class="!isOpen ? '' : 'hidden'">
              <i class="fas fa-bars"></i>
            </span>
            <span :class="isOpen ? '' : 'hidden'">
              <i class="fas fa-times"></i>
            </span>
          </div>
        </div>
        <div :class="isOpen ? '' : 'hidden'" class="flex-grow flex-col justify-end pt-4 lg:flex lg:flex-row lg:pt-0">
          <a href="#" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">Service</a>
          <a href="#" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">Works</a>
          <a href="#" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">Insight</a>
          <a href="#" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">Support</a>
          <a href="#" class="mx-4 mb-4 mt-4 flex h-12 items-center justify-center rounded-lg bg-blue-600 px-6 text-white lg:mb-0 lg:ml-4 lg:mr-0 lg:mt-0">Contact Us</a>
        </div>
      </div>
      <div class="mt-2 flex h-8 w-full items-center border-t border-gray-100 px-2 pt-2 text-sm font-semibold">
        <div>
          <a href=""> <i class="fas fa-chevron-left mr-2"></i> Prev </a>
        </div>
        <div class="flex-grow text-center">
          <a href="" class="underline">Back to main</a>
        </div>
        <div>
          <a href=""> Next<i class="fas fa-chevron-right ml-2"></i> </a>
        </div>
      </div>
    </div>
  </nav>
</div>

<div class="w-full lg:h-40">
  <nav class="z-50 w-full p-6" x-data="{ isOpen: false }">
    <div class="container mx-auto w-full rounded-lg bg-white bg-opacity-80 p-2 backdrop-blur backdrop-filter">
      <div class="flex flex-col lg:flex-row">
        <div class="flex h-12 items-center">
          <img
                src="https://placehold.co/120x48"
                class="h-full"
                alt="Logo"
              />
          <div class="flex-grow lg:hidden"></div>
          <div x-on:click="isOpen = !isOpen" x-on:click.outside="isOpen = false" class="flex w-12 cursor-pointer items-center justify-center lg:hidden">
            <span :class="!isOpen ? '' : 'hidden'">
              <i class="fas fa-bars"></i>
            </span>
            <span :class="isOpen ? '' : 'hidden'">
              <i class="fas fa-times"></i>
            </span>
          </div>
        </div>
        <div :class="isOpen ? '' : 'hidden'" class="flex-grow flex-col justify-end pt-4 lg:flex lg:flex-row lg:pt-0">
          <a href="#" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">Service</a>
          <a href="#" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">Works</a>
          <a href="#" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">Insight</a>
          <a href="#" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">Support</a>
          <a href="#" class="mx-4 mb-4 mt-4 flex h-12 items-center justify-center rounded-lg bg-blue-600 px-6 text-white lg:mb-0 lg:ml-4 lg:mr-0 lg:mt-0">Contact Us</a>
        </div>
      </div>
      <div class="mt-2 flex h-8 w-full items-center border-t border-gray-100 px-2 pt-2 text-sm font-semibold">
        <div>
          <a href=""> <i class="fas fa-chevron-left mr-2"></i> Prev </a>
        </div>
        <div class="flex-grow text-center">
          <a href="" class="underline">Back to main</a>
        </div>
        <div>
          <a href=""> Next<i class="fas fa-chevron-right ml-2"></i> </a>
        </div>
      </div>
    </div>
  </nav>
</div>

<div space="w:[100%] tw-lg:h:vast">
  <nav space="w:[100%] p:medium-3x" class="z-50" x-data="{ isOpen: false }">
    <div layout="container" space="m-x:auto w:[100%] p:small" visual="rounded:medium bg:white" class="bg-opacity-80 backdrop-blur backdrop-filter">
      <div layout="flex col tw-lg:row">
        <div layout="flex items:center" space="h:big">
          <img
                src="https://placehold.co/120x48"
                class="h-full"
                alt="Logo"
              />
          <div layout="grow tw-lg:hidden"></div>
          <div x-on:click="isOpen = !isOpen" x-on:click.outside="isOpen = false" layout="flex items:center justify:center tw-lg:hidden" space="w:big" visual="cursor:pointer">
            <span :class="!isOpen ? '' : 'hidden'">
              <i class="fas fa-bars"></i>
            </span>
            <span :class="isOpen ? '' : 'hidden'">
              <i class="fas fa-times"></i>
            </span>
          </div>
        </div>
        <div :class="isOpen ? '' : 'hidden'" layout="grow col justify:end tw-lg:flex tw-lg:row" space="p-t:medium tw-lg:p-t:none">
          <a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none">Service</a>
          <a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none">Works</a>
          <a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none">Insight</a>
          <a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none">Support</a>
          <a href="#" layout="flex items:center justify:center" space="m-x:medium m-b:medium m-t:medium h:big p-x:medium-3x tw-lg:m-b:none tw-lg:m-l:medium tw-lg:m-r:none tw-lg:m-t:none" visual="rounded:medium bg:blue-600 text:white">Contact Us</a>
        </div>
      </div>
      <div layout="flex items:center" space="m-t:small h:large w:[100%] p-x:small p-t:small" visual="border:gray-100 text-size:small font:tw-semibold" class="border-t">
        <div>
          <a href=""> <i space="m-r:small" class="fas fa-chevron-left"></i> Prev </a>
        </div>
        <div layout="grow" visual="text:center">
          <a href="" visual="underline">Back to main</a>
        </div>
        <div>
          <a href=""> Next<i space="m-l:small" class="fas fa-chevron-right"></i> </a>
        </div>
      </div>
    </div>
  </nav>
</div>

<div space="w:[100%] tw-lg:h:vast">
  <nav space="w:[100%] p:medium-3x" class="z-50" x-data="{ isOpen: false }">
    <div layout="container" space="m-x:auto w:[100%] p:small" visual="rounded:medium bg:white" class="bg-opacity-80 backdrop-blur backdrop-filter">
      <div layout="flex col tw-lg:row">
        <div layout="flex items:center" space="h:big">
          <img
                src="https://placehold.co/120x48"
                class="h-full"
                alt="Logo"
              />
          <div layout="grow tw-lg:hidden"></div>
          <div x-on:click="isOpen = !isOpen" x-on:click.outside="isOpen = false" layout="flex items:center justify:center tw-lg:hidden" space="w:big" visual="cursor:pointer">
            <span :class="!isOpen ? '' : 'hidden'">
              <i class="fas fa-bars"></i>
            </span>
            <span :class="isOpen ? '' : 'hidden'">
              <i class="fas fa-times"></i>
            </span>
          </div>
        </div>
        <div :class="isOpen ? '' : 'hidden'" layout="grow col justify:end tw-lg:flex tw-lg:row" space="p-t:medium tw-lg:p-t:none">
          <a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none">Service</a>
          <a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none">Works</a>
          <a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none">Insight</a>
          <a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none">Support</a>
          <a href="#" layout="flex items:center justify:center" space="m-x:medium m-b:medium m-t:medium h:big p-x:medium-3x tw-lg:m-b:none tw-lg:m-l:medium tw-lg:m-r:none tw-lg:m-t:none" visual="rounded:medium bg:blue-600 text:white">Contact Us</a>
        </div>
      </div>
      <div layout="flex items:center" space="m-t:small h:large w:[100%] p-x:small p-t:small" visual="border:gray-100 text-size:small font:tw-semibold" class="border-t">
        <div>
          <a href=""> <i space="m-r:small" class="fas fa-chevron-left"></i> Prev </a>
        </div>
        <div layout="grow" visual="text:center">
          <a href="" visual="underline">Back to main</a>
        </div>
        <div>
          <a href=""> Next<i space="m-l:small" class="fas fa-chevron-right"></i> </a>
        </div>
      </div>
    </div>
  </nav>
</div>