From 714e287589becb2d90f73c9810fee1a3e1e59055 Mon Sep 17 00:00:00 2001 From: Aurora Pleguezuelo Date: Sun, 28 Apr 2024 22:45:57 +0000 Subject: [PATCH 1/2] Main ## Summary ## List of notable changes: - - ## What should reviewers focus on? - - ## Steps to test: 1. 1. 1. ## Supporting resources (related issues, external links, etc): - - ## Contributor checklist: - [ ] All new and existing CI checks pass - [ ] Tests prove that the feature works and covers both happy and unhappy paths - [ ] Any drop in coverage, breaking changes or regressions have been documented above - [ ] New visual snapshots have been generated / updated for any UI changes - [ ] All developer debugging and non-functional logging has been removed - [ ] Related issues have been referenced in the PR description ## Reviewer checklist: - [ ] Check that pull request and proposed changes adhere to our [contribution guidelines](../../CONTRIBUTING.md) and [code of conduct](../../CODE_OF_CONDUCT.md) - [ ] Check that tests prove the feature works and covers both happy and unhappy paths - [ ] Check that there aren't other open Pull Requests for the same update/change ## Screenshots: > Please try to provide before and after screenshots or videos
Before After
--- .../content/components/Breadcrumbs/index.mdx | 46 +++++++++++++++++++ .../react.mdx} | 0 2 files changed, 46 insertions(+) create mode 100644 apps/docs/content/components/Breadcrumbs/index.mdx rename apps/docs/content/components/{Breadcrumbs.mdx => Breadcrumbs/react.mdx} (100%) diff --git a/apps/docs/content/components/Breadcrumbs/index.mdx b/apps/docs/content/components/Breadcrumbs/index.mdx new file mode 100644 index 000000000..8bf2641cb --- /dev/null +++ b/apps/docs/content/components/Breadcrumbs/index.mdx @@ -0,0 +1,46 @@ +--- + +title: Breadcrumbs +description: Breadcrumbs display the current page or context within the site, allowing them to navigate different levels of the hierarchy. + +import CustomVideoPlayer from '../../../src/components/custom-video-player' +import ComponentLayout from '../../../src/layouts/component-layout' +export default ComponentLayout + +![An image showing examples of the two different options for breadcrumbs.](https://github.com/primer/design/assets/6951037/212c5aae-9289-4034-b079-860ba5362c9f) + +## Usage + +Breadcrumbs are used to show taxonomical context on pages that are many levels deep in a site’s hierarchy. Breadcrumbs show and link to pages higher up in the ancestry. + +Breadcrumbs are most appropriate on pages that: + +- Are many levels deep on a site +- Do not have a section-level navigation +- May need the ability to quickly go back to the previous (parent) page +- All items must contain links, with the last item as the user's current context + +## Anatomy + +Breadcrumbs are made of links (indicating parents), dividers, and the current page which presents itself as plain text and not a link. The default breadcrumbs component can be modified to change the number of items within the chain. + +![An image showing the anatomy of breadcrumbs: parent link, then divider, then current page.](https://github.com/primer/design/assets/6951037/e506ad2f-d886-4926-9e49-99390b1a9e14) + +## Options + +Breadcrumbs have different variants and different lengths they can support: + +### Variants + +Breadcrumb component offers two variants. A default variant where links aren't highlighted and an accent variant that applies an accent color to the parent links. + +![An image showing examples of the two different options for breadcrumbs.](https://github.com/primer/design/assets/6951037/212c5aae-9289-4034-b079-860ba5362c9f) + +- Use the default variant for most use cases in service of am effective use of color. +- Use the accent variant for use cases where breadcrumb is at the center of the experience, for example a multiple level FAQ. + +### Breadcrumb length + +By default the breadcrumbs component can show up to 10 items within the chain plus the current page. + +![An image displaying all the different breadcrumb lengths from one to ten](https://github.com/primer/design/assets/6951037/cd94aad3-76c1-4a1f-9a93-c990f5b1d5c7) diff --git a/apps/docs/content/components/Breadcrumbs.mdx b/apps/docs/content/components/Breadcrumbs/react.mdx similarity index 100% rename from apps/docs/content/components/Breadcrumbs.mdx rename to apps/docs/content/components/Breadcrumbs/react.mdx From 41f20cd78adabae3c56398002057e443ff2e5d64 Mon Sep 17 00:00:00 2001 From: Aurora Pleguezuelo Date: Fri, 3 May 2024 20:58:09 +0200 Subject: [PATCH 2/2] Update index.mdx --- apps/docs/content/components/Breadcrumbs/index.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/apps/docs/content/components/Breadcrumbs/index.mdx b/apps/docs/content/components/Breadcrumbs/index.mdx index 8bf2641cb..5e79e1bde 100644 --- a/apps/docs/content/components/Breadcrumbs/index.mdx +++ b/apps/docs/content/components/Breadcrumbs/index.mdx @@ -7,6 +7,8 @@ import CustomVideoPlayer from '../../../src/components/custom-video-player' import ComponentLayout from '../../../src/layouts/component-layout' export default ComponentLayout +--- + ![An image showing examples of the two different options for breadcrumbs.](https://github.com/primer/design/assets/6951037/212c5aae-9289-4034-b079-860ba5362c9f) ## Usage