# Fake Tabs

![My eBay activity, messages and account links that appear like tabs](/files/-LXQcEr8S-QsT0uBtoAM)

### Introduction

Fake tabs have the appearance of dynamic [tabs](/mindpatterns/disclosure/tabs.md), but perform a full page load when clicked.

### Working Examples

Experience the pattern in action on our companion [eBay MIND Patterns examples website](http://ebay.github.io/mindpatterns/disclosure/tabs/).

Examine the required markup structure on the [bones GitHub project](https://github.com/ianmcburnie/bones#user-content-fake-tabs).

View a fully styled example on the [eBay Skin website](https://opensource.ebay.com/skin/component/tabs/).

### Best Practices

Fake tabs is a navigation pattern. The "tabs" are simply a list of links with no additional JavaScript behaviour. For *dynamic* tabs that hide & show content, please consult the disclosure [tabs](/mindpatterns/disclosure/tabs.md) pattern.

### Interaction Design

This section provides interaction design for keyboard, screen reader and pointing devices.

#### Keyboard

Tab key navigates the fake tabs.

The currently "selected" fake tab can remain in the tabindex.

Enter key activates a fake tab (i.e. it navigates to the link href).

#### Screen Reader

Upon entering the list, the number of list items will be announced.

The "current" fake tab should be announced as the "current" item (exact words may differ depending on the screen reader).

### Developer Guide

Fake Tabs require no JavaScript, they are simply an ordered list of links. 

```markup
<div class="fake-tabs">
    <ul class="fake-tabs__items">
        <li class="fake-tabs__item fake-tabs__item--current">
            <a aria-current="page" href="http://www.ebay.com">Page 1</a>
        </li>
        <li class="fake-tabs__item">
            <a href="http://www.ebay.com">Page 2</a>
        </li>
        <li class="fake-tabs__item">
            <a href="http://www.ebay.com">Page 3</a>
        </li>
    </ul>
    <!-- optional -->
    <div class="fake-tabs__content">
        <div class="fake-tabs__cell">
            <!-- content -->
        </div>
    </div>
</div>

```

Fake tabs may optionally be wrapped inside of a navigation landmark region to aid discoverability.

### ARIA Reference

* **aria-current**: provides AT with programmatic state on the fake-tab that reflects the current URL.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ebay.gitbook.io/mindpatterns/navigation/fake-tabs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.