Getting StartedInstallation and setup guides 6
LayoutWorkflow and structural layout components 8
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 5
FormInput and selection components 25
UtilityGeneral-purpose interface utilities 7
NavigationMenu surfaces and hierarchical actions 7
Overview API Styling Examples

Breadcrumb overview

Breadcrumb communicates hierarchy from root to current location. The wrapper component adds collapse rules, separator control, and current-item resolution on top of the breadcrumb slot contract.

Imports

Primitive imports

ts
import {
  TngBreadcrumb,
  TngBreadcrumbList,
  TngBreadcrumbItem,
  TngBreadcrumbLink,
  TngBreadcrumbSeparator,
} from '@tailng-ui/primitives';

Wrapper imports

ts
import { TngBreadcrumbComponent, TngBreadcrumbItemComponent } from '@tailng-ui/components';

Wrapper variants

The same breadcrumb wrapper rendered through plain CSS shells and Tailwind utility shells.

Keyboard and accessibility baseline

  • Linked items remain native anchors and are reachable through Tab.
  • Current item exposes aria-current="page".
  • Decorative separators are rendered with aria-hidden="true".
  • Collapsed mode preserves first and current segments by default.