{"componentChunkName":"component---src-pages-components-breadcrumb-usage-mdx","path":"/components/breadcrumb/usage/","result":{"pageContext":{"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":"1cc5373e-09e2-52c6-9ad1-9cb4b9134377","children":[],"parent":"e7997bef-5701-510e-8577-f77f8a192114","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":"9ad8710b4e8636ca23003a3413f12a0c","counter":1483,"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/1dde86ed/src/pages/components/breadcrumb/usage.mdx"}}}}