ui-ingredients/dist/breadcrumbs/create-breadcrumbs.js

Headless component library for Svelte powered by zag

import { ariaAttr, dataAttr } from '@zag-js/dom-query';
import { parts } from './breadcrumbs-anatomy.js';
/**
 * @deprecated
 */
export function createBreadcrumbs() {
    function getRootProps() {
        return {
            role: 'navigation',
            'aria-label': 'Breadcrumb',
            ...parts.root.attrs,
        };
    }
    function getListProps() {
        return {
            role: 'list',
            ...parts.list.attrs,
        };
    }
    function getItemProps() {
        return {
            role: 'listitem',
            ...parts.item.attrs,
        };
    }
    function getLinkProps(props) {
        return {
            role: 'link',
            href: props.current ? undefined : props.href,
            'aria-current': props.current ? 'page' : undefined,
            'data-current': dataAttr(props.current),
            'aria-disabled': ariaAttr(props.current),
            'data-disabled': dataAttr(props.current),
            ...parts.link.attrs,
        };
    }
    function getSeparatorProps() {
        return {
            'aria-hidden': true,
            ...parts.separator.attrs,
        };
    }
    return {
        getRootProps,
        getListProps,
        getItemProps,
        getLinkProps,
        getSeparatorProps,
    };
}