About Project Overview Contributing Getting Started Installation Usage Themes Customizing Frameworks React Vue Angular GitHub Light Dark System

Tab

<terra-tab> | TerraTab
Since 1.0 stable

Tabs are used inside tabs to represent and activate tab panels.

Tabs divide content into meaningful, related sections. Tabs allow users to focus on one specific view at a time while maintaining sight of all the relevant content options available.

General Custom Advanced This is the general tab panel. This is the custom tab panel. This is the advanced tab panel. 
<terra-tabs>
  <terra-tab slot="nav" panel="general">General</terra-tab>
  <terra-tab slot="nav" panel="custom">Custom</terra-tab>
  <terra-tab slot="nav" panel="advanced">Advanced</terra-tab>

  <terra-tab-panel name="general">This is the general tab panel.</terra-tab-panel>
  <terra-tab-panel name="custom">This is the custom tab panel.</terra-tab-panel>
  <terra-tab-panel name="advanced">This is the advanced tab panel.</terra-tab-panel>
</terra-tabs>

Usage

Tabs are used to browse large amounts of content in a compact footprint. They empower visitors to explore and discover content, or quickly scroll past it if they aren’t interested. Tabs are used on topic pages to expose previews of the content that is available on sub-pages.

Tabs can also be used to toggle between different views of the same content set. For example, tabs are used to change the view of content in galleries and search results.

Examples

Large Tabs

Large tabs are used in most cases. This is the default size.

Tab 1 Tab 2 Tab 3 Tab panel 1 Tab panel 2 Tab panel 3 
<terra-tabs size="large">
  <terra-tab slot="nav" panel="tab-1">Tab 1</terra-tab>
  <terra-tab slot="nav" panel="tab-2">Tab 2</terra-tab>
  <terra-tab slot="nav" panel="tab-3">Tab 3</terra-tab>

  <terra-tab-panel name="tab-1">Tab panel 1</terra-tab-panel>
  <terra-tab-panel name="tab-2">Tab panel 2</terra-tab-panel>
  <terra-tab-panel name="tab-3">Tab panel 3</terra-tab-panel>
</terra-tabs>

Small Tabs

Small tabs are used in more dense UI (like the gallery page).

Tab 1 Tab 2 Tab 3 Tab panel 1 Tab panel 2 Tab panel 3 
<terra-tabs size="small">
  <terra-tab slot="nav" panel="tab-1">Tab 1</terra-tab>
  <terra-tab slot="nav" panel="tab-2">Tab 2</terra-tab>
  <terra-tab slot="nav" panel="tab-3">Tab 3</terra-tab>

  <terra-tab-panel name="tab-1">Tab panel 1</terra-tab-panel>
  <terra-tab-panel name="tab-2">Tab panel 2</terra-tab-panel>
  <terra-tab-panel name="tab-3">Tab panel 3</terra-tab-panel>
</terra-tabs>

Icon-Only Tabs

Tabs can also be used with icons instead of text. Place a <terra-icon> in the tab’s slot.

Grid view content List view content Document view content 
<terra-tabs>
  <terra-tab slot="nav" panel="grid">
    <terra-icon name="outline-squares-2x2" library="heroicons"></terra-icon>
  </terra-tab>
  <terra-tab slot="nav" panel="list">
    <terra-icon name="outline-list-bullet" library="heroicons"></terra-icon>
  </terra-tab>
  <terra-tab slot="nav" panel="document">
    <terra-icon name="outline-document-text" library="heroicons"></terra-icon>
  </terra-tab>

  <terra-tab-panel name="grid">Grid view content</terra-tab-panel>
  <terra-tab-panel name="list">List view content</terra-tab-panel>
  <terra-tab-panel name="document">Document view content</terra-tab-panel>
</terra-tabs>

Closable Tabs

Add the closable attribute to a tab to show a close button. This example shows how you can dynamically remove tabs from the DOM when the close button is activated.

General Closable 1 Closable 2 This is the general tab panel. This is the first closable tab panel. This is the second closable tab panel. 
<terra-tabs class="tabs-closable">
  <terra-tab slot="nav" panel="general">General</terra-tab>
  <terra-tab slot="nav" panel="closable-1" closable>Closable 1</terra-tab>
  <terra-tab slot="nav" panel="closable-2" closable>Closable 2</terra-tab>

  <terra-tab-panel name="general">This is the general tab panel.</terra-tab-panel>
  <terra-tab-panel name="closable-1">This is the first closable tab panel.</terra-tab-panel>
  <terra-tab-panel name="closable-2">This is the second closable tab panel.</terra-tab-panel>
</terra-tabs>

<script>
  const tabs = document.querySelector('.tabs-closable');

  tabs.addEventListener('terra-close', async event => {
    const tab = event.target;
    const panel = tabs.querySelector(`terra-tab-panel[name="${tab.panel}"]`);

    // Show the previous tab if the tab is currently active
    if (tab.active) {
      tabs.show(tab.previousElementSibling.panel);
    }

    // Remove the tab + panel
    tab.remove();
    panel.remove();
  });
</script>

Disabled Tabs

Tabs can be disabled to prevent selection.

General Custom Disabled This is the general tab panel. This is the custom tab panel. This is a disabled tab panel. 
<terra-tabs>
  <terra-tab slot="nav" panel="general">General</terra-tab>
  <terra-tab slot="nav" panel="custom">Custom</terra-tab>
  <terra-tab slot="nav" panel="disabled" disabled>Disabled</terra-tab>

  <terra-tab-panel name="general">This is the general tab panel.</terra-tab-panel>
  <terra-tab-panel name="custom">This is the custom tab panel.</terra-tab-panel>
  <terra-tab-panel name="disabled">This is a disabled tab panel.</terra-tab-panel>
</terra-tabs>

Best Practices

  • Use tabs to organize related content into distinct sections
  • Keep tab labels concise and descriptive
  • Don’t use tabs to switch between drastically different types of content
  • Use large tabs by default; use small tabs in dense UIs
  • For icon-only tabs, ensure icons are recognizable and have tooltips or labels for accessibility

Accessibility

Tabs are fully keyboard accessible:

  • Use arrow keys to navigate between tabs
  • Press Enter or Space to activate a tab
  • Press Home to jump to the first tab
  • Press End to jump to the last tab

Tabs use proper ARIA attributes for screen readers and maintain focus management for keyboard navigation.

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script Import Bundler React

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/tab/tab.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/tab/tab.js';

To import this component using a bundler:

import '@nasa-terra/components/dist/components/tab/tab.js';

To import this component as a React component:

import TerraTab from '@nasa-terra/components/dist/react/tab';

Slots

Name Description
(default) The tab’s label. For icon-only tabs, place a <terra-icon> here.

Learn more about using slots.

Properties

Name Description Reflects Type Default
panel The name of the tab panel this tab is associated with. The panel must be located in the same tabs component. string ''
active Draws the tab in an active state. boolean false
closable Makes the tab closable and shows a close button. boolean false
disabled Disables the tab and prevents selection. boolean false
size The tab’s size. Inherits from the parent tabs component if not specified. 'large' | 'small' 'large'
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
terra-close onTerraClose Emitted when the tab is closable and the close button is activated. -

Learn more about events.

Custom Properties

Name Description Default
--terra-tab-* All tab design tokens from horizon.css are supported.

Learn more about customizing CSS custom properties.

Parts

Name Description
base The component’s base wrapper.
close-button The close button icon.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <terra-icon>