import { forwardRef } from "react";
import type { AnchorHTMLAttributes } from "react";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
CodeBlock,
} from "@godxjp/ui/data-display";
import { Text } from "@godxjp/ui/general";
import { Breadcrumb } from "@godxjp/ui/layout";
import { Flex, PageContainer } from "@godxjp/ui/layout";
/**
* Breadcrumb — a STANDALONE "where am I" trail. Place `` anywhere
* (no shell required); it is NOT tied to AppShell or PageContainer. Pass one `items` array of
* `{ label, to? }`; the segment with no `to` is the current page. Import from @godxjp/ui/layout.
*/
const RouterLink = forwardRef<
HTMLAnchorElement,
AnchorHTMLAttributes & { to?: string }
>(function RouterLink({ to, href, ...props }, ref) {
return ;
});
export default function Demo() {
return (
{/* 1 · IN FOCUS — the bare component + what every part does. */}
基本 · これがコンポーネントそのもの
`<Breadcrumb items={"{[…]}"} />` を置くだけ。シェル不要。リンクのセグメント (to
あり) はクリックで戻れ、末尾 (to なし) は現在地として aria-current="page" の
span に、区切り記号と nav/aria は自動付与。
{/* 2 · ONE KNOB — depth is just the array length. Stacked so the scaling is obvious. */}
深さ · items を増やすだけ
2 から 4 階層まで、変えるのは配列の長さだけ。区切りと折り返しは自動。
{/* 3 · PLACEMENT — standalone, or the optional shell convenience. Reference, last. */}
配置 · 単体 または シェルの任意プロップ
単体でどこにでも置ける。任意で `PageContainer`/`AppShell` の `breadcrumb`
プロップに渡すと、ヘッダーの定位置に出る (シェルが強制するものではない)。
単体 (どこでも):
{/* tabIndex: the snippet scrolls sideways on a narrow viewport and holds no
focusable content, so without its own tab stop a keyboard user cannot reach the
clipped end of the line (WCAG 2.1.1). */}
{``}
PageContainer / AppShell の breadcrumb プロップに (任意):
{``}
{/* Ant Design parity surface — separator / itemRender / item menu */}
separator · itemRender · menu (Ant Design パリティ)
separator は既定のシェブロンを任意のノードに置き換える(空文字で消える)。常に
aria-hidden なので、読み上げは ol / li の構造のまま。menu は antd の
BreadcrumbItemType.menu で、その区切りを兄弟切り替えのメニューボタンにする
(パス付きエントリは role="menuitem" を保ったまま本物のアンカーになる)。
);
}