@salesforce-ux/design-system/__internal/chunked/docs/ui/components/breadcrumbs/docs.mdx.js

Salesforce Lightning Design System

var SLDS;!function(){"use strict";var e,t,n,r={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},2643:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return S},getElement:function(){return _}});var r=n(1594),o=n.n(r),a=n(5671),i=n(6547),l=n(806),c=(n(5619),n(8342)),u=n(2747),s=n(6955),d=n(4760),m=u.A.Crumb,f=o().createElement(s.A,{className:"slds-button_icon-border-filled slds-button_icon-x-small",symbol:"threedots",assistiveText:"Show More","aria-haspopup":"true",title:"Show More"}),b=function(e){return o().createElement(d.l9,{isOpen:!0,triggerIcon:f},o().createElement(d.W1,{className:"slds-dropdown_left slds-dropdown_actions"},o().createElement(d.cO,null,o().createElement(d.Dr,{tabIndex:"0"},"Menu Item One"),o().createElement(d.Dr,null,"Menu Item Two"),o().createElement(d.Dr,null,"Menu Item Three"))))},h=function(e){var t=e.kineticsEnabled;return o().createElement(u.A,{kxScopeBreadcrumbsItem:t,kxTypeUnderline:t},o().createElement(m,null,"Parent Entity"),o().createElement(m,null,"Parent Record Name"))},p=function(e){var t=e.kineticsEnabled;return o().createElement(u.A,{kxScopeBreadcrumbsItem:t,kxTypeUnderline:t,listClassNames:"slds-grid_vertical-align-center"},o().createElement(m,{hasMenu:!0},o().createElement(b,null)),o().createElement(m,null,"Parent Entity"),o().createElement(m,null,"Parent Record Name"))},v=o().createElement(h,null),y=[{id:"breadcrumbs-overflow",label:"With Overflow Menu",demoStyles:"height: 200px;",storybookStyles:!0,element:o().createElement(p,null)}],O=a.XB.code,g=a.XB.h2,E=a.XB.h3,w=a.XB.p,_=function(){return(0,r.createElement)(a.Ay,{},(0,r.createElement)("div",{className:"doc lead"},"Use breadcrumbs to note the path of a record and help the user to navigate back to the parent."),(0,r.createElement)(i.A,{exampleOnly:!0},(0,l.NO)(v)),g({id:"About-Breadcrumbs"},"About Breadcrumbs"),w({},"Breadcrumbs are typically constructed with an ",O({},"ol")," because their order matters. You mark up breadcrumbs with classes from the horizontal list utility. When you add the ",O({},"slds-breadcrumb")," class, the separators are automatically generated."),E({id:"Accessibility"},"Accessibility"),w({},"Place the breadcrumb in a ",O({},"nav")," element with ",O({},'role="navigation"'),". The ",O({},"nav")," element is also marked-up with ",O({},'aria-label="Breadcrumbs"')," to describe the type of navigation."),g({id:"Base"},"Base"),(0,r.createElement)(i.A,null,(0,l.NO)(v)),g({id:"Variations"},"Variations"),E({id:"With-Overflow"},"With Overflow"),w({},"The overflow menu breadcrumbs variant is a composition of the overflow menu with actions example of the menus component and breadcrumbs component. To implement this, include the overflow menu as the first ",O({},"<li>")," in the breadcrumb component. In order to vertically align all of the breadcrumb items to the center, add the ",O({},"slds-grid_vertical-align-center")," class to the ",O({},"<ol>"),"."),(0,r.createElement)(i.A,{demoStyles:"height: 150px;"},(0,l.NO)(y,"breadcrumbs-overflow")),g({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),(0,r.createElement)(c.A,{name:"breadcrumbs",type:"component"}))},S=function(){return(0,a.Qr)(_())}},5206:function(e){e.exports=ReactDOM}},o={};function a(e){var t=o[e];if(void 0!==t)return t.exports;var n=o[e]={id:e,exports:{}};return r[e](n,n.exports,a),n.exports}a.m=r,a.amdO={},e=[],a.O=function(t,n,r,o){if(!n){var i=1/0;for(s=0;s<e.length;s++){n=e[s][0],r=e[s][1],o=e[s][2];for(var l=!0,c=0;c<n.length;c++)(!1&o||i>=o)&&Object.keys(a.O).every(function(e){return a.O[e](n[c])})?n.splice(c--,1):(l=!1,o<i&&(i=o));if(l){e.splice(s--,1);var u=r();void 0!==u&&(t=u)}}return t}o=o||0;for(var s=e.length;s>0&&e[s-1][2]>o;s--)e[s]=e[s-1];e[s]=[n,r,o]},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},a.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var o=Object.create(null);a.r(o);var i={};t=t||[null,n({}),n([]),n(n)];for(var l=2&r&&e;("object"==typeof l||"function"==typeof l)&&!~t.indexOf(l);l=n(l))Object.getOwnPropertyNames(l).forEach(function(t){i[t]=function(){return e[t]}});return i.default=function(){return e},a.d(o,i),o},a.d=function(e,t){for(var n in t)a.o(t,n)&&!a.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},a.e=function(){return Promise.resolve()},a.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.j=7435,function(){var e={7435:0};a.O.j=function(t){return 0===e[t]};var t=function(t,n){var r,o,i=n[0],l=n[1],c=n[2],u=0;if(i.some(function(t){return 0!==e[t]})){for(r in l)a.o(l,r)&&(a.m[r]=l[r]);if(c)var s=c(a)}for(t&&t(n);u<i.length;u++)o=i[u],a.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return a.O(s)},n=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}(),a.nc=void 0;var i=a.O(void 0,[3540],function(){return a(2643)});i=a.O(i),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/breadcrumbs/docs.mdx.js"]=i}();