Skip to content Skip to main navigation Report an accessibility issue

Tabs

Documentation

Usage: Tabs can be a handy way of organizing bits of content on a page.

Do
  • Pay particular attention to the role attributes and aria-controls in these examples. They make your content more accessible.
Don’t
  • Don’t use tabs to tuck away content you’d rather not look at. Clearer, concise writing or making hard editing choices will be a better choice.
  • There is no way to direct link to a tab that is not open, so do not hide content behind a tab that you expect to be easy to find.

Example

Home Content

Profile Content

Messages Content

Settings Content

Shortcodes

[tabs]
[tab title="Home"]Home Content[/tab]
[tab title="Profile"]Profile Content[/tab]
[tab title="Messages"]Messages Content[/tab]
[tab title="Settings"]Settings Content[/tab]
[/tabs]