Add breadcrumb

client/App.jsx

@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 
 import Home from './Home';
 import Badge from './layouts/badge/Details';
+import Breadcrumb from './layouts/breadcrumb/Details';
 import ButtonWithIcon from './layouts/button-with-icon/Details';
 import Card from './layouts/card/Details';
 import Centering from './layouts/centering/Details';
@@ -29,6 +30,7 @@ const App = () => {
             <Switch>
                 <Route exact={true} path='/'><Home /></Route>
                 <Route exact={true} path='/badge'><Badge /></Route>
+                <Route exact={true} path='/breadcrumb'><Breadcrumb /></Route>
                 <Route exact={true} path='/button-with-icon'><ButtonWithIcon /></Route>
                 <Route exact={true} path='/card'><Card /></Route>
                 <Route exact={true} path='/centering'><Centering /></Route>

client/Home.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 import BadgeCover from './layouts/badge/Cover';
+import BreadcrumbCover from './layouts/breadcrumb/Cover';
 import ButtonWithIconCover from './layouts/button-with-icon/Cover';
 import CardCover from './layouts/card/Cover';
 import CenterCover from './layouts/centering/Cover';
@@ -50,31 +51,31 @@ const Home = () => {
                     <div className="pa1 w-20">
                         <Link to="/holy-grail" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
                             <HolyGrailCover />
-                            <h4 className="f4 mv0 pt3">Holy grail</h4>
+                            <h4 className="f5 mv0 pt3">Holy grail</h4>
                         </Link>
                     </div>
                     <div className="pa1 w-20">
                         <Link to="/sidebar" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
                             <SidebarCover />
-                            <h4 className="f4 mv0 pt3">Sidebar</h4>
+                            <h4 className="f5 mv0 pt3">Sidebar</h4>
                         </Link>
                     </div>
                     <div className="pa1 w-20">
                         <Link to="/split-screen" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
                             <SplitScreenCover />
-                            <h4 className="f4 mv0 pt3">Split screen</h4>
+                            <h4 className="f5 mv0 pt3">Split screen</h4>
                         </Link>
                     </div>
                     <div className="pa1 w-20">
                         <Link to="/sticky-footer" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
                             <StickyFooterCover />
-                            <h4 className="f4 mv0 pt3">Sticky footer</h4>
+                            <h4 className="f5 mv0 pt3">Sticky footer</h4>
                         </Link>
                     </div>
                     <div className="pa1 w-20">
                     <Link to="/sticky-header" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
                         <StickyHeaderCover />
-                        <h4 className="f4 mv0 pt3">Sticky header</h4>
+                        <h4 className="f5 mv0 pt3">Sticky header</h4>
                     </Link>
                     </div>
                 </div>
@@ -85,91 +86,97 @@ const Home = () => {
                     <div className="pa1 w-20">
                         <Link to="/badge" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
                             <BadgeCover />
-                            <h4 className="f4 mv0 pt3">Badge</h4>
+                            <h4 className="f5 mv0 pt3">Badge</h4>
+                        </Link>
+                    </div>
+                    <div className="pa1 w-20">
+                        <Link to="/breadcrumb" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
+                            <BreadcrumbCover />
+                            <h4 className="f5 mv0 pt3">Breadcrumb</h4>
                         </Link>
                     </div>
                     <div className="pa1 w-20">
                         <Link to="/button-with-icon" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
                             <ButtonWithIconCover />
-                            <h4 className="f4 mv0 pt3">Button with icon</h4>
+                            <h4 className="f5 mv0 pt3">Button with icon</h4>
                         </Link>
                     </div>
                     <div className="pa1 w-20">
                         <Link to="/card" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
                             <CardCover />
-                            <h4 className="f4 mv0 pt3">Card</h4>
+                            <h4 className="f5 mv0 pt3">Card</h4>
                         </Link>
                     </div>
                     <div className="pa1 w-20">
                         <Link to="/centering" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
                             <CenterCover />
-                            <h4 className="f4 mv0 pt3">Centering</h4>
+                            <h4 className="f5 mv0 pt3">Centering</h4>
                         </Link>
                     </div>
                     <div className="pa1 w-20">
                         <Link to="/fixed-at-corner" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
                             <FixedAtCornerCover />
-                            <h4 className="f4 mv0 pt3">Fixed at corner</h4>
+                            <h4 className="f5 mv0 pt3">Fixed at corner</h4>
                         </Link>
                     </div>
                     <div className="pa1 w-20">
                         <Link to="/input-add-on" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
                             <InputAddonCover />
-                            <h4 className="f4 mv0 pt3">Input addon</h4>
+                            <h4 className="f5 mv0 pt3">Input addon</h4>
                         </Link>
                     </div>
                     <div className="pa1 w-20">
                         <Link to="/media-object" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
                             <MediaObjectCover />
-                            <h4 className="f4 mv0 pt3">Media object</h4>
+                            <h4 className="f5 mv0 pt3">Media object</h4>
                         </Link>
                     </div>
                     <div className="pa1 w-20">
                         <Link to="/menu" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
                             <MenuCover />
-                            <h4 className="f4 mv0 pt3">Menu</h4>
+                            <h4 className="f5 mv0 pt3">Menu</h4>
                         </Link>
                     </div>
                     <div className="pa1 w-20">
                         <Link to="/modal" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
                             <ModalCover />
-                            <h4 className="f4 mv0 pt3">Modal</h4>
+                            <h4 className="f5 mv0 pt3">Modal</h4>
                         </Link>
                     </div>
                     <div className="pa1 w-20">
                         <Link to="/notification" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
                             <NotificationCover />
-                            <h4 className="f4 mv0 pt3">Notification</h4>
+                            <h4 className="f5 mv0 pt3">Notification</h4>
                         </Link>
                     </div>
                     <div className="pa1 w-20">
                         <Link to="/pagination" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
                             <PaginationCover />
-                            <h4 className="f4 mv0 pt3">Pagination</h4>
+                            <h4 className="f5 mv0 pt3">Pagination</h4>
                         </Link>
                     </div>
                     <div className="pa1 w-20">
                         <Link to="/previous-next-buttons" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
                             <PreviousNextButtonCover />
-                            <h4 className="f4 mv0 pt3">Previous next buttons</h4>
+                            <h4 className="f5 mv0 pt3">Previous next buttons</h4>
                         </Link>
                     </div>
                     <div className="pa1 w-20">
                         <Link to="/progress-bar" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
                             <ProgressBarCover />
-                            <h4 className="f4 mv0 pt3">Progress bar</h4>
+                            <h4 className="f5 mv0 pt3">Progress bar</h4>
                         </Link>
                     </div>
                     <div className="pa1 w-20">
                         <Link to="/same-height-columns" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
                             <SameHeightColumnsCover />
-                            <h4 className="f4 mv0 pt3">Same height columns</h4>
+                            <h4 className="f5 mv0 pt3">Same height columns</h4>
                         </Link>
                     </div>
                     <div className="pa1 w-20">
                         <Link to="/stepper-input" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
                             <StepperInputCover />
-                            <h4 className="f4 mv0 pt3">Stepper input</h4>
+                            <h4 className="f5 mv0 pt3">Stepper input</h4>
                         </Link>
                     </div>
                 </div>

client/layouts/breadcrumb/Cover.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Cover = () => {
+    return (
+        <Frame>
+            <div className="h-100 flex flex-column items-center justify-center">
+                <div className="flex items-center justify-center h2 w-80">
+                    <div className="w-20"><Rectangle /></div>
+                    <div className="mh1 black">/</div>
+                    <div className="w-20"><Rectangle /></div>
+                    <div className="mh1 black">/</div>
+                    <div className="w-20"><Rectangle /></div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/layouts/breadcrumb/Details.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import DetailsLayout from '../../DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+import SampleCode from '../../SampleCode';
+import useDocumentTitle from '../../hooks/useDocumentTitle';
+
+const Details = () => {
+    useDocumentTitle('CSS Layout ∙ Breadcrumb');
+
+    return (
+        <DetailsLayout>
+            <h1 className="f1 tc">Breadcrumb</h1>
+            <BrowserFrame
+                content={
+                    <div className="h-100 flex flex-column items-center justify-center">
+                        <div className="flex items-center">
+                            <div className="w4"><Rectangle height={16} /></div>
+                            <div className="mh1 f2 black-30">/</div>
+                            <div className="w2"><Rectangle height={16} /></div>
+                            <div className="mh1 f2 black-30">/</div>
+                            <div className="w3"><Rectangle height={16} /></div>
+                            <div className="mh1 f2 black-30">/</div>
+                            <div className="w2"><Rectangle height={16} /></div>
+                        </div>
+                    </div>
+                }
+                source={
+<SampleCode
+lang="html"
+code={`
+<div style="
+    /* Content is centered vertically */
+    align-items: center;
+    display: flex;
+">
+    <!-- Breadcrumb item -->
+    <a>...</a>
+
+    <!-- Separator -->
+    <div style="margin: 0 8px;">/</span>
+
+    <!-- Repeated items and separators -->
+    ...
+</div>
+`}
+/>
+                }
+            />
+        </DetailsLayout>
+    );
+};
+
+export default Details;