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.

import { Component } from '@angular/core';
import { Tab } from './tab';
import { Tabs } from './tabs';

@Component({
  selector: 'app-root',
  imports: [Tabs, Tab],
  template: `
    <app-tabs>
      <app-tab value="tab1" label="Tab 1">
        <p>Tab 1 content</p>
      </app-tab>
      <app-tab value="tab2" label="Tab 2">
        <p>Tab 2 content</p>
      </app-tab>
      <app-tab value="tab3" label="Tab 3">
        <p>Tab 3 content</p>
      </app-tab>
    </app-tabs>
  `,
})
export default class App {}

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.

  • Selector: [ngpTabset]
  • Exported As: ngpTabset
ngpTabsetValue
string | undefined

Define the active tab

ngpTabsetOrientation
NgpOrientation
default: "'horizontal'"

The orientation of the tabset

ngpTabsetActivateOnFocus
boolean

Whether tabs should activate on focus

ngpTabsetValueChange
string | undefined

Emit the value of the selected tab when it changes

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.

  • Selector: [ngpTabButton]
  • Exported As: ngpTabButton
ngpTabButtonValue
string | undefined

The value of the tab this trigger controls

ngpTabButtonDisabled
boolean
default: "false"

Whether the tab 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 | undefined

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