-{"description":"\nBreadcrumbs enable users to quickly see their location within a path of navigation.\nLong breadcrumb text will be automatically truncated, ensuring the list always\nremains on a single line.\n\n**Breadcrumbs are best suited for tablet-sized (~768px) screens and larger.**\nFor smaller screens, use a [Link](Link) that returns the user to the previous page or view.\nThe example below is implemented with [Responsive](Responsive). Resize the browser window to see\nBreadcrumb become a Link at under 768px.\n\n```js\n---\ntype: example\n---\n<Responsive\n query={{\n tablet: { minWidth: 768 }\n }}\n>\n {(props, matches) => {\n if (matches.includes('tablet')) {\n return (\n <Breadcrumb label=\"breadcrumb\">\n <Breadcrumb.Link href=\"#\">Student Forecast</Breadcrumb.Link>\n <Breadcrumb.Link href=\"#\">University of Utah</Breadcrumb.Link>\n <Breadcrumb.Link href=\"#\">University of Utah Colleges</Breadcrumb.Link>\n <Breadcrumb.Link>College of Life Sciences</Breadcrumb.Link>\n </Breadcrumb>\n )\n } else {\n return (\n <Link\n href=\"#\"\n variant=\"standalone\"\n renderIcon={IconArrowOpenStartLine}\n >\n <TruncateText>University of Utah Colleges</TruncateText>\n </Link>\n )\n }\n }}\n</Responsive>\n```\n\nChange the `size` prop to control the font-size of the breadcrumbs (default is `medium`).\n\n```js\n---\ntype: example\n---\n<div>\n <Breadcrumb size=\"small\" label=\"breadcrumb\" margin=\"none none general.spaceXl\">\n <Breadcrumb.Link href=\"https://instructure.github.io/instructure-ui/\">English 204</Breadcrumb.Link>\n <Breadcrumb.Link\n onClick={function () {\n console.log(\"This Breadcrumb.Link was clicked!\")\n }}\n >\n Exploring John Updike\n </Breadcrumb.Link>\n <Breadcrumb.Link href=\"https://instructure.github.io/instructure-ui/\">The Rabbit Novels</Breadcrumb.Link>\n <Breadcrumb.Link>Rabbit Is Rich</Breadcrumb.Link>\n </Breadcrumb>\n <View as=\"div\" width=\"40rem\">\n <Breadcrumb label=\"breadcrumb\" margin=\"none none general.spaceXl\">\n <Breadcrumb.Link href=\"https://instructure.github.io/instructure-ui/\">English 204</Breadcrumb.Link>\n <Breadcrumb.Link\n onClick={function () {\n console.log(\"This Breadcrumb.Link was clicked!\")\n }}\n >\n Exploring John Updike\n </Breadcrumb.Link>\n <Breadcrumb.Link href=\"https://instructure.github.io/instructure-ui/\">The Rabbit Novels</Breadcrumb.Link>\n <Breadcrumb.Link>Rabbit Is Rich</Breadcrumb.Link>\n </Breadcrumb>\n </View>\n <Breadcrumb size=\"large\" label=\"breadcrumb\">\n <Breadcrumb.Link href=\"https://instructure.github.io/instructure-ui/\">English 204</Breadcrumb.Link>\n <Breadcrumb.Link\n onClick={function () {\n console.log(\"This Breadcrumb.Link was clicked!\")\n }}\n >\n Exploring John Updike\n </Breadcrumb.Link>\n <Breadcrumb.Link href=\"https://instructure.github.io/instructure-ui/\">The Rabbit Novels</Breadcrumb.Link>\n <Breadcrumb.Link>Rabbit Is Rich</Breadcrumb.Link>\n </Breadcrumb>\n</div>\n```\n\n### Icons\n\nYou can include icons in `Breadcrumb.Link`:\n\n```js\n---\ntype: example\n---\n<Breadcrumb label=\"Breadcrumb with icons\">\n <Breadcrumb.Link renderIcon={<FolderOpenInstUIIcon />} href=\"#Breadcrumb\">Item Bank</Breadcrumb.Link>\n <Breadcrumb.Link renderIcon={<Clock4InstUIIcon />} onClick={() => {}}>History</Breadcrumb.Link>\n <Breadcrumb.Link renderIcon={<PlusInstUIIcon />} iconPlacement=\"end\">New Question</Breadcrumb.Link>\n</Breadcrumb>\n```\n\n### Guidelines\n\n```js\n---\ntype: embed\n---\n<Guidelines>\n <Figure recommendation=\"yes\" title=\"Do\">\n <Figure.Item>Place Breadcrumb near the top of the page</Figure.Item>\n <Figure.Item>Show hierarchy, not history</Figure.Item>\n <Figure.Item>Keep Breadcrumb titles short but descriptive</Figure.Item>\n </Figure>\n <Figure recommendation=\"no\" title=\"Don't\">\n <Figure.Item>Use Breadcrumb if you are taking users through a multi-step process</Figure.Item>\n <Figure.Item>Use Breadcrumb in mobile layouts: use a Link to the previous page/view instead</Figure.Item>\n </Figure>\n</Guidelines>\n```\n\n```js\n---\ntype: embed\n---\n<Guidelines>\n <Figure recommendation=\"a11y\" title=\"Accessibility\">\n <Figure.Item>\n To indicate the current element within a breadcrumb, the <a href=\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current\">aria-current</a> attribute is used. In this component, aria-current=\"page\" will automatically be applied to the last element, and we recommend that the current page always be the last element in the breadcrumb. If the last element is not the current page, the isCurrentPage property should be applied to the relevant Breadcrumb.Link to ensure compatibility with screen readers.\n </Figure.Item>\n </Figure>\n</Guidelines>\n```\n","displayName":"Breadcrumb","methods":[{"name":"handleRef","docblock":null,"modifiers":[],"params":[{"name":"el","optional":false,"type":{"name":"union","raw":"Element | null","elements":[{"name":"Element"},{"name":"null"}]}}],"returns":null},{"name":"addAriaCurrent","docblock":null,"modifiers":[],"params":[{"name":"child","optional":false,"type":{"name":"ReactReactNode","raw":"React.ReactNode","alias":"React.ReactNode"}}],"returns":null},{"name":"renderChildren","docblock":null,"modifiers":[],"params":[],"returns":null}],"props":{"children":{"required":false,"tsType":{"name":"ReactReactNode","raw":"React.ReactNode"},"description":"children of type Breadcrumb.Link","defaultValue":{"value":"null","computed":false}},"label":{"required":true,"tsType":{"name":"string"},"description":"An accessible label for the navigation"},"size":{"required":false,"tsType":{"name":"union","raw":"'small' | 'medium' | 'large'","elements":[{"name":"literal","value":"'small'"},{"name":"literal","value":"'medium'"},{"name":"literal","value":"'large'"}]},"description":"Sets the font-size of the breadcrumb text","defaultValue":{"value":"'medium'","computed":false}},"margin":{"required":false,"tsType":{"name":"Spacing"},"description":"Valid values are `0`, `none`, `auto`, and Spacing token values,\nsee https://instructure.design/layout-spacing. Apply these values via\nfamiliar CSS-like shorthand. For example, `margin=\"general.spaceMd auto\"`."}},"category":"components","relativePath":"packages/ui-breadcrumb/src/Breadcrumb/v2/index.tsx","extension":".tsx","srcPath":"packages/ui-breadcrumb/src/Breadcrumb/v2/index.tsx","srcUrl":"https://github.com/instructure/instructure-ui/tree/master/packages/ui-breadcrumb/src/Breadcrumb/v2/index.tsx","packageName":"@instructure/ui-breadcrumb","requirePath":"@instructure/ui-breadcrumb/lib/Breadcrumb/v2/index","requireStr":"require('/home/runner/work/instructure-ui/instructure-ui/packages/ui-breadcrumb/src/Breadcrumb/v2/index.tsx').default","esPath":"@instructure/ui-breadcrumb/es/Breadcrumb/v2/index","id":"Breadcrumb","title":"Breadcrumb","componentVersion":"v2","componentDirName":"Breadcrumb"}
0 commit comments