[TikiWiki-commits] [Git][tikiwiki/tiki][29.x] [BP][FIX] Breadcrumbs: use Bootstrap CSS-generated separators

"luci \(@luciash\) via TikiWiki-cvs" <[email protected]>
Newsgroups gmane.comp.cms.tiki.cvs
Message-ID <6964f776b2c4d_2c180d948455c@gitlab-sidekiq-low-urgency-cpu-bound-v2-5f7d6469f9-w4q4q.mail>

luci pushed to branch 29.x at Tiki Wiki CMS Groupware / Tiki


Commits:
cb0ccbc7 by Moïse Nturubika at 2026-01-12T13:22:02+00:00
[BP][FIX] Breadcrumbs: use Bootstrap CSS-generated separators
---
* [FIX] Breadcrumbs: use Bootstrap CSS-generated separators
---
* [FIX] Fix phpcs errors

* [FIX] Replace breadcrumb spacing CSS with Bootstrap utility classes

* [FIX] Adjust breadcrumb spacing for consistency in navigation

* [ENH] [ENH] Tiki filter on tiki-print_pages.php

* [ENH] [ENH] Tiki filter on tiki-poll_results.php

* [ENH] [ENH] Tiki filter on tiki-plugins.php

* [ENH] [ENH] Tiki filter on tiki-pick_avatar.php

* [ENH] [ENH] Tiki filter on tiki-performance_stats.php

* [ENH] [ENH] Tiki filter on tiki-peertube_video.php

* [ENH] [ENH] Tiki filter on tiki-pagehistory.php

* [ENH] [ENH] Tiki filter on tiki-page_contribution.php

* [ENH] [ENH] Tiki filter on tiki-old_polls.php

* [ENH] [ENH] Tiki filter on tiki-objectpermissions.php

* [ENH] [ENH] Tiki filter on tiki-notepad_write.php

* [ENH] [ENH] Tiki filter on tiki-notepad_read.php

* [ENH] [ENH] Tiki filter on tiki-notepad_list.php

* [FIX] Fix title translation

* [FIX] Fix breadcrumb markup to use Bootstrap CSS-generated separators

See merge request tikiwiki/tiki!8622

See merge request tikiwiki/tiki!9254

- - - - -


6 changed files:

- lib/breadcrumblib.php
- templates/categpath.tpl
- templates/modules/mod-breadcrumbs.tpl
- templates/tiki-wiki_structure_bar.tpl
- themes/base_files/scss/_tiki-bootstrap_overrides.scss
- themes/base_files/scss/_tiki-miscellaneous_global.scss


Changes:

=====================================
lib/breadcrumblib.php
=====================================
@@ -158,9 +158,13 @@ function _breadcrumb_buildTrail($crumbs, $len = -1, $cnt = -1, $showLinks = true
             }
         }
         $ret = array_filter($ret);
-        return implode($seper, $ret);
+        $wrapped = array_map(function ($crumb) {
+            return '<li class="breadcrumb-item pe-2">' . $crumb . '</li>';
+        }, $ret);
+        return implode('', $wrapped);
     } else {
-        return _breadcrumb_buildCrumb($crumbs, $cnt, $loclass, $showLinks);
+        $crumb = _breadcrumb_buildCrumb($crumbs, $cnt, $loclass, $showLinks);
+        return $crumb ? '<li class="breadcrumb-item pe-2">' . $crumb . '</li>' : '';
     }
 }
 


=====================================
templates/categpath.tpl
=====================================
@@ -1,9 +1,15 @@
-<span class="categpath">
-{foreach name=u key=k item=i from=$catp}
-    {if $catpathShowLink}
-    <a class="categpath" href="{$k|sefurl:category:'':'':y:$i}" title="{tr}Browse Category{/tr}">{$i|tr_if|escape|replace:' ':'&nbsp;'}</a>{if !$smarty.foreach.u.last}&nbsp;{$prefs.site_crumb_seper|escape:"html"}&nbsp;{/if}
-    {else}
-    {$i|tr_if|escape|replace:' ':'&nbsp;'} {if !$smarty.foreach.u.last}&nbsp;{$prefs.site_crumb_seper|escape:"html"}&nbsp;{/if}
-    {/if}
-{/foreach}
-</span>
+<nav class="categpath" aria-label="category breadcrumb">
+    <ol class="breadcrumb"{if $prefs.site_crumb_seper} style="--bs-breadcrumb-divider: '{$prefs.site_crumb_seper|escape:'quotes'}'"{/if}>
+        {foreach name=u key=k item=i from=$catp}
+            <li class="breadcrumb-item pe-2{if $smarty.foreach.u.last} active{/if}"{if $smarty.foreach.u.last} aria-current="page"{/if}>
+                {if $catpathShowLink and !$smarty.foreach.u.last}
+                    <a class="categpath" href="{$k|sefurl:category:'':'':y:$i}" title="{tr}Browse Category{/tr}">
+                        {$i|tr_if|escape|replace:' ':'&nbsp;'}
+                    </a>
+                {else}
+                    {$i|tr_if|escape|replace:' ':'&nbsp;'}
+                {/if}
+            </li>
+        {/foreach}
+    </ol>
+</nav>


=====================================
templates/modules/mod-breadcrumbs.tpl
=====================================
@@ -1,35 +1,49 @@
 {tikimodule error=$module_params.error title=$tpl_module_title name=$tpl_module_name flip=$module_params.flip decorations=$module_params.decorations nobox=$module_params.nobox notitle=$module_params.notitle}
     {strip}
     {if $prefs.feature_siteloc eq 'y' and $prefs.feature_breadcrumbs eq 'y'}
-        <div id="sitelocbar" class="breadcrumb">
+        <nav id="sitelocbar" aria-label="breadcrumb">
             {if !empty($module_params.label) and not $crumbs_all_hidden}{tr}{$module_params.label|escape:"html"}{/tr} {/if}
+            <ol class="breadcrumb"{if $prefs.site_crumb_seper} style="--bs-breadcrumb-divider: '{$prefs.site_crumb_seper|escape:'quotes'}'"{/if}>
             {if $trail}
                 {breadcrumbs type="trail" loc="site" crumbs=$trail showLinks=$module_params.showLinks|default:null}
             {else}
-                <a title="{tr}{$crumbs[0]->description}{/tr}" href="{$crumbs[0]->url}" accesskey="1">{$crumbs[0]->title}</a>
+                <li class="breadcrumb-item pe-2">
+                    <a title="{tr}{$crumbs[0]->description}{/tr}" href="{$crumbs[0]->url}" accesskey="1">{tr}{$crumbs[0]->title}{/tr}</a>
+                </li>
                 {if $structure eq 'y'}
                     {section loop=$structure_path name=ix}
-                        {$prefs.site_crumb_seper|escape:"html"}
-                        {if $structure_path[ix].pageName ne $page or $structure_path[ix].page_alias ne $page_info.page_alias}
-                            <a href="tiki-index.php?page_ref_id={$structure_path[ix].page_ref_id}">
-                        {/if}
-                        {if $structure_path[ix].page_alias}
-                            {$structure_path[ix].page_alias}
-                        {else}
-                            {$structure_path[ix].pageName}
-                        {/if}
-                        {if $structure_path[ix].pageName ne $page or $structure_path[ix].page_alias ne $page_info.page_alias}
-                            </a>
-                        {/if}
+                        <li class="breadcrumb-item pe-2">
+                            {if $structure_path[ix].pageName ne $page or $structure_path[ix].page_alias ne $page_info.page_alias}
+                                <a href="tiki-index.php?page_ref_id={$structure_path[ix].page_ref_id}">
+                                    {if $structure_path[ix].page_alias}
+                                        {$structure_path[ix].page_alias}
+                                    {else}
+                                        {$structure_path[ix].pageName}
+                                    {/if}
+                                </a>
+                            {else}
+                                {if $structure_path[ix].page_alias}
+                                    {$structure_path[ix].page_alias}
+                                {else}
+                                    {$structure_path[ix].pageName}
+                                {/if}
+                            {/if}
+                        </li>
                     {/section}
                 {elseif $module_params.showLast eq 'y'}
-                    {if $page ne ''}{$prefs.site_crumb_seper|escape:"html"} {$page|escape}
-                    {elseif $title ne ''}{$prefs.site_crumb_seper|escape:"html"} {$title}
-                    {elseif $thread_info.title ne ''}{$prefs.site_crumb_seper|escape:"html"} {$thread_info.title}
-                    {elseif $forum_info.name ne ''}{$prefs.site_crumb_seper|escape:"html"} {$forum_info.name}{/if}
+                    {if $page ne ''}
+                        <li class="breadcrumb-item pe-2">{$page|escape}</li>
+                    {elseif $title ne ''}
+                        <li class="breadcrumb-item pe-2">{$title}</li>
+                    {elseif $thread_info.title ne ''}
+                        <li class="breadcrumb-item pe-2">{$thread_info.title}</li>
+                    {elseif $forum_info.name ne ''}
+                        <li class="breadcrumb-item pe-2">{$forum_info.name}</li>
+                    {/if}
                 {/if}
             {/if}
-        </div>{* bar with location indicator *}
+            </ol>
+        </nav>{* bar with location indicator *}
         {if $trail}
             {breadcrumbs type="desc" loc="site" crumbs=$trail}
         {else}


=====================================
templates/tiki-wiki_structure_bar.tpl
=====================================
@@ -1,6 +1,6 @@
 {*<div class="tocnav row mx-0 justify-content-between">*}
 <nav class="nav-breadcrumb" aria-label="breadcrumb">
-        <ol class="breadcrumb mt-2 me-3 p-1 d-inline-flex justify-content-start align-content-center">
+        <div class="mt-2 me-3 p-1 d-inline-flex justify-content-start align-content-center">
             {if $home_info}{if !empty($home_info.page_alias)}{$icon_title=$home_info.page_alias}{else}{$icon_title=$home_info.pageName}{/if}
                 {if $prefs.feature_wiki_structure_drilldownmenu eq 'y'}
                     <span class="dropdown">
@@ -12,51 +12,50 @@
                         </ul>
                     </span>
                 {else}
-                    {self_link page=$home_info.pageName structure=$home_info.pageName page_ref_id=$home_info.page_ref_id _title="{tr}Structure:{/tr}$icon_title" _class="tips"}{icon name="home"}{/self_link}
+                    {self_link page=$home_info.pageName structure=$home_info.pageName page_ref_id=$home_info.page_ref_id _title="{tr}Structure:{/tr}$icon_title" _class="tips pe-2"}{icon name="home"}{/self_link}
                 {/if}
             {/if}
             {if $prev_info and $prev_info.page_ref_id}{if !empty($prev_info.page_alias)}{$icon_title=$prev_info.page_alias}{else}{$icon_title=$prev_info.pageName}{/if}
-                <a href="{sefurl page=$prev_info.pageName structure=$home_info.pageName page_ref_id=$prev_info.page_ref_id}" class="tips" title="{tr}Previous page:{/tr}{$icon_title}">
+                <a href="{sefurl page=$prev_info.pageName structure=$home_info.pageName page_ref_id=$prev_info.page_ref_id}" class="tips pe-2" title="{tr}Previous page:{/tr}{$icon_title}">
                     {icon name="caret-left"}
                 </a>
             {/if}
             {if $parent_info}{if !empty($parent_info.page_alias)}{$icon_title=$parent_info.page_alias}{else}{$icon_title=$parent_info.pageName}{/if}
-                <a href="{sefurl page=$parent_info.pageName structure=$home_info.pageName page_ref_id=$parent_info.page_ref_id}" class="tips" title="{tr}Parent page:{/tr}{$icon_title}">
+                <a href="{sefurl page=$parent_info.pageName structure=$home_info.pageName page_ref_id=$parent_info.page_ref_id}" class="tips pe-2" title="{tr}Parent page:{/tr}{$icon_title}">
                     {icon name="up"}
                 </a>
             {/if}
             {if $next_info and $next_info.page_ref_id}{if !empty($next_info.page_alias)}{$icon_title=$next_info.page_alias}{else}{$icon_title=$next_info.pageName}{/if}
-                <a href="{sefurl page=$next_info.pageName structure=$home_info.pageName page_ref_id=$next_info.page_ref_id}" class="tips" title="{tr}Next page:{/tr}{$icon_title}">
+                <a href="{sefurl page=$next_info.pageName structure=$home_info.pageName page_ref_id=$next_info.page_ref_id}" class="tips pe-2" title="{tr}Next page:{/tr}{$icon_title}">
                     {icon name="caret-right"}
                 </a>
             {/if}
-        </ol>
-        <ol class="breadcrumb mt-2 me-3 p-1 d-inline-flex align-content-center me-auto">
+        </div>
+        <ol class="breadcrumb mt-2 me-3 p-1 d-inline-flex align-content-center me-auto"{if $prefs.site_crumb_seper} style="--bs-breadcrumb-divider: '{$prefs.site_crumb_seper|escape:'quotes'}'"{/if}>
             {section loop=$structure_path name=ix}
-                {if $structure_path[ix].parent_id}&nbsp;{$prefs.site_crumb_seper}&nbsp;{/if}
-                    <li class="breadcrumb-item">
+                <li class="breadcrumb-item pe-2">
+
+                    {if !empty($smarty.section.ix.last) }
+
+                        {if $structure_path[ix].page_alias}
+                            {$structure_path[ix].page_alias|escape}
+                        {else}
+                            {$structure_path[ix].stripped_pageName|pagename}
+                        {/if}
 
-                        {if !empty($smarty.section.ix.last) }
+                    {else}
 
+                        <a href="{sefurl page=$structure_path[ix].pageName structure=$home_info.pageName page_ref_id=$structure_path[ix].page_ref_id}">
                             {if $structure_path[ix].page_alias}
                                 {$structure_path[ix].page_alias|escape}
                             {else}
                                 {$structure_path[ix].stripped_pageName|pagename}
                             {/if}
+                        </a>
 
-                        {else}
-
-                            <a href="{sefurl page=$structure_path[ix].pageName structure=$home_info.pageName page_ref_id=$structure_path[ix].page_ref_id}">
-                                {if $structure_path[ix].page_alias}
-                                    {$structure_path[ix].page_alias|escape}
-                                {else}
-                                    {$structure_path[ix].stripped_pageName|pagename}
-                                {/if}
-                            </a>
-
-                        {/if}
+                    {/if}
 
-                    </li>
+                </li>
             {/section}
         </ol>
         {if $struct_editable eq 'a'}
@@ -65,7 +64,7 @@
                         <input type="hidden" name="current_page_id" value="{$page_info.page_ref_id}">
                         <div class="input-group">
                             <div class="input-group-text" style="font-size:50% !important">
-                                {self_link _script="tiki-edit_structure.php" page_ref_id=$home_info.page_ref_id _class="tips" _title="{tr}Manage Stucture:{/tr}{$home_info.pageName} ($cur_pos)"}{icon name="structure"}{/self_link}
+                                {self_link _script="tiki-edit_structure.php" page_ref_id=$home_info.page_ref_id _class="tips pe-2" _title="{tr}Manage Stucture:{/tr}{$home_info.pageName} ($cur_pos)"}{icon name="structure"}{/self_link}
                             </div>
                             <input type="text" id="structure_add_page" name="page" class="form-control form-control-sm">
                             {autocomplete element='#structure_add_page' type='pagename'}


=====================================
themes/base_files/scss/_tiki-bootstrap_overrides.scss
=====================================
@@ -464,8 +464,11 @@ body.fullscreen.tiki.navbar-padding {
     .tiki.tiki_wiki_page .popover { max-width: 75%; }
 }
 
-// Override the default Bootstrap separator.
-.breadcrumb-item + .breadcrumb-item::before { content: none !important; }
+// Use Bootstrap's default separator mechanism driven by the CSS variable.
+// Individual templates can set --bs-breadcrumb-divider (e.g., via user pref site_crumb_seper).
+.breadcrumb-item + .breadcrumb-item::before {
+  content: var(--bs-breadcrumb-divider, "/");
+}
 
 // Restore pre-Bootstrap 5 top and bottom padding on vertical menu items
 .navbar-nav.me-auto.bs-vertical .nav-link,


=====================================
themes/base_files/scss/_tiki-miscellaneous_global.scss
=====================================
@@ -608,9 +608,6 @@ blockquote {
         margin: .8rem 0;
 }
 
-// Improve horizontal spacing of breadcrumb icons and separators
-.breadcrumb-item { padding-right: 0.5rem;}
-.breadcrumb .tips { padding-right: 0.5rem;}
 
 // Enable Smartmenus dropdown-menu to display above fixed-top header
 ul.sm-vertical,



View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/cb0ccbc72f70f17a8ae5c7f20234e1da3b33e948

-- 
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/cb0ccbc72f70f17a8ae5c7f20234e1da3b33e948
You're receiving this email because of your account on gitlab.com.

_______________________________________________
TikiWiki-cvs mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-cvs
lmpx.com only provides a reader for public news (NNTP) servers. It is not affiliated with the servers or forums shown here and is not responsible for the content of articles, which is written by their respective authors.