Shared/Breadcrumbs
Category Page
Default
Long Label
Multiple Levels
Multiple Trails
Three Levels
Underlined Links
breadcrumbs.stories.tsx
import { Breadcrumbs } from '@/src/components/shared/breadcrumbs';
import type { ControlsMap } from '../../sub-packages/styleguide-v2/src/data/control-types';
/**
* Breadcrumbs Component
*
* Navigation component showing the current page's location in the site hierarchy.
* Features:
* - Single or multiple breadcrumb trails
* - Mobile-optimized view (shows direct parent with back arrow)
* - Desktop full trail view
* - Support for current page indication
*/
export const meta = {
title: 'Shared/Breadcrumbs',
};
export const controls: ControlsMap = {
label: { type: 'text', default: '記事タイトル' },
};
/**
* Default - Single trail with current page
*/
export const Default = {
args: { label: '記事タイトル' },
render: ({ label }: { label: string }) => <Breadcrumbs items={[{ label }]} />,
};
/**
* Multiple levels - Article in category
*/
export const MultipleLevels = () => (
<Breadcrumbs
items={[{ label: '記事一覧', href: '/notes/' }, { label: 'モジュラーシンセ入門ガイド' }]}
/>
);
/**
* Three levels - Product in brand
*/
export const ThreeLevels = () => (
<Breadcrumbs
items={[
{ label: 'ブランド', href: '/brands/' },
{ label: 'Mutable Instruments', href: '/brands/mutable-instruments/' },
{ label: 'Plaits' },
]}
/>
);
/**
* Multiple trails - Brand and Article paths
*/
export const MultipleTrails = () => (
<Breadcrumbs
items={[
[
{ label: 'ブランド', href: '/brands/' },
{ label: 'ADDAC System', href: '/brands/addac/' },
],
[{ label: '記事一覧', href: '/notes/' }, { label: 'ADDAC511 商品詳細' }],
]}
/>
);
/**
* Category and tag page example
*/
export const CategoryPage = () => (
<Breadcrumbs items={[{ label: 'カテゴリ', href: '/category/' }, { label: 'ガイド' }]} />
);
/**
* Underlined links - contact / search / sitemap / support pages style
*/
export const UnderlinedLinks = () => (
<Breadcrumbs
items={[{ label: 'お問い合わせ', href: '/contact/' }, { label: '送信完了' }]}
underline
/>
);
/**
* Long label text
*/
export const LongLabel = () => (
<Breadcrumbs
items={[
{ label: '記事一覧', href: '/notes/' },
{
label: 'モジュラーシンセサイザーの基本的な使い方とパッチングテクニック入門ガイド',
},
]}
/>
);