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.

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.

ACCESSIBILITY

WAI-ARIA Tabs by contract

Native buttons and deterministic relationships provide the complete tabs interaction model without consumer key handlers.

Semantics and relationships

The named list exposes role=tablist and orientation. Native button tabs expose selected, disabled and controls state; panels reference their tabs and inactive panels are hidden.

Keyboard

Horizontal Left/Right or vertical Up/Down navigation wraps and skips disabled tabs. Home/End jump to boundaries. Manual activation uses Enter or Space.

Focus model

Roving tabindex leaves one enabled tab in the page order. Active panels are focusable by default; disable panel focus only when its first meaningful control provides a better destination.

RTL and reduced motion

Horizontal arrows follow computed direction while vertical keys remain physical. Indicator and panel entry motion collapse under the user’s reduced-motion preference.

PUBLIC CONTRACT

Tabs API

Tabs inputs

Name	Type	Default	Purpose
value	NeuralTabValue \| null	null	Controlled active tab model.
orientation	'horizontal' \| 'vertical'	'horizontal'	Visual orientation and arrow-key axis.
activationMode	'automatic' \| 'manual'	'automatic'	Select on focus or require activation.
tabsId	string	generated	Stable SSR-safe ARIA id prefix.
unstyled	boolean	false	Removes NeuralNg visual classes.
tabsClass	string	''	Additive root class.
classes	NeuralTabsClasses	{}	Typed shared and state classes.

Output

valueChangeNeuralTabValue | null

Generated model output for pointer, keyboard, focus and programmatic changes.

List, tab and panel API

NeuralTabList.ariaLabel	string	'Tabs'	Accessible name when ariaLabelledby is absent.
NeuralTabList.ariaLabelledby	string \| null	null	ID of an external visible label.
NeuralTabList.listClass	string	''	Additive list class.
NeuralTab.value	NeuralTabValue	required	Unique tab and panel identity.
NeuralTab.disabled	boolean	false	Native disabled state; navigation skips it.
NeuralTab.iconClass	string	''	Optional class-based icon.
NeuralTab.tabClass	string	''	Additive native button class.
NeuralTabPanels.panelsClass	string	''	Additive panels container class.
NeuralTabPanel.value	NeuralTabValue	required	Matching tab identity.
NeuralTabPanel.focusable	boolean	true	Makes the active panel a tab stop.
NeuralTabPanel.panelClass	string	''	Additive panel class.

Typed class slots

rootlisttabactiveTabdisabledTabpanelspanel

DESIGN TOKENS

Tabs tokens

Neutral tokens respond to primary, surface and resolved light/dark mode. Glass and Futuristic override the same stable contract.

--neural-tabs-gap

Spacing between component items.

--neural-tabs-vertical-gap

Spacing between vertical items.

--neural-tabs-color

Component foreground color.

--neural-tabs-font-family

Component font family.

--neural-tabs-list-gap

Spacing between list items.

--neural-tabs-list-padding

List internal spacing.

--neural-tabs-list-border

List border shorthand.

--neural-tabs-scrollbar-color

Scrollbar foreground color.

--neural-tabs-scrollbar-width

Scrollbar inline size.

--neural-tab-gap

Spacing between component items.

--neural-tab-padding

Component internal spacing.

--neural-tab-color

Component foreground color.

--neural-tab-background

Component background surface.

--neural-tab-border

Component border shorthand.

--neural-tab-radius

Component corner radius.

--neural-tab-font-size

Component font size.

--neural-tab-font-weight

Component font weight.

--neural-tab-line-height

Component line height.

--neural-tab-color-hover

Hovered component foreground color.

--neural-tab-background-hover

Hovered component background surface.

--neural-tab-border-color-hover

Hovered component border color.

--neural-tab-active-color

Active foreground color.

--neural-tab-active-background

Active background surface.

--neural-tab-active-border-color

Active border color.

--neural-tab-focus-ring

Component keyboard focus ring.

--neural-tab-focus-ring-offset

Component focus ring offset.

--neural-tab-disabled-opacity

Disabled opacity.

--neural-tab-indicator-color

Indicator foreground color.

--neural-tab-indicator-size

Indicator width and height.

--neural-tab-indicator-inset

Indicator logical inset from its containing edge.

--neural-tab-indicator-offset

Indicator positional offset.

--neural-tab-indicator-radius

Indicator corner radius.

--neural-tab-indicator-duration

Indicator animation duration.

--neural-tab-indicator-easing

Indicator animation easing curve.

--neural-tab-panel-padding

Panel internal spacing.

--neural-tab-panel-color

Panel foreground color.

--neural-tab-panel-enter-duration

Panel enter animation duration.

--neural-tab-panel-enter-easing

Panel enter animation easing curve.

--neural-tab-panel-enter-distance

Panel enter animation travel distance.

--neural-tab-transition

Component CSS transition.

Primary

Surface