• EnglishEspañol日本語한국어Português
  • Log inStart now

Tabs

Tabs, like collapsers, present various sets of information in a condensed space. They're particularly helpful as a way to present options, or to show off product functionality. Tabs present their information all at once, and unlike collapsers, you can't have multiple tabs from the same group visible at once. Tabs are framed by <Tabs> tags, with the <TabsBar> subgroup responsible for formatting the "tabs" themselves, and the <TabsPages> controlling the formatting and presentation of the copy under each individual tab.

For each <TabsBarItem>, set the ID for the tab in the id="YOUR_ID_HERE" section, and match the content of the <TabsPages> by putting a matching ID in the appropriate <TabsPageItem id="YOUR_ID_HERE"> section.

Tip

The Keyboard Maestro for the Tabs component is kktabgroup.

Example: Horizontal tabs

Code

<Tabs>
<TabsBar>
<TabsBarItem id="1">Tab one</TabsBarItem>
<TabsBarItem id="2">Tab two</TabsBarItem>
<TabsBarItem id="3">Tab three</TabsBarItem>
</TabsBar>
<TabsPages>
<TabsPageItem id="1">Contents for tab one</TabsPageItem>
<TabsPageItem id="2">Contents for tab two</TabsPageItem>
<TabsPageItem id="3">Contents for tab three</TabsPageItem>
</TabsPages>
</Tabs>;

Output

Contents for tab one

Contents for tab two

Contents for tab three

Copyright © 2024 New Relic Inc.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.