Breadcrumbs#

import { component, render } from 'sigx';
import { Breadcrumbs } from '@sigx/daisyui';

const Demo = component(() => {
    const items = [
        { id: 'home', label: 'Home', href: '/' },
        { id: 'docs', label: 'Documents', href: '/docs' },
        { id: 'current', label: 'Add Document' },
    ];

    return () => <Breadcrumbs items={items} />;
});

render(<Demo />, "#sandbox");

import { component, render } from 'sigx';
import { Breadcrumbs, Card, Text } from '@sigx/daisyui';

const Demo = component(({ signal }) => {
    const state = signal({
        trail: [
            { id: 'root', label: 'Files' },
            { id: 'projects', label: 'Projects' },
            { id: 'sigx', label: 'sigx' },
            { id: 'docs', label: 'docs' },
        ],
        last: '',
    });

    const navigate = (id: string) => {
        state.last = id;
        const index = state.trail.findIndex((item) => item.id === id);
        state.trail = state.trail.slice(0, index + 1);
    };

    return () => (
        <Card>
            <Card.Body class="space-y-2">
                <Breadcrumbs items={state.trail} onNavigate={navigate} />
                <Text size="sm" class="opacity-70">
                    {state.last ? `Navigated to "${state.last}"` : 'Click a crumb to go back up'}
                </Text>
            </Card.Body>
        </Card>
    );
});

render(<Demo />, "#sandbox");

import { component, render } from 'sigx';
import { Breadcrumbs } from '@sigx/daisyui';

const Demo = component(() => {
    const items = ['Home', 'Library', 'Programming', 'Frontend', 'Frameworks', 'SignalX', 'DaisyUI']
        .map((label, i) => ({ id: String(i), label }));

    return () => <Breadcrumbs items={items} class="max-w-xs" />;
});

render(<Demo />, "#sandbox");