Component

Tabs

A set of panels shown one at a time behind a row of triggers. Two-way bind the active value, choose a line, pills, or underline variant, size and align the triggers, place the list on any side, scroll overflowing tabs with arrows, activate on focus or on click, lazy-render panels, and swap the active indicator with a template.

Value, icons & badges

Photos

Forests12

Alerts3

Archive

42 autumn photos from four forests.

value: photos · last change: —

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { phosphorBell, phosphorLeaf, phosphorTag } from '@ng-icons/phosphor-icons/regular';

import { HbTabsImports } from '@herbst/ui';

@Component({
  selector: 'hb-demo-tabs-basic',
  imports: [HbTabsImports],
  viewProviders: [provideIcons({ phosphorLeaf, phosphorTag, phosphorBell })],
  template: `
    <hb-tabs class="w-full max-w-md" [(hbValue)]="tab" (hbChange)="last.set($event)">
      <hb-tab-list>
        <hb-tab hbValue="photos" hbIcon="phosphorLeaf">Photos</hb-tab>
        <hb-tab hbValue="forests" hbIcon="phosphorTag" [hbBadge]="12">Forests</hb-tab>
        <hb-tab hbValue="alerts" hbIcon="phosphorBell" [hbBadge]="3">Alerts</hb-tab>
        <hb-tab hbValue="archive" hbDisabled>Archive</hb-tab>
      </hb-tab-list>

      <hb-tab-panel hbValue="photos">
        <p class="text-sm text-muted-foreground">42 autumn photos from four forests.</p>
      </hb-tab-panel>
      <hb-tab-panel hbValue="forests">
        <p class="text-sm text-muted-foreground">Six forests around Freiburg.</p>
      </hb-tab-panel>
      <hb-tab-panel hbValue="alerts">
        <p class="text-sm text-muted-foreground">Three photos still need captions.</p>
      </hb-tab-panel>
    </hb-tabs>

    <p class="mt-3 font-mono text-[12px] text-muted-foreground">
      value: {{ tab() }} · last change: {{ last() }}
    </p>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoTabsBasicComponent {
  protected readonly tab = signal<unknown>('photos');
  protected readonly last = signal<unknown>('—');
}

Variant, size, position & align

Walk

Edit

Wander the forest as the leaves fall.

Scroll, manual, lazy & indicator

Jan

Feb

Mar

Apr

May

Jun

Jul

Aug

Collections logged in Jan.

manual activation — arrow to move focus, Enter/Space to open · Jan

API reference

hb-tabs

Property	Description	Type	Default
[(hbValue)]	The active tab value, two-way bound. Any value type — matched by strict equality.	unknown	undefined
[hbDefaultValue]	Initial value when hbValue is undefined; otherwise the first enabled tab is used.	unknown	undefined
(hbChange)	Emits the value when a tab is activated.	unknown	—
[hbVariant]	Trigger and indicator styling.	'line' \| 'pills' \| 'underline'	'line'
[hbSize]	Trigger height, padding, and text scale.	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	'md'
[hbPosition]	Side the tab list sits on; left/right make the tabs vertical.	'top' \| 'bottom' \| 'left' \| 'right'	'top'
[hbAlign]	Distribution of triggers along the list; stretch makes them fill the width equally.	'start' \| 'center' \| 'end' \| 'stretch'	'start'
[hbActivationMode]	Automatic activates the focused tab as you arrow through; manual waits for Enter/Space or click.	'automatic' \| 'manual'	'automatic'

hb-tabs — overflow & indicator

Property	Description	Type	Default
[hbShowArrows]	Force the scroll container and show back/forward arrows when tabs overflow.	boolean	false
[hbScrollThreshold]	Switch to the scrollable list once the tab count exceeds this number (0 disables).	number	0
[hbIndicatorClass]	Extra classes merged onto the moving active indicator.	ClassValue	''
exportAs "hbTabs"	Reference the instance to read value()/isActive() or call select(value).	methods	—

Parts

Property	Description	Type	Default
hb-tab-list [class]	The role="tablist" row/column of triggers; hosts the indicator and scroll arrows.	component	—
hb-tab [hbValue] [hbDisabled] [hbIcon] [hbBadge]	A trigger. hbValue links it to its panel; hbIcon renders a leading icon; hbBadge shows a count pill.	unknown / boolean / string / string \| number	null / false / "" / null
hb-tab-panel [hbValue] [hbLazy]	The content for a value; hidden unless active. hbLazy defers rendering until first activated.	unknown / boolean	null / false
hb-tab-menu	A standalone tab list (its own hb-tabs context) for menu/navigation bars without panels.	component	—
ng-template[hbTabsIndicator]	Project custom content into the moving active indicator.	template	—