tabs.mdx

title	tags	redirects
Tabs	Basic style guide Style guide quick reference

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.

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

Tab one Tab two Tab three

<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>