{"id":8115,"date":"2023-02-13T18:06:54","date_gmt":"2023-02-13T17:06:54","guid":{"rendered":"https:\/\/design.cnil.fr\/?page_id=8115"},"modified":"2023-02-17T16:39:46","modified_gmt":"2023-02-17T15:39:46","slug":"browsing-breadcrumb","status":"publish","type":"page","link":"https:\/\/design.cnil.fr\/en\/design-patterns\/browsing-breadcrumb\/","title":{"rendered":"[Browsing] Breadcrumb"},"content":{"rendered":"\n<div class=\"alignfull header color\">\n<p class=\"p1\"><span class=\"s1\">\n<\/span><\/p>\n<\/div>\n\n\n\n<div class=\"wrapper principles\">\n  <div class=\"sidebar principles\">\n    <div class=\"theiaStickySidebar\">\n      <div class=\"box\">\n       <div class=\"box-content\">\n\n\n\n<h3 class=\"wp-block-heading\">Breadcrumb<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"#use\">Using the pattern in the user journey<\/a><\/li><li><a href=\"#tips\">Tips<\/a><\/li><li><a href=\"#examples\">Examples<\/a><\/li><li><a href=\"#related-patterns\">Related patterns<\/a><\/li><\/ul>\n\n\n\n<\/div>\n  <\/div>\n\n\n\n<\/div>\n<\/div><div class=\"content examples\">\n    <div class=\"theiaStickySidebar\">\n      <div class=\"box\">\n\n\n\n<blockquote class=\"wp-block-quote\" style=\"color:#0013E4\"><p><em>This design pattern is part of the LINC\u2019s research initiative focusing on interface design. It comes from frequent proposals made by participants of the Data &amp; Design workshops to implement the principle of transparency provided in the GDPR. It can be used and adapted to the specific context of your services and products. However, its reuse as such do not guarantee compliance with the GDPR in general and the principle of transparency in particular.<\/em><\/p><\/blockquote>\n\n\n\n<p>This pattern makes it possible to locate and visualise the navigation path that the person has taken. It thus indicates at which level the person is in the service structure.&nbsp; This pattern is a visual navigation marker that makes it easy to retrace the path when it is composed of several levels.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"use\">Using the pattern in the user journey<\/h2>\n\n\n\n<p><strong>\u25ba<\/strong> <strong><strong>In a privacy policy<\/strong><\/strong> : If a breadcrumb is used in a privacy policy, it may include, at its end, the name of the section currently being viewed. The end of the breadcrumb is updated as you read and move from one section to another. It can also be clickable and display the titles of the parts that make it up by means of a drop-down menu. By clicking on a title, the person is redirected by an anchor to the corresponding part.<\/p>\n\n\n\n<p><strong>\u25ba <strong>When setting one\u2019s preferences<\/strong><\/strong> : if preferences are spread over thematic pages (e.g. use of logins, visibility of posts, use of browsing data), the breadcrumb facilitates the setting by allowing quick access to other settings, or to go back.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"tips\">Tips<\/h2>\n\n\n\n<p><strong>\u25ba<\/strong> The breadcrumb is designed to help navigation through several pages. To facilitate navigation within a single page, it is best to use a <a href=\"https:\/\/design.cnil.fr\/en\/design-patterns\/browsing-table-of-contents-as-a-browsing-menu\/\">navigable table of contents<\/a>.<\/p>\n\n\n\n<p><strong>\u25ba<\/strong> The page titles displayed in the breadcrumb must be clear and relevant, that means they must correspond to the pages they refer to.<\/p>\n\n\n\n<p><strong>\u25ba<\/strong> In order to facilitate navigation for people using a screen reader, it is recommended to tag the current page in a breadcrumb with the HTML attribute aria-current.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"examples\">Examples<\/h2>\n\n\n\n<div class=\"wp-block-columns has-2-columns block-ex-1col is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Possible approach<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"900\" src=\"https:\/\/design.cnil.fr\/wp-content\/uploads\/2023\/02\/BreadCrumb-Ex1.png\" alt=\"\" class=\"wp-image-8338\" srcset=\"https:\/\/design.cnil.fr\/wp-content\/uploads\/2023\/02\/BreadCrumb-Ex1.png 1440w, https:\/\/design.cnil.fr\/wp-content\/uploads\/2023\/02\/BreadCrumb-Ex1-300x188.png 300w, https:\/\/design.cnil.fr\/wp-content\/uploads\/2023\/02\/BreadCrumb-Ex1-768x480.png 768w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><figcaption><em>The breadcrumb highlights the path taken by the person to obtain information about a data item. At any time, the person can go back up this path by clicking on one of its stages (e.g. &#8220;settings and confidentiality&#8221;).<\/em><\/figcaption><\/figure><\/div>\n\n\n\n<p><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-2-columns block-ex-1col is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Possible approach (animation)<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"900\" src=\"https:\/\/design.cnil.fr\/wp-content\/uploads\/2023\/02\/Breadcrumb-Ex2.gif\" alt=\"\" class=\"wp-image-8336\"\/><figcaption><em>Here, the breadcrumb takes up the entire privacy policy tree and allows you to navigate through it using a drop-down menu. <\/em>&nbsp;<\/figcaption><\/figure><\/div>\n\n\n\n<p><\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"related-patterns\">Related patterns<\/h2>\n\n\n\n<div class=\"wp-block-columns has-3-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column home-block is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"616\" height=\"362\" src=\"https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/07\/Naviguer-Table-des-mati\u00e8res.png\" alt=\"\" class=\"wp-image-6971\" srcset=\"https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/07\/Naviguer-Table-des-mati\u00e8res.png 616w, https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/07\/Naviguer-Table-des-mati\u00e8res-300x176.png 300w\" sizes=\"auto, (max-width: 616px) 100vw, 616px\" \/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-button aligncenter is-style-outline home-block__link is-style-outline--1\"><a class=\"wp-block-button__link\" href=\"https:\/\/design.cnil.fr\/en\/design-patterns\/browsing-table-of-contents-as-a-browsing-menu\/\">Table of contents as a browsing menu<\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column home-block is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"616\" height=\"362\" src=\"https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/07\/Structurer-Niveaux-dinformation.png\" alt=\"\" class=\"wp-image-6992\" srcset=\"https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/07\/Structurer-Niveaux-dinformation.png 616w, https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/07\/Structurer-Niveaux-dinformation-300x176.png 300w\" sizes=\"auto, (max-width: 616px) 100vw, 616px\" \/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-button aligncenter is-style-outline home-block__link is-style-outline--2\"><a class=\"wp-block-button__link\" href=\"https:\/\/design.cnil.fr\/en\/design-patterns\/layered-information\/\">Layered Information<\/a><\/div>\n\n\n\n<p><\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><\/h2>\n\n\n\n<\/div>\n  <\/div>\n <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Breadcrumb Using the pattern in the user journey Tips Examples Related patterns This design pattern is part of the LINC\u2019s research initiative focusing on interface design. It comes from frequent proposals made by participants of the Data &amp; Design workshops to implement the principle of transparency provided in the GDPR. It can be used and &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/design.cnil.fr\/en\/design-patterns\/browsing-breadcrumb\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;[Browsing] Breadcrumb&#8221;<\/span><\/a><\/p>\n","protected":false},"author":11,"featured_media":0,"parent":6957,"menu_order":16,"comment_status":"closed","ping_status":"closed","template":"template-parts\/page-principles-subpage.php","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-8115","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/design.cnil.fr\/en\/wp-json\/wp\/v2\/pages\/8115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/design.cnil.fr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/design.cnil.fr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/design.cnil.fr\/en\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/design.cnil.fr\/en\/wp-json\/wp\/v2\/comments?post=8115"}],"version-history":[{"count":12,"href":"https:\/\/design.cnil.fr\/en\/wp-json\/wp\/v2\/pages\/8115\/revisions"}],"predecessor-version":[{"id":8403,"href":"https:\/\/design.cnil.fr\/en\/wp-json\/wp\/v2\/pages\/8115\/revisions\/8403"}],"up":[{"embeddable":true,"href":"https:\/\/design.cnil.fr\/en\/wp-json\/wp\/v2\/pages\/6957"}],"wp:attachment":[{"href":"https:\/\/design.cnil.fr\/en\/wp-json\/wp\/v2\/media?parent=8115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}