Primitives

Tabs

Dynamically show and hide content based on an active tab.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultricies lacinia arcu, in dignissim magna mollis in. Proin ac faucibus sem. Aliquam sit amet augue non risus commodo volutpat id sit amet nisi. Integer posuere nisl in ligula faucibus vestibulum. Nulla facilisi. Aliquam erat volutpat.

Cras eget sem ac velit pellentesque lobortis at in ex. Vestibulum nisl diam, eleifend eget malesuada a, cursus id ante. Morbi fringilla, metus nec consectetur maximus, leo purus gravida est, eu fringilla dui quam fermentum sapien. Vivamus tempus ullamcorper lectus, nec cursus sapien consectetur vel.

Praesent vehicula erat ac massa egestas viverra. Pellentesque urna magna, consectetur convallis ante vel, posuere aliquet arcu. Duis eu nulla id sapien lobortis bibendum eget vel velit. Donec sed nisi ac lacus placerat iaculis. Donec blandit eros sit amet nibh accumsan cursus. Morbi sit amet ex et enim tempus porttitor non eu erat.

Import

Import the Tabs primitives from ng-primitives/tabs.

import { NgpTabset, NgpTabList, NgpTabButton, NgpTabPanel } from 'ng-primitives/tabs';

Usage

Assemble the tabs directives in your template.

<div ngpTabset>
  <div ngpTabList>
    <button ngpTabButton ngpTabButtonValue="tab1">Tab 1</button>
    <button ngpTabButton ngpTabButtonValue="tab2">Tab 2</button>
    <button ngpTabButton ngpTabButtonValue="tab3">Tab 3</button>
  </div>
  <div ngpTabPanel ngpTabPanelValue="tab1">Tab 1 content</div>
  <div ngpTabPanel ngpTabPanelValue="tab2">Tab 2 content</div>
  <div ngpTabPanel ngpTabPanelValue="tab3">Tab 3 content</div>
</div>

Reusable Component

Create reusable components that uses the tab directives.

Schematics

Generate a reusable tab components using the Angular CLI.

ng g ng-primitives:primitive tabs

Options

  • path: The path at which to create the component file.
  • prefix: The prefix to apply to the generated component selector.
  • componentSuffix: The suffix to apply to the generated component class name.
  • fileSuffix: The suffix to apply to the generated component file name. Defaults to component.
  • exampleStyles: Whether to include example styles in the generated component file. Defaults to true.

API Reference

The following directives are available to import from the ng-primitives/tabs package:

NgpTabset

Apply the ngpTabset directive to an element to manage the tabs.

ngpTabsetValue
string

Define the selected tab.

ngpTabsetOrientation
'horizontal' | 'vertical'
default: "horizontal"

Define the orientation of the tabs.

ngpTabsetActivateOnFocus
boolean

Define whether the tab should activate on focus.

Data Attributes

The following data attributes are applied to the ngpTabset directive:

Attribute Description Value
data-orientation The orientation of the tabs. horizontal | vertical

NgpTabList

Apply the ngpTabList directive to an element that represents the list of tab buttons.

  • Selector: [ngpTabList]
  • Exported As: ngpTabList

Data Attributes

The following data attributes are applied to the ngpTabList directive:

Attribute Description Value
data-orientation The orientation of the tabs. horizontal | vertical

NgpTabButton

Apply the ngpTabButton directive to an element within a tab list to represent a tab button. This directive should be applied to a button element.

ngpTabButtonValue
string
required

Define the value of the tab.

ngpTabButtonDisabled
boolean

Define whether the tab button is disabled.

Data Attributes

The following data attributes are applied to the ngpTabButton directive:

Attribute Description Value
data-orientation The orientation of the tabs. horizontal | vertical
data-active Applied when the tab is active. -
data-disabled Applied when the tab is disabled. -
data-hover Applied when the tab is hovered. -
data-focus-visible Applied when the tab is focused. -
data-press Applied when the tab is pressed. -

NgpTabPanel

Apply the ngpTabPanel directive to an element that represents the content of a tab.

  • Selector: [ngpTabPanel]
  • Exported As: ngpTabPanel
ngpTabPanelValue
string
required

Define the value of the tab.

Data Attributes

The following data attributes are applied to the ngpTabPanel directive:

Attribute Description Value
data-active Applied when the tab is active. -
data-orientation The orientation of the tabs. horizontal | vertical

Global Configuration

You can configure the default options for all tabs in your application by using the provideTabsConfig function in a providers array.

import { provideTabsConfig } from 'ng-primitives/tabs';

bootstrapApplication(AppComponent, {
  providers: [
    provideTabsConfig({
      orientation: 'horizontal',
      activateOnFocus: false,
      wrap: false,
    }),
  ],
});

NgpTabsConfig

The following options are available to configure the default tab options:

orientation
'horizontal' | 'vertical'
default: "horizontal"

Define the default orientation of the tabs.

activateOnFocus
boolean
default: "false"

Define whether the tab should activate on focus.

wrap
boolean
default: "false"

Define whether the tabs should wrap around the tab list.

Accessibility

Adheres to the Tabs WAI-ARIA design pattern.

Keyboard Interactions

  • ArrowLeft: Move focus to the previous tab (horizontal orientation).
  • ArrowRight: Move focus to the next tab (horizontal orientation).
  • ArrowUp: Move focus to the previous tab (vertical orientation).
  • ArrowDown: Move focus to the next tab (vertical orientation).
  • Home: Move focus to the first tab.
  • End: Move focus to the last tab.

Copyright © 2025 Angular Primitives