# Core/TabNav - Design

TabNav provides a horizontal or vertical navigation styled as tabs. Tab items are links that redirect to URLs. With `subItems`, horizontal tabs open a dropdown menu; vertical tabs use an inline indented list (Tab Nav | Vertical in Figma).

Tabs and TabNav organize and manage content allowing users to navigate between different sections within the current context.

* **Tabs** organize content sections to be displayed at one time. They are displayed in Modals, Drawers, and other content panels.
* **TabNav** is a navigation menu with links, styled as tabs. They are used in Page Headers and other places where navigation is needed.

## Properties

### Label

Every tab must have a brief but descriptive label.

### Variant

TabNav has two variants:

* **Default**: a single navigational link.
* **Dropdown**: a dropdown menu that displays a ListBox with additional navigational links.

## Content

### Labels

Tab labels should be one or two words, using title case (Tab Label). Labels should be less than 12 characters, with a maximum of 32 characters.

## Best Practices

**Do**

<p>
  Do follow the maximum character length of tab labels.
</p>

**Don't**

<p>
  Don't exceed the 32 maximum character length.
</p>

**Do**

<p>
  Do keep tab labels short and concise.
</p>

**Don't**

<p>
  Don't wrap tab labels.
</p>

## Accessibility

### Keyboard interaction

| Key                          | Function                                                                                                                                                                   |
| ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `Tab` / `Shift + Tab`        | Moves focus into the tab list, putting focus onto the active tab. When the tab list has focus, moves focus to the next focusable element (generally within the tab panel). |
| `Left Arrow` / `Up Arrow`    | Moves focus to, and activate, the previous tab. If focus is on the first tab, move focus to the last tab. Up performs the same action when `tabPlacement="vertical"`.      |
| `Right Arrow` / `Down Arrow` | Moves focus to, and activate, the next tab. If focus is on the last tab, move focus to the first tab. Down performs the same action when `tabPlacement="vertical"`.        |
| `Shift+F10`                  | Opens the menu for tabs with a dropdown.                                                                                                                                   |

### ARIA considerations

TabNav uses link-based navigation. The following apply:

* The container has `role="navigation"` with an `aria-label` for the navigation.
* Active nav links have `aria-current="page"` set.
* Tabs that contain a dropdown use a button with `aria-haspopup="menu"` and `aria-expanded` set.
* Dropdown menu items use the Menu component with appropriate roles.
* The tab bar does not add outer spacing for surrounding layout. Handle page-level spacing where `TabNav` is composed.
* Interactive tabs and sub-items keep the `.tab` styles on the focusable element so hover, active, and focus treatments match the hit target.

### Orientation

Use `tabPlacement="horizontal"` (default) for a horizontal tab bar at the bottom, or `tabPlacement="vertical"` for a vertical tab bar on the left.