{"id":466,"date":"2018-06-11T16:39:53","date_gmt":"2018-06-11T16:39:53","guid":{"rendered":"http:\/\/bfuller.local\/wordpress\/styleguide\/?page_id=466"},"modified":"2025-11-10T15:51:12","modified_gmt":"2025-11-10T15:51:12","slug":"tabs","status":"publish","type":"page","link":"https:\/\/www.uri.edu\/wordpress\/components\/tabs\/","title":{"rendered":"Tabs"},"content":{"rendered":"\n

Use tabs to display content that has a correlation but is not directly related. The tabs themselves serve as an information architecture for the page, so ensure that there is a common thread that holds them together.<\/p>\n\n\n

\n\n

When in doubt, avoid using tabs.<\/strong> A cardinal rule of web design is “Don\u2019t hide content” because visitors will not find it. Tabs break that rule.<\/p>\n\n<\/div><\/section>\n\n\n

\n\n\n\n

Overview<\/h2>\n\n\n\n

Here’s an example set of tabs:<\/p>\n\n\n

\n

Apples<\/h1>\n\n

Here’s some content about apples.<\/p>\n\n\n\n

Each tab should elaborate on a particular subtopic that relates to an overarching theme, set of steps, or otherwise common thread. Tabs can include multiple paragraphs, lists, links<\/a>, images, and other components, like buttons and cards.<\/p>\n\n\nLearn more<\/a>\n<\/section>\n\n

Oranges<\/h1>\n
\"\"<\/div>

A fruit apart<\/h2>

Dissect the true differences between apples and oranges.<\/p><\/div><\/div>

Chop, Chop<\/div><\/a><\/div>\n\n\n

Here’s some content about oranges.<\/p>\n\n\n\n

Each tab should elaborate on a particular subtopic that relates to an overarching theme, set of steps, or otherwise common thread. Tabs can include multiple paragraphs, lists, links<\/a>, images, and other components, like buttons and cards.<\/p>\n\n<\/section>\n\n

Bananas<\/h1>\n
\n
\"\"<\/figure>\n<\/div>\n\n\n

Here’s some content about bananas.<\/p>\n\n\n\n

Each tab should elaborate on a particular subtopic that relates to an overarching theme, set of steps, or otherwise common thread. Tabs can include multiple paragraphs, lists, links<\/a>, images, and other components, like buttons and cards.<\/p>\n\n<\/section>\n<\/div><\/section>\n\n\n

Tabs should not be the lead element on a page, instead, a context for them should be established. Tabs should never exceed 7 items, and they should not be the primary means to discover information.<\/p>\n\n\n\n

Adding Tabs<\/h2>\n\n\n\n

On sites using the Block Editor, tabs (\"Tabs) can be added from the block library, under the Component Library section. Tab content can be edited directly, and options can be set in the sidebar.<\/p>\n","protected":false},"excerpt":{"rendered":"

Use tabs to display content that has a correlation but is not directly related. The tabs themselves serve as an information architecture for the page, so ensure that there is a common thread that holds them together. Overview Here’s an example set of tabs: Tabs should not be the lead element on a page, instead, […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":188,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-466","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/466","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/comments?post=466"}],"version-history":[{"count":13,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/466\/revisions"}],"predecessor-version":[{"id":2812,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/466\/revisions\/2812"}],"up":[{"embeddable":true,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/188"}],"wp:attachment":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/media?parent=466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}