Tab Container

Nested and Secondary Tabs

Secondary tab styles are available when you want a tabbed view outside the main page content (such as in a sidebar), or when you want to nest a tab view within another tab. To implement the secondary tab styles:

• Set type="section" on the secondary or nested tabs to provide visual distinction from top-level tabs. Doing so sets font-size: inherit on the nested tab controls.
• Set color="alt" on the secondary or nested tabs. This sets color: inherit on the nested tab controls, avoiding text contrast issues.

<q2-tab-container value="1-1" name="top">
  <q2-tab-pane label="First Tab" value="1-1" name="top">
    <strong>First tab</strong> content. — The nested tabs below are within this tab's content.
    <q2-tab-container type="section" value="2-1" color="alt" name="child">
      <q2-tab-pane label="First Nested Tab" value="2-1" name="child">
        <strong>First nested tab</strong> content.
      </q2-tab-pane>
      <q2-tab-pane label="Second Nested Tab" value="2-2" name="child">
        <strong>Second nested tab</strong> content.
      </q2-tab-pane>
    </q2-tab-container>
  </q2-tab-pane>
  <q2-tab-pane label="Second Tab" value="1-2" name="top">
    <strong>Second tab</strong> content.
  </q2-tab-pane>
</q2-tab-container>

Vertical Orientation

Set orientation="vertical" to stack the tab strip beside the panel content rather than above it. This is intended for wider layouts such as admin consoles, where horizontal screen real estate is plentiful and a left-rail navigation pattern is preferred. Below 768px viewports the container automatically falls back to horizontal layout, so vertical is not recommended for narrow-viewport or mobile experiences.

<q2-tab-container orientation="vertical" name="vertical-example" value="v-1">
  <q2-tab-pane label="Overview" value="v-1" name="vertical-example">
    <strong>Overview</strong> content.
  </q2-tab-pane>
  <q2-tab-pane label="Details" value="v-2" name="vertical-example">
    <strong>Details</strong> content.
  </q2-tab-pane>
  <q2-tab-pane label="Activity" value="v-3" name="vertical-example" badge-count="4">
    <strong>Activity</strong> content with a badge count.
  </q2-tab-pane>
  <q2-tab-pane label="Settings" value="v-4" name="vertical-example">
    <strong>Settings</strong> content.
  </q2-tab-pane>
</q2-tab-container>

Vertical tab containers also come with CSS custom properties that let you tune the layout. Use --tct-tab-container-width to control the width of the strip itself, --tct-vertical-tab-container-padding to control the padding inside the strip, and --tct-vertical-tab-container-content-padding to control the padding of the content area.

Accessibility

The following keyboard commands will navigate between tabs and into the tab content:

• While the tabs are blurred, use the Tab key to focus an individual tab in the tab container.
• When focused on a tab:
  • The ← key focuses the previous tab.
  • The → key focuses the next tab.
  • When orientation="vertical", the ↑ and ↓ keys also focus the previous and next tab, respectively.
  • The Tab key focuses the first focusable item within the focused tab's content.
  • The Home key focuses the first tab.
  • The End key focuses the last tab.
  • The Space and Enter keys display the focused tab.

General Guidance

The Nielsen/Norman Group's tab article provides helpful guidance on using tabs in a design. The key guidelines:

• Use tabs to changes views within the same page/context, not to navigate between different pages or areas.
• Logically chunk the content behind the tabs so users can easily predict what they'll find when they select a given tab.
• Use tabs only when users don't need to see content from multiple tabs simultaneously.
• Make it clear which tab is currently selected.
• Ensure that unselected tabs' labels are clearly visible.
• Keep tab labels short.
• Only use a single row of tabs.