NEURALNG
NAVIGATIONBETA

Tabs

Composable tab navigation with controlled Signals state, automatic or manual activation, logical RTL navigation and complete visual ownership.

WAI-ARIA patternSSR safeHeadless ready

GET STARTED

Import

Import only the concise canonical standalone declarations used by the template.

app.ts TypeScript 
import {
  NeuralTabs,
  NeuralTabList,
  NeuralTab,
  NeuralTabPanels,
  NeuralTabPanel,
} from '@neural-ng/core/tabs';

@Component({
  imports: [NeuralTabs, NeuralTabList, NeuralTab, NeuralTabPanels, NeuralTabPanel],
})

Controlled tabs and icons

String and number values are supported. The model remains the single source of truth; iconClass accepts Neural Icons and arbitrary utility classes.

Overview

Selected model: overview

Vertical manual activation

Vertical orientation changes layout, ARIA orientation and navigation to Up/Down. Manual mode moves focus first and activates with Enter or Space.

Recent project activity.

Disabled tabs and deterministic fallback

Disabled tabs remain discoverable, leave the roving focus order and cannot activate. Null, invalid, removed or newly disabled values resolve to the first enabled tab.

Available content is selected first.

Responsive overflow

Constrained horizontal lists scroll natively, retain one semantic tablist and keep focused tabs reachable without duplicate navigation controls.

Overview workspace.

Unstyled and typed slots

Unstyled removes every NeuralNg visual class while preserving structural hooks, native buttons, roving focus, ARIA and hidden panel behavior.

Semantic composition is still owned by NeuralNg.

Resolution rules and intentional boundaries

Each tab value must be a unique string or number and match exactly one panel. Development mode warns once for duplicate or unmatched compositions.

ariaLabelledby takes precedence over ariaLabel. A blank custom tabsId safely falls back to the generated deterministic prefix.

Application-wide provideNeuralNg({ unstyled: true }) and local unstyled retain the same behavior. Local class inputs and typed slots are always additive.

Panels are eagerly instantiated and inactive content uses native hidden. Lazy lifecycle, closeable tabs, router synchronization and remote loading are intentionally outside the Beta contract.