Skip link

Configurator

LiveSkip link: click into the stage and press Tab, the skip link appears on focus. The header variant sits at the top of this stage (on a page: at the top of the viewport).

Empfehlungen überspringen

Sneaker

Jeans

Jacken

After the skipped section

Alle Kategorien

HTML

<div style="position:relative;transform:translateZ(0);min-height:220px;padding-top:88px">
  <oc-skip-link-v1>
    <oc-button-v1 variant="secondary" size="50" icon-type-left="skip-link">Empfehlungen überspringen</oc-button-v1>
  </oc-skip-link-v1>
  <div style="display:flex;flex-wrap:wrap;gap:8px">
    <oc-button-v1 variant="secondary" size="50">Sneaker</oc-button-v1>
    <oc-button-v1 variant="secondary" size="50">Jeans</oc-button-v1>
    <oc-button-v1 variant="secondary" size="50">Jacken</oc-button-v1>
  </div>
  <p class="demo-label" style="margin-top:16px">After the skipped section</p>
  <oc-link-v2><a href="#">Alle Kategorien</a></oc-link-v2>
</div>

Usage

Anatomy

Zur Hauptnavigation

Zur Seitennavigation

Zum Inhalt

1 2

Skip link container (appears on keyboard focus)
Button 50, secondary, with skip-link icon

LiveAnatomy

HTML

<div class="anatomy">
<div style="display:inline-flex;gap:8px;padding:8px;border-radius:var(--oc-component-skip-link-border-radius,16px);background:var(--oc-semantic-color-background-above,#fff);filter:var(--oc-semantic-shadow-above)"><oc-button-v1 variant="secondary" size="50" icon-type-left="skip-link" style="flex:none">Zur Hauptnavigation</oc-button-v1><oc-button-v1 variant="secondary" size="50" icon-type-left="skip-link" style="flex:none">Zur Seitennavigation</oc-button-v1><oc-button-v1 variant="secondary" size="50" icon-type-left="skip-link" style="flex:none">Zum Inhalt</oc-button-v1></div>
<span class="anatomy-pin" style="left:0%;top:0%">1</span>
<span class="anatomy-pin" style="left:18%;top:100%">2</span>
<ol class="anatomy-key"><li data-n="1">Skip link container (appears on keyboard focus)</li><li data-n="2">Button 50, secondary, with skip-link icon</li></ol>

Variants

The header variant consists of several buttons that appear centered at the top of the page. It offers up to four targets, depending on which areas are available on the respective page and currently visible. "Hauptnavigation", "Seitennavigation" and "Filter" are not visible on breakpoints S and M and therefore do not appear as skip‑link options. In the app, „Zum Inhalt“ is also not needed because there is no header.

The in‑page variant is used within content to skip sections like recommendations or long navigation blocks. It mostly features a single button. Cinemas use an in‑page skip link as the first focusable element to allow skipping large item lists.

Behaviour

Interaction

Skip links remain hidden until they receive focus via keyboard. Activating a skip link triggers an immediate focus jump to or after a target; the page scrolls automatically if the target is out of view.

The header variant is positioned absolutely at the top of the page and centered. The in‑page variant appears just above its corresponding section.

States

Skip links use buttons inside, so the states are derived from them.

Fitting

The skip link container fits its content.

fit-content

Zur Hauptnavigation

Zur Seitennavigation

Zum Inhalt

Livefitting

HTML

<div style="display:inline-flex;gap:8px;padding:8px;outline:1px dashed #e5006b;outline-offset:4px;border-radius:var(--oc-component-skip-link-border-radius,16px);background:var(--oc-semantic-color-background-above,#fff);filter:var(--oc-semantic-shadow-above)"><oc-button-v1 variant="secondary" size="50" icon-type-left="skip-link" style="flex:none">Zur Hauptnavigation</oc-button-v1><oc-button-v1 variant="secondary" size="50" icon-type-left="skip-link" style="flex:none">Zur Seitennavigation</oc-button-v1><oc-button-v1 variant="secondary" size="50" icon-type-left="skip-link" style="flex:none">Zum Inhalt</oc-button-v1></div>

Placement

The header variant is positioned absolutely at the top of the page and centered.

The in‑page variant appears at the start of its corresponding section with a offset of 8px horizontally and vertically.

Best practices

Use skip links where they help users avoid long or repetitive sections. Keep their usage focused and consistent. They are particularly helpful in areas with large or repeating content and should be offered whenever they significantly reduce keyboard navigation effort.

Don'tDon’t place multiple skip‑link containers after each other.

A skip link should never directly lead to another skip link.

DoPlace several header skip links inside one shared skip‑link container.

Users should encounter all consecutive skip link options in a single focus stop, not scattered across separate containers.

Zur Navigation

Zu den Filtern

Zum Inhalt

LiveDo

HTML

<div style="display:inline-flex;gap:8px;padding:8px;border-radius:var(--oc-component-skip-link-border-radius,16px);background:var(--oc-semantic-color-background-above,#fff);filter:var(--oc-semantic-shadow-above)"><oc-button-v1 variant="secondary" size="50" icon-type-left="skip-link" style="flex:none">Zur Navigation</oc-button-v1><oc-button-v1 variant="secondary" size="50" icon-type-left="skip-link" style="flex:none">Zu den Filtern</oc-button-v1><oc-button-v1 variant="secondary" size="50" icon-type-left="skip-link" style="flex:none">Zum Inhalt</oc-button-v1></div>

DoUse in‑page skip links where they are practically helpful.

Apply them in sections that are long or repetitive.

Don'tDon’t overuse in‑page skip links.

Only insert them where they add real value; too many skip options create noise rather than accessibility.

Content guidelines

Header skip links always follow the pattern „Zurm [Bereich]“ (e.g., „Zu den Filtern“).
In‑page skip links always follow the pattern „[Bereich] überspringen“ (e.g., „Empfehlungen überspringen“).

Accessibility

Skip links must be reachable early in the tab order to meet WCAG’s bypass‑blocks requirement (2.4.1).

Status

Button

Implementation

Live demo

LiveReal OTTO components, rendered by the OTTO component runtime

Code

Version	Tag	Status	API
v1	`<oc-skip-link-v1>`	Stable, allowed for generation	SkipLinkV1

Overview (v1)

The skip link component provides a mechanism for users to quickly navigate to the main content of a page, bypassing repetitive navigation links. It is particularly useful for improving accessibility, allowing users with assistive technologies to skip directly to the main content without having to tab through all the navigation links.

Default variation

überspringen

Dummy

HTML

<div class="relative oc-grid oc-gap-100">
<oc-skip-link-v1>
  <oc-button-v1>überspringen</oc-button-v1>
</oc-skip-link-v1>
<oc-button-v1>1</oc-button-v1>
<oc-button-v1>2</oc-button-v1>
<oc-button-v1>3</oc-button-v1>
<oc-button-v1>4</oc-button-v1>
<oc-button-v1>5</oc-button-v1>
<div class="oc-mt-100">
<oc-button-v1>Dummy</oc-button-v1>
<style>
.relative {
  position: relative;
}
</style>

Configuration

The skip link component offers a slot for buttons which you can use to let users skip to the content of a page. This component is configurable, allowing you to tailor its features and appearance to your specific needs. To explore all the available options and adjust the component, use the component configurator and see the changes affect the component in real-time.

Usage guidelines

Before integrating the skip link component into your project, make sure you have correctly installed the OTTO components package. Look through the variations page for examples of possible component variations. Here, you can discover both common and specific variations that address different use cases.

Accessibility

The skip link component comes with a set of built-in accessibility features to ensure a seamless experience for all users.

As soon as the skip link component is focused, the skip link menu becomes visible.

Key	Action
`Tab`	Focuses the first button, then opens the skip link menu. Use `Tab` to move between buttons.
`Enter` / `Space`	Selects the focused option and skips to or after the target section.

In the skip link menu, pressing Tab after the last button moves focus to the next focusable element, usually the next focusable element in the main content area.

Note: In addition to keyboard navigation, users may navigate the skip link menu using assistive technologies such as screen readers, or with custom navigation configurations depending on their accessibility needs.

To enable the skip link functionality, you need to define skip link targets in your HTML structure. These targets are identified using the data-skiplink attribute, which should be added to the main sections of your page that users may want to skip to. Here is an example of how to set up these targets:

<nav data-skiplink="main-navigation">
  <!-- Main navigation content -->
</nav>
<aside data-skiplink="sub-navigation">
  <!-- Sub navigation content -->
</aside>
<section data-skiplink="filters">
  <!-- Filter options content -->
</section>
<main data-skiplink="main-content">
  <!-- Main content of the page -->
</main>

The identifiers used in the data-skiplink attributes are a fixed set of values recognized by the skip link component. These identifiers correspond to the buttons in the skip link menu, allowing users to quickly navigate to these sections of the page:

ID	Displayed Name
main-navigation	Zur Hauptnavigation
sub-navigation	Zur Subnavigation
filters	Zu den Filtern
main-content	Zum Inhalt

Please be aware that your skip link will only be shown if your target element is both visible and focusable.

Configuration (v1)

Configure the skip link component with the controls below and see the changes live in the preview canvas. Click the Show code button within the preview canvas to see the source code for the current component configuration.

überspringen

Dummy

HTML

<div class="relative oc-grid oc-gap-100">
<oc-skip-link-v1>
  <oc-button-v1>überspringen</oc-button-v1>
</oc-skip-link-v1>
<oc-button-v1>1</oc-button-v1>
<oc-button-v1>2</oc-button-v1>
<oc-button-v1>3</oc-button-v1>
<oc-button-v1>4</oc-button-v1>
<oc-button-v1>5</oc-button-v1>
<div class="oc-mt-100">
<oc-button-v1>Dummy</oc-button-v1>
<style>
.relative {
  position: relative;
}
</style>

Interactive configurator (Storybook controls); every option is listed in the API section of this file.

API v1

API: `<oc-skip-link-v1>` (SkipLinkV1)

The skip link component provides a way for users to skip directly to content of a page, bypassing repetitive navigation links. It is particularly useful for keyboard and screen reader users, enhancing accessibility.

Attributes / properties

Attribute	Type	Default	Required	Description
`variant`	`"in-page" \| "header"`	`"in-page"`	no	Sets the variant of the skip link. The `in-page` variant positions the skip link within top left corner of the parent element. The `header` variant places the skip link fixed at the top of the page and horizontal centered.

Slots

Slot	Required	Description
`default`	yes	Sets the content of the skip link. This slot is required and should contain a focusable element, such as an oc-button-v1. Per default the buttons will skip to the first focusable element after the current parent element. Alternative the buttons can have the following attributes: - `data-oc-skip-link-v1-to` for skipping to a specific element, - `data-oc-skip-link-v1-after` for skipping to the first focusable element after the current parent element.

Events

Event	Detail type	Description
`oc-property-change`	`OcSkipLinkV1Events["oc-property-change"]`	Whenever a property value changes, this event triggers. Use this event to track all property changes within the component. Refer to the Events documentation for more information.
`oc-mount`	`{ component: string; }`	Fired when the component is mounted to the DOM. The event is fired when the onMount hook of the component is called by the runtime.
`oc-unmount`	`{ component: string; }`	Fired when the component is unmounted from the DOM. The event is fired when the function returned by the onMount hook of the component is called by the runtime.

Variations (v1)

Variations

Listed below are the most common variations of the skip link component as well as specific component variations for different use cases.

You can explore all available options using the component configurator, adjust the component to your needs, and see the changes live in a preview canvas.

Default

Story: components-skip-link-variations--default · tags: components, skip-link, 1, variations

Default behavior of the Skip Link component. Buttons from 1 to 5 can be skipped using the skip link.

überspringen

Dummy

HTML

<div class="relative oc-grid oc-gap-100">
<oc-skip-link-v1>
  <oc-button-v1>überspringen</oc-button-v1>
</oc-skip-link-v1>
<oc-button-v1>1</oc-button-v1>
<oc-button-v1>2</oc-button-v1>
<oc-button-v1>3</oc-button-v1>
<oc-button-v1>4</oc-button-v1>
<oc-button-v1>5</oc-button-v1>
<div class="oc-mt-100">
<oc-button-v1>Dummy</oc-button-v1>
<style>
.relative {
  position: relative;
}
</style>

Story source (TypeScript, verbatim from Storybook)

{
  name: "Default",
  args: {},
  render() {
    return html`
      <div class="relative oc-grid oc-gap-100">
        <oc-skip-link-v1>
          <oc-button-v1>überspringen</oc-button-v1>
        </oc-skip-link-v1>
        <oc-button-v1>1</oc-button-v1>
        <oc-button-v1>2</oc-button-v1>
        <oc-button-v1>3</oc-button-v1>
        <oc-button-v1>4</oc-button-v1>
        <oc-button-v1>5</oc-button-v1>
      </div>

      <div class="oc-mt-100">
        <oc-button-v1>Dummy</oc-button-v1>
      </div>

      <style>
        .relative {
          position: relative;
        }
      </style>
    `;
  }
}

Story: components-skip-link-variations--skip-to · tags: components, skip-link, 1, variations

Skip to a specific element using the data-oc-skip-link-v1-to attribute. This demonstrates how to skip directly to the 6th button when the skip link is activated.

Zur 6 springen

HTML

<div class="relative oc-grid oc-gap-100">
<oc-skip-link-v1>
  <oc-button-v1 data-oc-skip-link-v1-to="#button6">Zur 6 springen </oc-button-v1>
</oc-skip-link-v1>
<oc-button-v1>1</oc-button-v1>
<oc-button-v1>2</oc-button-v1>
<oc-button-v1>3</oc-button-v1>
<oc-button-v1>4</oc-button-v1>
<oc-button-v1>5</oc-button-v1>
<oc-button-v1 id="button6">6</oc-button-v1>
<oc-button-v1>7</oc-button-v1>
<oc-button-v1>8</oc-button-v1>
<oc-button-v1>9</oc-button-v1>
<oc-button-v1>10</oc-button-v1>
<style>
.relative {
  position: relative;
}
</style>

Story source (TypeScript, verbatim from Storybook)

{
  name: "Skip To",
  render() {
    return html`
      <div class="relative oc-grid oc-gap-100">
        <oc-skip-link-v1>
          <oc-button-v1 data-oc-skip-link-v1-to="#button6">Zur 6 springen </oc-button-v1>
        </oc-skip-link-v1>
        <oc-button-v1>1</oc-button-v1>
        <oc-button-v1>2</oc-button-v1>
        <oc-button-v1>3</oc-button-v1>
        <oc-button-v1>4</oc-button-v1>
        <oc-button-v1>5</oc-button-v1>

        <oc-button-v1 id="button6">6</oc-button-v1>
        <oc-button-v1>7</oc-button-v1>
        <oc-button-v1>8</oc-button-v1>
        <oc-button-v1>9</oc-button-v1>
        <oc-button-v1>10</oc-button-v1>
      </div>

      <style>
        .relative {
          position: relative;
        }
      </style>
    `;
  }
}

Skip After

Story: components-skip-link-variations--skip-after · tags: components, skip-link, 1, variations

Skip after a specific element using the data-oc-skip-link-v1-after attribute. This allows skipping all buttons after the 5th button when the skip link is activated.

5 überspringen

HTML

<div class="relative oc-grid oc-gap-100">
<oc-skip-link-v1>
  <oc-button-v1
    variant="secondary"
    size="50"
    data-oc-skip-link-v1-after="#button5"
    icon-type-left="skip-link"
    >5 überspringen
  </oc-button-v1>
</oc-skip-link-v1>
<oc-button-v1>1</oc-button-v1>
<oc-button-v1>2</oc-button-v1>
<oc-button-v1>3</oc-button-v1>
<oc-button-v1>4</oc-button-v1>
<oc-button-v1 id="button5">5</oc-button-v1>
<oc-button-v1>6</oc-button-v1>
<oc-button-v1>7</oc-button-v1>
<oc-button-v1>8</oc-button-v1>
<oc-button-v1>9</oc-button-v1>
<oc-button-v1>10</oc-button-v1>
<style>
.relative {
  position: relative;
}
</style>

Story source (TypeScript, verbatim from Storybook)

{
  name: "Skip After",
  render() {
    return html`
      <div class="relative oc-grid oc-gap-100">
        <oc-skip-link-v1>
          <oc-button-v1
            variant="secondary"
            size="50"
            data-oc-skip-link-v1-after="#button5"
            icon-type-left="skip-link"
            >5 überspringen
          </oc-button-v1>
        </oc-skip-link-v1>
        <oc-button-v1>1</oc-button-v1>
        <oc-button-v1>2</oc-button-v1>
        <oc-button-v1>3</oc-button-v1>
        <oc-button-v1>4</oc-button-v1>
        <oc-button-v1 id="button5">5</oc-button-v1>

        <oc-button-v1>6</oc-button-v1>
        <oc-button-v1>7</oc-button-v1>
        <oc-button-v1>8</oc-button-v1>
        <oc-button-v1>9</oc-button-v1>
        <oc-button-v1>10</oc-button-v1>
      </div>

      <style>
        .relative {
          position: relative;
        }
      </style>
    `;
  }
}

Multiple Skip Links

Story: components-skip-link-variations--multiple-skip-links · tags: components, skip-link, 1, variations

You can configure multiple skip links to skip to different sections or elements. This example shows how to add multiple items to the skip link menu, allowing users to navigate to corresponding elements. Here, the skip link allows skipping to the 6th button, skipping after the 10th button, and skipping all buttons, focusing the last "Dummy" button.

Zur 6 springen

10 überspringen

Alles überspringen

Dummy

HTML

<div class="relative oc-grid oc-gap-100">
<oc-skip-link-v1>
  <oc-button-v1 data-oc-skip-link-v1-to="#button6">Zur 6 springen </oc-button-v1>
  <oc-button-v1 data-oc-skip-link-v1-after="#button10">10 überspringen </oc-button-v1>
  <oc-button-v1>Alles überspringen</oc-button-v1>
</oc-skip-link-v1>
<oc-button-v1>1</oc-button-v1>
<oc-button-v1>2</oc-button-v1>
<oc-button-v1>3</oc-button-v1>
<oc-button-v1>4</oc-button-v1>
<oc-button-v1>5</oc-button-v1>
<oc-button-v1 id="button6">6</oc-button-v1>
<oc-button-v1>7</oc-button-v1>
<oc-button-v1>8</oc-button-v1>
<oc-button-v1>9</oc-button-v1>
<oc-button-v1 id="button10">10</oc-button-v1>
<oc-button-v1>11</oc-button-v1>
<oc-button-v1>12</oc-button-v1>
<oc-button-v1>13</oc-button-v1>
<oc-button-v1>14</oc-button-v1>
<oc-button-v1>15</oc-button-v1>
<div class="oc-mt-100">
<oc-button-v1>Dummy</oc-button-v1>
<style>
.relative {
  position: relative;
}
</style>

Story source (TypeScript, verbatim from Storybook)

{
  name: "Multiple Skip Links",
  render() {
    return html`
      <div class="relative oc-grid oc-gap-100">
        <oc-skip-link-v1>
          <oc-button-v1 data-oc-skip-link-v1-to="#button6">Zur 6 springen </oc-button-v1>
          <oc-button-v1 data-oc-skip-link-v1-after="#button10">10 überspringen </oc-button-v1>
          <oc-button-v1>Alles überspringen</oc-button-v1>
        </oc-skip-link-v1>
        <oc-button-v1>1</oc-button-v1>
        <oc-button-v1>2</oc-button-v1>
        <oc-button-v1>3</oc-button-v1>
        <oc-button-v1>4</oc-button-v1>
        <oc-button-v1>5</oc-button-v1>

        <oc-button-v1 id="button6">6</oc-button-v1>
        <oc-button-v1>7</oc-button-v1>
        <oc-button-v1>8</oc-button-v1>
        <oc-button-v1>9</oc-button-v1>
        <oc-button-v1 id="button10">10</oc-button-v1>

        <oc-button-v1>11</oc-button-v1>
        <oc-button-v1>12</oc-button-v1>
        <oc-button-v1>13</oc-button-v1>
        <oc-button-v1>14</oc-button-v1>
        <oc-button-v1>15</oc-button-v1>
      </div>

      <div class="oc-mt-100">
        <oc-button-v1>Dummy</oc-button-v1>
      </div>

      <style>
        .relative {
          position: relative;
        }
      </style>
    `;
  }
}

Header Variant

Story: components-skip-link-variations--header-variant · tags: components, skip-link, 1, variations

The header variant positions the skip link menu at a fixed position at the top of the page and centers it horizontally.

überspringen

Dummy

HTML

<div class="relative oc-grid oc-gap-100">
<oc-skip-link-v1 variant="header">
  <oc-button-v1>überspringen</oc-button-v1>
</oc-skip-link-v1>
<oc-button-v1>1</oc-button-v1>
<oc-button-v1>2</oc-button-v1>
<oc-button-v1>3</oc-button-v1>
<oc-button-v1>4</oc-button-v1>
<oc-button-v1>5</oc-button-v1>
<div class="oc-mt-100">
<oc-button-v1>Dummy</oc-button-v1>
<style>
.relative {
  position: relative;
}
</style>

Story source (TypeScript, verbatim from Storybook)

{
  name: "Header Variant",
  args: {},
  render() {
    return html`
      <div class="relative oc-grid oc-gap-100">
        <oc-skip-link-v1 variant="header">
          <oc-button-v1>überspringen</oc-button-v1>
        </oc-skip-link-v1>
        <oc-button-v1>1</oc-button-v1>
        <oc-button-v1>2</oc-button-v1>
        <oc-button-v1>3</oc-button-v1>
        <oc-button-v1>4</oc-button-v1>
        <oc-button-v1>5</oc-button-v1>
      </div>

      <div class="oc-mt-100">
        <oc-button-v1>Dummy</oc-button-v1>
      </div>

      <style>
        .relative {
          position: relative;
        }
      </style>
    `;
  }
}

Configurator

Usage

Anatomy

Variants

Behaviour

Interaction

States

Fitting

Placement

Best practices

Content guidelines

Accessibility

Status

Related components

Implementation

Live demo

Code

Overview (v1)

Default variation

Configuration

Usage guidelines

Accessibility

Keyboard navigation

Global page skip link targets

Configuration (v1)

Skip link configuration

API v1

Skip Link v1 API

API: <oc-skip-link-v1> (SkipLinkV1)

Attributes / properties

Slots

Events

Variations (v1)

Variations

Default

Skip To

Skip After

Multiple Skip Links

Header Variant

API: `<oc-skip-link-v1>` (SkipLinkV1)