Component field guide

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

LIVE COMPONENT

WelkMenu

A vertical navigation list with comic text, line separators, and forward arrows. Nested mode uses native disclosures with downward arrows and preserves each parent's destination through a Go to link. Escape closes the closest branch, then the whole collapsible menu. Links retain native navigation behavior.

Usage

React / TSX

import { WelkMenu, WelkButton } from "@welkui/react";

<WelkMenu variant="nested" collapsible items={[
  { title: "Home", route: "/" },
  { title: "Components", route: "/components/", children: [
    { title: "Button", route: "/components/WelkButton/" },
  ] },
]} />

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

Variants and behavior

default: flat route list (default).
nested: expandable recursive children.
collapsible=true: adds an animated whole-menu toggle; starts expanded.

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.

Flat

Simple vertical links with exact-route active styling.

Selected route: /guide. These example links stay on this page.

Key propsvariant="default" activeRoute="/guide"

Nested

Expand Components, then Forms to try recursive disclosures. Parent routes remain accessible.

Selected route: /guide. These example links stay on this page.

Key propsvariant="nested"

Collapsible

Use the menu/close icon to animate the whole menu. Hidden content is inert.

Selected route: /guide. These example links stay on this page.

Key propsvariant="nested" collapsible

Usage notes and accessibility

Provide stable route strings and distinct titles. activeRoute matches an exact route; the component does not infer the current URL or install a router.
Use variant=nested to display children. Parent destinations remain available through Go to links, separate from the disclosure toggle.
The collapsible menu starts expanded. Escape closes the nearest open child before collapsing the whole menu, returning focus to its toggle.
The example routes below are intercepted only to keep the demo on this page. Your application should supply real navigation or router-aware click handlers.

Props

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

WelkMenu prop reference
Prop	Type	Default	Description
`items`	`readonly WelkMenuItem[]`	Required	Recursive entries: { title: string, route: string, children?: readonly WelkMenuItem[] }.
`variant`	`"default" \| "nested"`	"default"	Enables nested branch disclosures.
`activeRoute`	`string`	Unset	Exact route to mark with aria-current=page.
`collapsible`	`boolean`	false	Adds menu/close icon toggle; hidden content becomes inert.
`aria-label`	`string`	"Main navigation"	Accessible name for the navigation region.

Native props and refs

Inherits native nav props except children; forwards a nav ref.

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.