# Tab

With Retype, a Tab component is super simple to configure by surrounding a block of text with +++ and including a title for the tab.

+++ Tab 1
This is a Tab
+++

The tab title must be separated from the opening +++ by one space. The pattern +++ Tab will work as expected, and +++Tab 1 will not.

Multiple Tabs can be configured by stacking multiple +++ blocks and adding a title for each tab.

+++ Tab 1
This is a Tab
+++ Tab 2
This is another Tab
+++ Tab 3
Wow! Yet another tab :+1:
+++

Extra empty lines at the start or end of the Tab are allowable, although ignored. Tabs can contain any number of leading or trailing empty lines.

+++ Tab 1

This is a Tab

+++ Tab 2
This is another Tab
+++ Tab 3

Wow! Yet another tab :+1:

+++

Each Tab is an anchor that allows for linking directly to the tab by passing the anchor in a URL.

If the tab anchor is passed in the URL, when the page loads, the page will be automatically scrolled to that tab position and the tab will be selected.

To get the tab URL with the anchor, right-click on the tab and select Copy Link Address.

[Tab anchor link](#tab-3)

Tab anchor link

Custom id and CSS class attributes can be applied to a Tab using the {#id .class} syntax.

+++ Tab 1 {#getting-started .highlight}
This Tab has a custom id and class.
+++ Tab 2
This is another Tab.
+++

Linking to the custom id scrolls to and activates the Tab: Go to getting started