Component field guide

Explore live variants, compare states, and learn every prop. Pick a component to start.

LIVE COMPONENT

WelkBreadCrumbs

A labeled navigation trail rendered as an ordered list. Items with href become native links without underlines; items without href are text. The final item receives aria-current=page. Trails wrap on narrow screens.

Usage

React / TSX

import { WelkBreadCrumbs } from "@welkui/react";

<WelkBreadCrumbs items={[
  { label: "Home", href: "/" },
  { label: "Components", href: "/components/" },
  { label: "Current page" },
]} />

Import @welkui/react/styles.css once in your app. Stateful snippets belong inside a React component.

Variants and behavior

One navigation presentation; customize the separator with text or a decorative React node.

Visual variant gallery

These are real components, not screenshots. Compare their appearance and try the controls. Key props below each preview show what changes; use the usage example above for imports and component setup.

Default separator

Native links, slash separators, and a final current-page item.

Key propsitems={[{ label, href }, ...]}

Custom separator

Replace the slash with a decorative text or icon separator.

Key propsseparator=">"

Text-only trail

Omit href when an ancestor should not be navigable.

Key propsitems={[{ label: 'Guide' }, { label: 'Here' }]}

Usage notes and accessibility

Order entries from the broadest ancestor to the current page. The last item receives aria-current=page; omit its href if the current page should not be clickable.
Give multiple navigation trails distinct aria-label values. Separators are decorative and are not announced as part of the link labels.
Items are native anchors. Supply your app's real URLs or integrate navigation through the supported anchor handlers; the breadcrumb itself does not include a router.

Props

Required props are marked in the default column. Other props are optional. ReactNode accepts text or JSX.

WelkBreadCrumbs prop reference
Prop	Type	Default	Description
`items`	`readonly WelkBreadCrumbItem[]`	Required	Ordered items: { label: ReactNode, href?: string, ...anchorProps }. The component manages children and aria-current.
`separator`	`ReactNode`	"/"	Decorative separator between items; hidden from assistive technology.
`aria-label`	`string`	"Breadcrumb"	Accessible navigation name.

Native props and refs

Inherits native nav props except children; forwards a nav ref. Each item supports native anchor props except children and aria-current.

Project setup, styling and Next.js

Import @welkui/react/styles.css once in your app entry or Next.js root layout. The previews use the default theme; override --welk-* CSS tokens in your app to customize it.

For Next.js, put hooks and event handlers in a component beginning with "use client". Keep state local to the component using the control. The library preserves its client boundaries and uses your installed React version.

Use defaultValue or defaultChecked for uncontrolled fields, or a state value and its change callback for controlled fields. Do not switch between these modes during the lifetime of a field.

Modal and notification examples start closed: use their Try buttons to see them. Disabled examples are deliberately non-interactive. Validate forms, uploads, authentication, and server responses in your application; these components only provide UI.