breadcrumb variants

8f355f28 · codecalm · 50cd04c4 · 8f355f28 · 8f355f28 · 8f355f28
5 changed file
--- a/pages/_docs/breadcrumb.md
+++ b/pages/_docs/breadcrumb.md
 ---
 title: Breadcrumb
 menu: docs.breadcrumb
+description: A breadcrumb navigation provide links back to each previous page the user navigated through, and shows the user's current location in a website.
 ---

-## Default markup
+### Default markup

 {% example %}
 {% include ui/breadcrumb.html %}
 {% endexample %}

-## Breadcrumb variations
+### Breadcrumb variations
+
+You can add more variations by modify `$breadcrumb-variants` variable in Tabler config.

 {% example %}
 {% include ui/breadcrumb.html class="breadcrumb-dots" %}
+{% endexample %}
+
+{% example %}
 {% include ui/breadcrumb.html class="breadcrumb-arrows" %}
 {% endexample %}
+
+{% example %}
+{% include ui/breadcrumb.html class="breadcrumb-bullets" %}
+{% endexample %}
+
+### Alternate version
+
+{% example %}
+{% include ui/breadcrumb.html class="breadcrumb-alternate" %}
+{% endexample %}
--- a/pages/_includes/ui/breadcrumb.html
+++ b/pages/_includes/ui/breadcrumb.html
 {% assign pages = include.pages | default: "Home,Library,Data" | split: "," %}
-<ol class="breadcrumb{% if include.class %} {{ include.class }}{% endif %}">
+<ol class="breadcrumb{% if include.class %} {{ include.class }}{% endif %}" aria-label="breadcrumbs">
   {% for page in pages %}
   {% if forloop.last %}
   <li class="breadcrumb-item active" aria-current="page">{{ page }}</li>

--- a/pages/_layouts/base.html
+++ b/pages/_layouts/base.html
@@ -18,9 +18,13 @@
 	<link rel="icon" href="{{ site.base }}/favicon.ico" type="image/x-icon"/>
 	<link rel="shortcut icon" href="{{ site.base }}/favicon.ico" type="image/x-icon"/>

-	<title>{% if page.title %}{{ page.title }} - {% endif %}{% if layout.title %}{{ layout.title }} - {% endif %}{% if site.title %}{{ site.title }} - {% endif %}{{ site.description }}</title>
+   <title>{% if page.title %}{{ page.title }} - {% endif %}{% if layout.title %}{{ layout.title }} - {% endif %}{% if site.title %}{{ site.title }} - {% endif %}{{ site.description }}</title>

-	{% include layout/css.html %}
+   {% if page.description %}
+   <meta name="description" content="{{ page.description | escape }}" />
+   {% endif %}
+
+   {% include layout/css.html %}
   <style>body { display: none; }</style>
 </head>
 <body class="antialiased {% if page.dark-theme %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">

--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -217,6 +217,13 @@ $btn-font-weight: 600 !default;
 $btn-font-size: 14px !default;
 $btn-border-radius: 3px !default;

+//breadcrumb
+$breadcrumb-variants: (
+  dots: '·',
+  arrows: '›',
+  bullets: '\02022',
+) !default;
+
 //pagination
 $pagination-border-width: 0 !default;
 $pagination-padding-y: .25rem !default;

--- a/scss/ui/_breadcrumbs.scss
+++ b/scss/ui/_breadcrumbs.scss
@@ -4,16 +4,16 @@
  background: transparent;
 }

-.breadcrumb-dots {
-  .breadcrumb-item + .breadcrumb-item::before {
-    content: '·';
+@each $name, $symbol in $breadcrumb-variants {
+  .breadcrumb-#{$name} {
+    .breadcrumb-item + .breadcrumb-item::before {
+      content: $symbol;
+    }
  }
 }

-.breadcrumb-arrows {
-  .breadcrumb-item + .breadcrumb-item::before {
-    content: $icon-fe-chevron-right;
-    font-family: $font-icons;
-    vertical-align: bottom;
+.breadcrumb-alternate {
+  a {
+    color: $body-color;
  }
 }