Skip to content
VolvoVolvo Cars Web Design System

Tabs

Edit on GitHub

Switch between different views or content sections within a page.

@volvo-cars/css v2.5.1@volvo-cars/react-headless v0.25.1

Stretched Tabs

Section titled “Stretched Tabs”
Overview content goes here.
Show codeHide code
import type { TabGroupState } from '@volvo-cars/react-headless';
import { useTab, useTabList, useTabPanel } from '@volvo-cars/react-headless';


const tabs = [
  { title: 'Overview', content: 'Overview content goes here.' },
  { title: 'Interior', content: 'Interior content goes here.' },
  { title: 'Features', content: 'Features content goes here.' },
];


function Tab({
  state,
  index,
  title,
}: {
  state: TabGroupState;
  index: number;
  title: string;
}) {
  const { tabProps } = useTab({ state, index });
  return (
    <button {...tabProps} className="tab">
      {title}
    </button>
  );
}


export function StretchedTabs() {
  const { tabListProps, tabGroupState, selectedIndex } = useTabList();
  const { tabPanelProps } = useTabPanel({
    state: tabGroupState,
    index: selectedIndex,
  });


  return (
    <div>
      <div
        {...tabListProps}
        aria-label="Car sections"
        className="tablist-stretched"
      >
        {tabs.map(({ title }, index) => (
          <Tab key={title} state={tabGroupState} index={index} title={title} />
        ))}
      </div>
      <div {...tabPanelProps} className="py-24">
        {tabs[selectedIndex].content}
      </div>
    </div>
  );
}

Vertical Tabs

Section titled “Vertical Tabs”
Overview content goes here.
Show codeHide code
import type { TabGroupState } from '@volvo-cars/react-headless';
import { useTab, useTabList, useTabPanel } from '@volvo-cars/react-headless';


const tabs = [
  { title: 'Overview', content: 'Overview content goes here.' },
  { title: 'Interior', content: 'Interior content goes here.' },
  { title: 'Features', content: 'Features content goes here.' },
];


function Tab({
  state,
  index,
  title,
}: {
  state: TabGroupState;
  index: number;
  title: string;
}) {
  const { tabProps } = useTab({ state, index });
  return (
    <button {...tabProps} className="tab">
      {title}
    </button>
  );
}


export function VerticalTabs() {
  const { tabListProps, tabGroupState, selectedIndex } = useTabList({
    orientation: 'vertical',
  });
  const { tabPanelProps } = useTabPanel({
    state: tabGroupState,
    index: selectedIndex,
  });


  return (
    <div className="flex">
      <div
        {...tabListProps}
        aria-label="Car sections"
        className="tablist"
        aria-orientation="vertical"
      >
        {tabs.map(({ title }, index) => (
          <Tab key={title} state={tabGroupState} index={index} title={title} />
        ))}
      </div>
      <div {...tabPanelProps} className="px-24 flex-grow">
        {tabs[selectedIndex].content}
      </div>
    </div>
  );
}
Section titled “Navigation links”
Show codeHide code
<nav aria-label="Page navigation">
  <ul class="tablist">
    <li>
      <a href="#overview" class="tab" aria-current="page">Overview</a>
    </li>
    <li>
      <a href="#interior" class="tab">Interior</a>
    </li>
    <li>
      <a href="#specifications" class="tab">Specifications</a>
    </li>
  </ul>
</nav>