{"componentChunkName":"component---src-pages-components-breadcrumb-usage-mdx","path":"/components/breadcrumb/usage/","webpackCompilationHash":"aaa6c4cbb44f8ca938e9","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Breadcrumb","description":"The breadcrumb component is a secondary navigation pattern that shows hierarchy among content or traces a user’s path.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/breadcrumb/usage.mdx","titleType":"prepend","MdxNode":{"id":"d607ac9c-41b8-5b86-b28a-3ab194f970da","children":[],"parent":"28ee85d1-9dd3-5421-ba13-626b18b4a917","internal":{"content":"---\ntitle: Breadcrumb\ndescription: The breadcrumb component is a secondary navigation pattern that shows hierarchy among content or traces a user’s path.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## General guidance\n\nThe _breadcrumb_ component (aka, breadcrumb trail) is a secondary navigation pattern that shows hierarchy among content or traces a user's path. Breadcrumbs enable users to move quickly up to a parent level or previous step. All links in a breadcrumb should be clickable.\n\nBreadcrumbs are very effective in products and experiences that have a large amount of content organized in a heirarchy of more than two levels. They are also highly effective in flows that contain multiple steps, operating in a similar way to a progress indicator. Breadcrumbs are always treated as secondary and should never entirely replace the primary navigation.\n\nBreadcrumbs' space-efficient design and high utility make them an easy choice for most designers.\n\n<Row>\n<Column colLg={8}>\n\n![multiple tiers of breadcrumb](images/breadcrumb-usage-1.png)\n\n</Column>\n</Row>\n\n## Variations\n\n| Breadcrumb type  | Purpose                                                                                                                                                                                    |\n| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| _Location-based_ | These illustrate the site's heirarchy and show the user where they are within that heirarchy.                                                                                              |\n| _Path-based_     | These show the actual steps the user took to get to the current page, rather than reflecting the site's information architecture. Path-based breadcrumbs are always dynamically generated. |\n","type":"Mdx","contentDigest":"ed4b4432d03e6ad361e550274685f3ef","counter":1094,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Breadcrumb","description":"The breadcrumb component is a secondary navigation pattern that shows hierarchy among content or traces a user’s path.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Breadcrumb\ndescription: The breadcrumb component is a secondary navigation pattern that shows hierarchy among content or traces a user’s path.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## General guidance\n\nThe _breadcrumb_ component (aka, breadcrumb trail) is a secondary navigation pattern that shows hierarchy among content or traces a user's path. Breadcrumbs enable users to move quickly up to a parent level or previous step. All links in a breadcrumb should be clickable.\n\nBreadcrumbs are very effective in products and experiences that have a large amount of content organized in a heirarchy of more than two levels. They are also highly effective in flows that contain multiple steps, operating in a similar way to a progress indicator. Breadcrumbs are always treated as secondary and should never entirely replace the primary navigation.\n\nBreadcrumbs' space-efficient design and high utility make them an easy choice for most designers.\n\n<Row>\n<Column colLg={8}>\n\n![multiple tiers of breadcrumb](images/breadcrumb-usage-1.png)\n\n</Column>\n</Row>\n\n## Variations\n\n| Breadcrumb type  | Purpose                                                                                                                                                                                    |\n| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| _Location-based_ | These illustrate the site's heirarchy and show the user where they are within that heirarchy.                                                                                              |\n| _Path-based_     | These show the actual steps the user took to get to the current page, rather than reflecting the site's information architecture. Path-based breadcrumbs are always dynamically generated. |\n","fileAbsolutePath":"/tmp/42b44a0/src/pages/components/breadcrumb/usage.mdx"}}}}