{"componentChunkName":"component---src-pages-components-breadcrumb-style-mdx","path":"/components/breadcrumb/style/","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/style.mdx","titleType":"prepend","MdxNode":{"id":"b501a1f5-cc69-5e1a-940f-a3f129a10b56","children":[],"parent":"a5fc7bbe-6899-5e81-aa19-6dc9af229c8c","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## Color\n\n| Class                         | Property | Color token           |\n| ----------------------------- | -------- | --------------------- |\n| `.bx--link`                   | color    | `$link-01`            |\n| `.bx--link:hover`             | color    | `$hover-primary-text` |\n| `.bx--breadcrumb-item::after` | color    | `$text-01`            |\n\n## Typography\n\nWhen a user hovers overs a breadcrumb, the breadcrumb title should be underlined.\n\n| Class       | Font-size (px/rem) | Font-weight   | Type token       |\n| ----------- | ------------------ | ------------- | ---------------- |\n| `.bx--link` | 14 / 0.875         | Regular / 400 | `$body-short-01` |\n\n<div className=\"image--fixed\">\n\n![Breadcrumb typography treatment example](images/breadcrumb-style-1.png)\n\n</div>\n\n<Caption>Breadcrumb typography treatment example</Caption>\n\n## Structure\n\nThe on-click dropdown should follow the [overflow menu](/components/overflow-menu/code) specs for sizing, padding, and interaction.\n\n| Class                  | Property    | px/rem  | Spacing token |\n| ---------------------- | ----------- | ------- | ------------- |\n| `.bx--breadcrumb-item` | margin-left | 8 / 0.5 | `$spacing-03` |\n\n<div className=\"image--fixed\">\n\n![Truncated breadcrumb dropdown example](images/breadcrumb-style-2.png)\n\n</div>\n\n<Caption>Structure and spacing measurements for breadcrumb | px / rem</Caption>\n\n## Recommended\n\nTruncated breadcrumbs are not currently built into the breadcrumb component. The following colors from the [overflow menu](/components/overflow-menu/style) are recommended for the overflow breadcrumb list.\n\n### Color\n\n| Class                                      | Property         | Color token  |\n| ------------------------------------------ | ---------------- | ------------ |\n| `.bx--overflow-menu-options__btn`          | color            | `$icon-01`   |\n| `.bx--overflow-menu-options__option:hover` | background-color | `$hover-row` |\n\n### Typography\n\n| Class                             | Font-size (px/rem) | Font-weight   | Type token       |\n| --------------------------------- | ------------------ | ------------- | ---------------- |\n| `.bx--overflow-menu-options__btn` | 14 / 0.875         | Regular / 400 | `$body-short-01` |\n\n### Structure\n\n| Class                        | Property | px / rem | Spacing token |\n| ---------------------------- | -------- | -------- | ------------- |\n| `.bx--overflow-menu-options` | height   | 32 / 2   | –             |\n\n<div className=\"image--fixed\">\n\n![Truncated breadcrumb dropdown example](images/breadcrumb-style-3.png)\n\n</div>\n\n<Caption>\n  Recommended structure and spacing measurements for breadcrumb | px / rem\n</Caption>\n","type":"Mdx","contentDigest":"82f00eba70c4c38d0c5f1b7bf414208e","counter":1310,"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## Color\n\n| Class                         | Property | Color token           |\n| ----------------------------- | -------- | --------------------- |\n| `.bx--link`                   | color    | `$link-01`            |\n| `.bx--link:hover`             | color    | `$hover-primary-text` |\n| `.bx--breadcrumb-item::after` | color    | `$text-01`            |\n\n## Typography\n\nWhen a user hovers overs a breadcrumb, the breadcrumb title should be underlined.\n\n| Class       | Font-size (px/rem) | Font-weight   | Type token       |\n| ----------- | ------------------ | ------------- | ---------------- |\n| `.bx--link` | 14 / 0.875         | Regular / 400 | `$body-short-01` |\n\n<div className=\"image--fixed\">\n\n![Breadcrumb typography treatment example](images/breadcrumb-style-1.png)\n\n</div>\n\n<Caption>Breadcrumb typography treatment example</Caption>\n\n## Structure\n\nThe on-click dropdown should follow the [overflow menu](/components/overflow-menu/code) specs for sizing, padding, and interaction.\n\n| Class                  | Property    | px/rem  | Spacing token |\n| ---------------------- | ----------- | ------- | ------------- |\n| `.bx--breadcrumb-item` | margin-left | 8 / 0.5 | `$spacing-03` |\n\n<div className=\"image--fixed\">\n\n![Truncated breadcrumb dropdown example](images/breadcrumb-style-2.png)\n\n</div>\n\n<Caption>Structure and spacing measurements for breadcrumb | px / rem</Caption>\n\n## Recommended\n\nTruncated breadcrumbs are not currently built into the breadcrumb component. The following colors from the [overflow menu](/components/overflow-menu/style) are recommended for the overflow breadcrumb list.\n\n### Color\n\n| Class                                      | Property         | Color token  |\n| ------------------------------------------ | ---------------- | ------------ |\n| `.bx--overflow-menu-options__btn`          | color            | `$icon-01`   |\n| `.bx--overflow-menu-options__option:hover` | background-color | `$hover-row` |\n\n### Typography\n\n| Class                             | Font-size (px/rem) | Font-weight   | Type token       |\n| --------------------------------- | ------------------ | ------------- | ---------------- |\n| `.bx--overflow-menu-options__btn` | 14 / 0.875         | Regular / 400 | `$body-short-01` |\n\n### Structure\n\n| Class                        | Property | px / rem | Spacing token |\n| ---------------------------- | -------- | -------- | ------------- |\n| `.bx--overflow-menu-options` | height   | 32 / 2   | –             |\n\n<div className=\"image--fixed\">\n\n![Truncated breadcrumb dropdown example](images/breadcrumb-style-3.png)\n\n</div>\n\n<Caption>\n  Recommended structure and spacing measurements for breadcrumb | px / rem\n</Caption>\n","fileAbsolutePath":"/zeit/3ed0734e/src/pages/components/breadcrumb/style.mdx"}}}}