{"componentChunkName":"component---src-pages-components-breadcrumb-usage-mdx","path":"/components/breadcrumb/usage/","webpackCompilationHash":"9ffd1cb8ca3b610e9ad3","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":"67406072-ff98-5cfc-9574-bdb3acbc0760","children":[],"parent":"7fc14bc4-b969-58f8-8e39-9dbcf3a024b8","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 hierarchy 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":"89a92df1e103feebeaa17774b91c841b","counter":1281,"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 hierarchy 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":"/fargate/7b444b50/src/pages/components/breadcrumb/usage.mdx"}}}}