TabNav looks like Tabs but is not a tab set. Its items are links that navigate to a different URL, so it renders a <nav> landmark containing anchors rather than the ARIA tab pattern.

That distinction is deliberate, and it is why TabNav does not use role="tablist", role="tab", aria-selected or aria-controls, even though it shares an implementation with Tabs. Those attributes describe a widget that shows and hides panels in place; announcing a link that way would tell a screen reader user to expect a panel that never appears. The active item is conveyed with aria-current instead.

Reach for Tabs when the content switches without navigating, and TabNav when each item is a destination.

ARIA

table
Element	Attribute	Description
Tab	`aria-current`	Set to `page` on the active tab, so the current location is announced rather than being distinguishable only by color and underline.
Tab	`aria-disabled`	Marks a disabled tab while leaving it focusable, so keyboard users are not stranded.

Active tab

The active tab can be set two ways, and aria-current follows both: with activeTab on TabNav (matched against each tab's href), or with isActive on an individual tab. Only one tab should be active at a time.

Keyboard

Because the items are links, they are in the normal tab order — there is no roving tabindex and no arrow-key navigation, which is what a screen reader user would expect of navigation rather than a tab set.

table
Key	Function
`Enter`	Follows the focused tab's link.
`Tab`	Moves focus to the next tab or focusable element.
`Shift`+`Tab`	Moves focus to the previous tab or focusable element.

TabNav

Structure

ARIA

Active tab

Keyboard

On this page