Tabs

Tabs allow users to easily navigate between views while keeping the same context.

Overview

Resources

Install


yarn add @activecampaign/camp-components-tabs

Variations

In-page tabs are an intuitive way to present lots of content at once, without overwhelming the viewer. Use tabs only when users don’t need to see content from multiple tabs simultaneously.

Horizontal tabs


import * as Tabs from '@activecampaign/camp-components-tabs';
import Text from '@activecampaign/camp-components-text';
 
// Example of how to style tabs content.
const TabTextContent = styled(Text.Body)({
  padding: 'sp600 sp400',
});
 
<Tabs.Root defaultValue="tab1">
  <Tabs.List>
    <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
    <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
    <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
    <Tabs.Trigger value="tab4">Tab 4</Tabs.Trigger>
  </Tabs.List>
  <div className="c-TabsContentWrapper">
    <Tabs.Content value="tab1">
      <TabTextContent as="p">
        Donec rutrum congue leo eget malesuada. Donec sollicitudin molestie malesuada. Donec rutrum
        congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
        Cras ultricies ligula sed magna dictum porta. Sed porttitor lectus nibh. Donec rutrum congue
        leo eget malesuada. Sed porttitor lectus nibh. Proin eget tortor risus. Donec rutrum congue
        leo eget malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
        Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in
        ipsum id orci porta dapibus. Sed porttitor lectus nibh.
      </TabTextContent>
      <TabTextContent as="p">
        Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Donec rutrum congue
        leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus
        magna justo, lacinia eget consectetur sed, convallis at tellus. Sed porttitor lectus nibh.
        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
        Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.
      </TabTextContent>
    </Tabs.Content>
    <Tabs.Content value="tab2">
      <TabTextContent as="p">
        Sed porttitor lectus nibh. Proin eget tortor risus. Donec rutrum congue leo eget malesuada.
        Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ante
        ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque,
        auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id orci
        porta dapibus. Sed porttitor lectus nibh. Donec rutrum congue leo eget malesuada. Donec
        sollicitudin molestie malesuada. Donec rutrum congue leo eget malesuada. Curabitur arcu
        erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum
        porta. Sed porttitor lectus nibh. Donec rutrum congue leo eget malesuada.
      </TabTextContent>
      <TabTextContent as="p">
        Curabitur aliquet quam id dui posuere blandit. Curabitur aliquet quam id dui posuere
        blandit. Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta.
        Pellentesque in ipsum id orci porta dapibus. Vestibulum ac diam sit amet quam vehicula
        elementum sed sit amet dui. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
      </TabTextContent>
    </Tabs.Content>
    <Tabs.Content value="tab3">
      <TabTextContent as="p">
        Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla quis lorem ut libero
        malesuada feugiat. Donec rutrum congue leo eget malesuada. Sed porttitor lectus nibh. Nulla
        quis lorem ut libero malesuada feugiat. Proin eget tortor risus. Lorem ipsum dolor sit amet,
        consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus. Sed porttitor
        lectus nibh. Donec rutrum congue leo eget malesuada. Donec sollicitudin molestie malesuada.
        Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et,
        porttitor at sem. Cras ultricies ligula sed magna dictum porta. Sed porttitor lectus nibh.
        Donec rutrum congue leo eget malesuada.
      </TabTextContent>
      <TabTextContent as="p">
        Curabitur aliquet quam id dui posuere blandit. Curabitur aliquet quam id dui posuere
        blandit. Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta.
        Pellentesque in ipsum id orci porta dapibus. Vestibulum ac diam sit amet quam vehicula
        elementum sed sit amet dui. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
      </TabTextContent>
    </Tabs.Content>
    <Tabs.Content value="tab4">
      <TabTextContent as="p">
        Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur aliquet quam
        id dui posuere blandit. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec
        rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar
        a. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur non
        nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta
        dapibus. Sed porttitor lectus nibh. Donec rutrum congue leo eget malesuada. Donec
        sollicitudin molestie malesuada. Donec rutrum congue leo eget malesuada. Curabitur arcu
        erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum
        porta. Sed porttitor lectus nibh. Donec rutrum congue leo eget malesuada.
      </TabTextContent>
      <TabTextContent as="p">
        Curabitur aliquet quam id dui posuere blandit. Curabitur aliquet quam id dui posuere
        blandit. Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta.
        Pellentesque in ipsum id orci porta dapibus. Vestibulum ac diam sit amet quam vehicula
        elementum sed sit amet dui. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
      </TabTextContent>
    </Tabs.Content>
  </div>
</Tabs.Root>;

Vertical tabs

Use vertical tabs for secondary in-page navigation (within horizontal tabs). Vertical tabs are also used in modals or when space is limited.

See below for an example of vertical tabs. Note here the styling for multiple elements. Content wrappers are not provided by the Camp component, so it is open according to your situation.


import * as Tabs from '@activecampaign/camp-components-tabs';
 
const TabsComponent = styled(Tabs.Root, {
  transformProps: {
    orientation(value) {
      switch (value) {
        case 'vertical':
          return {
            display: 'flex',
            '.c-TabsList': {
              flex: '0 1 10%',
              minWidth: '75px',
            },
            '.c-TabsContentWrapper': {
              flex: '0 1 90%',
            },
            p: {
              padding: 'sp300',
            },
          };
      }
    },
  },
})();
 
<TabsComponent defaultValue="tab1" orientation="vertical">
  <Tabs.List>
    <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
    <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
    <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
    <Tabs.Trigger value="tab4">Tab 4</Tabs.Trigger>
  </Tabs.List>
  <div className="c-TabsContentWrapper">
    <Tabs.Content value="tab1">
      <Text.Body as="p">
        Donec rutrum congue leo eget malesuada. Donec sollicitudin molestie malesuada. Donec rutrum
        congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
        Cras ultricies ligula sed magna dictum porta. Sed porttitor lectus nibh. Donec rutrum congue
        leo eget malesuada. Sed porttitor lectus nibh. Proin eget tortor risus. Donec rutrum congue
        leo eget malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
        Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in
        ipsum id orci porta dapibus. Sed porttitor lectus nibh.
      </Text.Body>
      <Text.Body as="p">
        Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Donec rutrum congue
        leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus
        magna justo, lacinia eget consectetur sed, convallis at tellus. Sed porttitor lectus nibh.
        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
        Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.
      </Text.Body>
    </Tabs.Content>
    <Tabs.Content value="tab2">
      <Text.Body as="p">
        Sed porttitor lectus nibh. Proin eget tortor risus. Donec rutrum congue leo eget malesuada.
        Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ante
        ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque,
        auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id orci
        porta dapibus. Sed porttitor lectus nibh. Donec rutrum congue leo eget malesuada. Donec
        sollicitudin molestie malesuada. Donec rutrum congue leo eget malesuada. Curabitur arcu
        erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum
        porta. Sed porttitor lectus nibh. Donec rutrum congue leo eget malesuada.
      </Text.Body>
      <Text.Body as="p">
        Curabitur aliquet quam id dui posuere blandit. Curabitur aliquet quam id dui posuere
        blandit. Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta.
        Pellentesque in ipsum id orci porta dapibus. Vestibulum ac diam sit amet quam vehicula
        elementum sed sit amet dui. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
      </Text.Body>
    </Tabs.Content>
    <Tabs.Content value="tab3">
      <Text.Body as="p">
        Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla quis lorem ut libero
        malesuada feugiat. Donec rutrum congue leo eget malesuada. Sed porttitor lectus nibh. Nulla
        quis lorem ut libero malesuada feugiat. Proin eget tortor risus. Lorem ipsum dolor sit amet,
        consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus. Sed porttitor
        lectus nibh. Donec rutrum congue leo eget malesuada. Donec sollicitudin molestie malesuada.
        Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et,
        porttitor at sem. Cras ultricies ligula sed magna dictum porta. Sed porttitor lectus nibh.
        Donec rutrum congue leo eget malesuada.
      </Text.Body>
      <Text.Body as="p">
        Curabitur aliquet quam id dui posuere blandit. Curabitur aliquet quam id dui posuere
        blandit. Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta.
        Pellentesque in ipsum id orci porta dapibus. Vestibulum ac diam sit amet quam vehicula
        elementum sed sit amet dui. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
      </Text.Body>
    </Tabs.Content>
    <Tabs.Content value="tab4">
      <Text.Body as="p">
        Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur aliquet quam
        id dui posuere blandit. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec
        rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar
        a. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur non
        nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta
        dapibus. Sed porttitor lectus nibh. Donec rutrum congue leo eget malesuada. Donec
        sollicitudin molestie malesuada. Donec rutrum congue leo eget malesuada. Curabitur arcu
        erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum
        porta. Sed porttitor lectus nibh. Donec rutrum congue leo eget malesuada.
      </Text.Body>
      <Text.Body as="p">
        Curabitur aliquet quam id dui posuere blandit. Curabitur aliquet quam id dui posuere
        blandit. Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta.
        Pellentesque in ipsum id orci porta dapibus. Vestibulum ac diam sit amet quam vehicula
        elementum sed sit amet dui. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
      </Text.Body>
    </Tabs.Content>
  </div>
</TabsComponent>;

Tabs with an icon or image

Individual tabs may have an app logomark or an icon in the tab label.

You can use a Tabs.TriggerAsset component to wrap an icon or image that will precede the tab label and provide consistent spacing. See below for an example (this example is the same as our default example above except for the relevant code shown below):


import * as Tabs from '@activecampaign/camp-components-tabs';
import { aiPencilEdit } from '@activecampaign/camp-components-icon';
...
 
<Tabs.Root
  defaultValue="tab1"
>
  <Tabs.List>
    <Tabs.Trigger value="tab1">
      <Tabs.TriggerAsset><aiPencilEdit size="medium" decorative /></Tabs.TriggerAsset>
      Tab 1
    </Tabs.Trigger>
    <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
    <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
    <Tabs.Trigger value="tab4">Tab 4</Tabs.Trigger>
  </Tabs.List>
 ...

Accessibility

Keyboard interactions

tab to focus on the first tab
tab again to focus on tab content
Interactive elements (such as a link or button) within a tab will integrate into the tab order by default
When focused on first tab, left or right arrows to navigate between tabs

Similar components

Pagination

Divides content into separate pages and provides navigation.