Skip to content
HyperUI

No results found.

Back to application components

Skip Links

Skip link navigation components for keyboard navigation and screen reader support.

0/3 Dark Mode (Request)Updated: N/ANo commit information available.

Basic skip link

markmead

<a
  href="#mainContent"
  class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-full rounded-sm bg-blue-700 px-12 py-3 text-sm font-semibold text-white transition-transform hover:bg-blue-600 focus:translate-y-4 active:bg-blue-600"
>
  Skip to main content
</a>

Multiple skip links with dark background

markmead

<nav
  class="absolute top-0 left-1/2 w-full max-w-sm -translate-x-1/2 -translate-y-full rounded-sm bg-gray-100 p-4 transition-transform focus-within:translate-y-4"
  aria-label="Skip to"
>
  <p class="text-xs font-semibold tracking-wide text-gray-700 uppercase">Skip to:</p>

  <div class="mt-1 flex flex-wrap gap-2">
    <a
      href="#mainNavigation"
      class="text-sm font-medium text-blue-700 transition-colors hover:text-blue-600 active:text-blue-600"
    >
      Navigation
    </a>

    <a
      href="#mainContent"
      class="text-sm font-medium text-blue-700 transition-colors hover:text-blue-600 active:text-blue-600"
    >
      Content
    </a>

    <a
      href="#mainFooter"
      class="text-sm font-medium text-blue-700 transition-colors hover:text-blue-600 active:text-blue-600"
    >
      Footer
    </a>
  </div>
</nav>

Skip links with title and light background

markmead

<nav
  class="absolute inset-x-0 top-0 flex -translate-y-full items-center gap-3 rounded-sm bg-gray-100 p-4 transition-transform focus-within:translate-y-0"
  aria-label="Skip to"
>
  <p class="text-xs font-semibold tracking-wide text-gray-700 uppercase">Skip to:</p>

  <div class="flex flex-wrap gap-2">
    <a
      href="#mainNavigation"
      class="text-sm font-medium text-blue-700 transition-colors hover:text-blue-600 active:text-blue-600"
    >
      Navigation
    </a>

    <a
      href="#mainContent"
      class="text-sm font-medium text-blue-700 transition-colors hover:text-blue-600 active:text-blue-600"
    >
      Content
    </a>

    <a
      href="#mainFooter"
      class="text-sm font-medium text-blue-700 transition-colors hover:text-blue-600 active:text-blue-600"
    >
      Footer
    </a>
  </div>
</nav>

Related components

View all application components