{"componentChunkName":"component---src-pages-components-breadcrumb-usage-mdx","path":"/components/breadcrumb/usage/","webpackCompilationHash":"fbe446a994ab39eca9c3","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":"b602985e-1796-5fb1-80e9-ef01702e36c1","children":[],"parent":"3ebd4517-9021-592c-b418-744d8f1b55df","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":"a7a5dd740f3702631639451e6f854e31","counter":1293,"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":"/zeit/165188d6/src/pages/components/breadcrumb/usage.mdx"}}}}