@teste-ui/breadcrumb
Version:
A React component used for navigation, with each item acting as a link
61 lines • 2.31 kB
TypeScript
import { SystemProps, ThemingProps, HTMLChakraProps } from "@teste-ui/system";
import * as React from "react";
export declare const useBreadcrumbStyles: () => import("@teste-ui/utils").Dict<import("@teste-ui/system").CSSObject>;
export interface BreadcrumbSeparatorProps extends HTMLChakraProps<"div"> {
/**
* @type SystemProps["mx"]
*/
spacing?: SystemProps["mx"];
}
/**
* React component that separates each breadcrumb link
*/
export declare const BreadcrumbSeparator: import("@teste-ui/system").ComponentWithAs<"span", BreadcrumbSeparatorProps>;
export interface BreadcrumbLinkProps extends HTMLChakraProps<"a"> {
isCurrentPage?: boolean;
}
/**
* Breadcrumb link.
*
* It renders a `span` when it matches the current link. Otherwise,
* it renders an anchor tag.
*/
export declare const BreadcrumbLink: import("@teste-ui/system").ComponentWithAs<"a", BreadcrumbLinkProps>;
interface BreadcrumbItemOptions extends BreadcrumbOptions {
isCurrentPage?: boolean;
isLastChild?: boolean;
}
export interface BreadcrumbItemProps extends BreadcrumbItemOptions, HTMLChakraProps<"li"> {
}
/**
* BreadcrumbItem is used to group a breadcrumb link.
* It renders a `li` element to denote it belongs to an order list of links.
*
* @see Docs https://teste-ui.com/breadcrumb
*/
export declare const BreadcrumbItem: import("@teste-ui/system").ComponentWithAs<"li", BreadcrumbItemProps>;
export interface BreadcrumbOptions {
/**
* The visual separator between each breadcrumb item
* @default "/"
* @type string | React.ReactElement
*/
separator?: string | React.ReactElement;
/**
* The left and right margin applied to the separator
* @default "0.5rem"
* @type SystemProps["mx"]
*/
spacing?: SystemProps["mx"];
}
export interface BreadcrumbProps extends HTMLChakraProps<"nav">, BreadcrumbOptions, ThemingProps<"Breadcrumb"> {
}
/**
* Breadcrumb is used to render a breadcrumb navigation landmark.
* It renders a `nav` element with `aria-label` set to `Breadcrumb`
*
* @see Docs https://teste-ui.com/breadcrumb
*/
export declare const Breadcrumb: import("@teste-ui/system").ComponentWithAs<"nav", BreadcrumbProps>;
export {};
//# sourceMappingURL=breadcrumb.d.ts.map