diff --git a/contents/_includes/covers/breadcrumb.njk b/contents/_includes/covers/breadcrumb.njk new file mode 100644 index 0000000..29584b3 --- /dev/null +++ b/contents/_includes/covers/breadcrumb.njk @@ -0,0 +1,6 @@ +
+
A
+
B
+
C
+
D
+
\ No newline at end of file diff --git a/contents/breadcrumb.md b/contents/breadcrumb.md new file mode 100644 index 0000000..242eb78 --- /dev/null +++ b/contents/breadcrumb.md @@ -0,0 +1,47 @@ +--- +layout: layouts/post.njk +title: Breadcrumb +description: Create a breadcrumb with CSS flexbox +keywords: css breadcrumb, css flexbox +--- + +## HTML + +```html +
+ +
...
+ + + ... +
+``` + +## CSS + +```css +.breadcrumb { + /* Content is centered vertically */ + align-items: center; + display: flex; +} + +.breadcrumb__item { + margin: 0 0.5rem; + + /* Used to position the separator between items */ + position: relative; +} + +.breadcrumb__item:not(:last-child)::after { + /* Absolute position */ + position: absolute; + right: 0; + top: 0; + transform: translate(0.5rem, 0px); + + content: '/'; +} +``` + +{% demo %}{% include "covers/breadcrumb.njk" %}{% enddemo %} diff --git a/contents/index.njk b/contents/index.njk index 1892320..ff8aefb 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -122,5 +122,12 @@ eleventyExcludeFromCollections: true +
+

Navigation

+
+ {% pattern "Breadcrumb" %}{% include "covers/breadcrumb.njk" %}{% endpattern %} +
+
+ {% include "follow.njk" %} \ No newline at end of file diff --git a/pages/breadcrumb/index.tsx b/pages/breadcrumb/index.tsx deleted file mode 100644 index e0b0d7a..0000000 --- a/pages/breadcrumb/index.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import * as React from 'react'; -import Head from 'next/head'; - -import { Pattern } from '../../constants/Pattern'; -import { PatternLayout } from '../../layouts/PatternLayout'; -import BrowserFrame from '../../placeholders/BrowserFrame'; -import Rectangle from '../../placeholders/Rectangle'; - -const Details: React.FC<{}> = () => { - return ( - - - - - - - - - - ... - - -
/
- - - ... - -`} - css={` - .breadcrumb { - /* Content is centered vertically */ - align-items: center; - display: flex; - } - - .breadcrumb__separator { - margin: 0 8px; - } - `} - > -
-
-
- -
-
/
-
- -
-
/
-
- -
-
/
-
- -
-
-
- - - ); -}; - -export default Details; diff --git a/patterns/breadcrumb/Cover.tsx b/patterns/breadcrumb/Cover.tsx deleted file mode 100644 index 6afc9ab..0000000 --- a/patterns/breadcrumb/Cover.tsx +++ /dev/null @@ -1,50 +0,0 @@ -/** - * A collection of popular layouts and patterns made with CSS (https://csslayout.io) - * (c) 2019 - 2021 Nguyen Huu Phuoc - */ - -import * as React from 'react'; - -import Frame from '../../placeholders/Frame'; -import Rectangle from '../../placeholders/Rectangle'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
-
- -
-
/
-
- -
-
/
-
- -
-
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index 878acc2..bb893f5 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -16,6 +16,7 @@ @import './patterns/avatar'; @import './patterns/avatar-list'; @import './patterns/badge'; +@import './patterns/breadcrumb'; @import './patterns/button-with-icon'; @import './patterns/card-layout'; @import './patterns/card'; diff --git a/styles/patterns/_breadcrumb.scss b/styles/patterns/_breadcrumb.scss new file mode 100644 index 0000000..dfac1f9 --- /dev/null +++ b/styles/patterns/_breadcrumb.scss @@ -0,0 +1,20 @@ +.breadcrumb { + /* Content is centered vertically */ + align-items: center; + display: flex; +} + +.breadcrumb__item { + margin: 0 0.5rem; + position: relative; +} + +.breadcrumb__item:not(:last-child)::after { + /* Absolute position */ + position: absolute; + right: 0; + top: 0; + transform: translate(0.5rem, 0px); + + content: '/'; +} \ No newline at end of file