{"componentChunkName":"component---src-pages-components-breadcrumb-usage-mdx","path":"/components/breadcrumb/usage/","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","Accessibility"]},"relativePagePath":"/components/breadcrumb/usage.mdx","titleType":"prepend","MdxNode":{"id":"6dabb180-d291-5bda-a2d7-94ce05e61ff1","children":[],"parent":"d5817d3d-24f1-57ab-9beb-1841e77303c8","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', 'Accessibility']\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":"d1fc33df14e5aec2e7f1ef157dc4c6d0","counter":1329,"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","Accessibility"]},"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', 'Accessibility']\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":"/zeit/3eb073a4/src/pages/components/breadcrumb/usage.mdx"}}}}