Simple Dynamic Breadcrumb

Simple dynamic breadcrumb

Hmm, from the examples you gave it seems like "$_SERVER['REQUEST_URI']" and the explode() function could help you. You could use explode to break up the URL following the domain name into an array, separating it at each forward-slash.

As a very basic example, something like this could be implemented:

$crumbs = explode("/",$_SERVER["REQUEST_URI"]);
foreach($crumbs as $crumb){
    echo ucfirst(str_replace(array(".php","_"),array(""," "),$crumb) . ' ');
}

PHP Dynamic Breadcrumb

This should work:

$crumbs = array_filter($crumbs);

$result = array(); $path = '';
//might need to subtract one from the count...
$count = count($crumbs);
foreach($crumbs as $k=>$crumb){
     $path .= '/' . $crumb;
     $name = ucfirst(str_replace(array(".php","_"),array(""," "), $crumb));
     if($k != $count){
         $result[] = "<a href=\"$path\">$name</a>";
     } else {
         $result[] = $name;
     }
}

print implode(' > ', $result);

How to create a dynamic breadcrumb navigation for .net core razor pages?

To solve this I found this project - https://github.com/zHaytam/SmartBreadcrumbs

1. Simply install the NuGet package Install-Package SmartBreadcrumbs
2. Initialize it in the startup services.AddBreadcrumbs(GetType().Assembly);
3. In _ViewImports.cshtml, add @addTagHelper *, SmartBreadcrumbs
4. In your _Layout.cshml (or specific pages), use <breadcrumb></breadcrumb>.
5. On your default/ home page, add this annotation to the class [DefaultBreadcrumb("Home")]
6. And on other pages add this to the class [Breadcrumb("Bookings")]
7. Add if you want to link to a prevouse page add this to the class [Breadcrumb("Details", FromPage = typeof(IndexModel))]

Then if you want to customize the look of it simply update the start by adding the CSS classes you want to use -

services.AddBreadcrumbs(GetType().Assembly, options =>
{
    options.TagName = "nav";
    options.TagClasses = "";
    options.OlClasses = "breadcrumb";
    options.LiClasses = "breadcrumb-item";
    options.ActiveLiClasses = "breadcrumb-item active";
    options.SeparatorElement = "<li class=\"separator\">/</li>";
});

jquery - dynamic breadcrumb

example http://jsfiddle.net/mPsez/3/

$('.items a').on('click', function() {
  var $this = $(this),
      $bc = $('<div class="item"></div>');

  $this.parents('li').each(function(n, li) {
      var $a = $(li).children('a').clone();
      $bc.prepend(' / ', $a);
  });
    $('.breadcrumb').html( $bc.prepend('<a href="#home">Home</a>') );
    return false;
}) 

PHP Breadcrumbs

You're generating your URL wrong. Notice how you're echoing $crumbs array into a href attribute. You should start your url with your site root url and on every foreach loop pass, add appropriate piece of string

$url = "http://www.yoursite.com";

<div class="breadcrumb">
    <ul>
        <li><a href="<?php echo $url ?>">Home</a></li>
        <?php foreach($crumbs as $crumb){
          $url .= "/".$crumb;
        ?>
            <li><a href="<?php echo $url; ?>"><?php echo $crumb; ?></a></li>
        <?php } ?>
    </ul>
</div>

Angular 2 Dynamic Breadcrumbs

I hope it's not too late to answer this question :D, so here is a working CodeSandbox example with two breadcrumb implementations, that uses the router data option to pass and collect data for the breadcrumb.

Code explanation:

Look at the comments inside the breadcrumb component.

Here is the breacrumb component

import { Component, OnInit } from "@angular/core";

import {

  Router,

  Event,

  ActivationStart,

  ActivatedRouteSnapshot,

  ActivationEnd,

  NavigationEnd,

  NavigationStart

} from "@angular/router";

import { filter, map, buffer, pluck } from "rxjs/operators";

/**

 * Check if an angular router 'Event' is instance of 'NavigationEnd' event

 */

const isNavigationEnd = (ev: Event) => ev instanceof NavigationEnd;

/**

 * Check if an angular router 'Event' is instance of 'NavigationEnd' event

 */

const isActivationEnd = (ev: Event) => ev instanceof ActivationEnd;

@Component({

  selector: "app-breadcrumb",

  templateUrl: "./breadcrumb.component.html",

  styleUrls: ["./breadcrumb.component.scss"]

})

export class BreadcrumbComponent implements OnInit {

  bcLoadedData;

  bcForDisplay;

  constructor(private router: Router) {}

  ngOnInit() {

    /**

     * navigationEnd$ is trigered once per completed routing event, in other words

     * once per loading a component that is in the end of the current route

     */

    const navigationEnd$ = this.router.events.pipe(filter(isNavigationEnd));

    /**

     * Here we subscribe to all navigation events, in order to update

     * our route "data", which we will use for the breadcrumb visualization.

     *

     * Than we filter the events emitted from the `router` in such way, that we are only

     * taking action upon a completed router event (in other words we are subscribing only for `ActivationEnd`

     * events)

     *

     * We use pluck to get only the requried bredcrumb data

     *

     * The buffer operator accumulates all `data` coming from the router and emmits the accumulated data once

     * when a `NavigationEnd` event passes troufh `navigationEnd$`

     *

     * The `map` in the end is used to reverse the collected data, in order to convert it to more logical

     * sequence. Without the revers first we will get the data for the current route, after that for it's parent

     * and so on (that is how the ng router works).

     */

    this.router.events

      .pipe(

        filter(isActivationEnd),

        pluck("snapshot"),

        pluck("data"),

        buffer(navigationEnd$),

        map((bcData: any[]) => bcData.reverse())

      )

      .subscribe(x => {

        this.bcLoadedData = x;

      });

  }

}

How to create dynamic 'Breadcrumbs' in Nuxt.js

Here a breadcrumb component I used in old project. Feel free to adapt it to your needs. It's use buefy/bulma.

<template>
  <div class="level">
    <div class="level-left">
      <div class="level-item">
        <a class="button is-white" @click="$router.back()">
          <b-icon icon="chevron-left" size="is-medium" />
        </a>
      </div>
      <div class="level-item">
        <nav class="breadcrumb" aria-label="breadcrumbs">
          <ul>
            <li v-for="(item, i) in crumbs" :key="i" :class="item.classes">
              <nuxt-link :to="item.path">
                {{ item.name }}
              </nuxt-link>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    crumbs() {
      const crumbs = []
      this.$route.matched.forEach((item, i, { length }) => {
        const crumb = {}
        crumb.path = item.path
        crumb.name = this.$i18n.t('route.' + (item.name || item.path))

        // is last item?
        if (i === length - 1) {
          // is param route? .../.../:id
          if (item.regex.keys.length > 0) {
            crumbs.push({
              path: item.path.replace(/\/:[^/:]*$/, ''),
              name: this.$i18n.t('route.' + item.name.replace(/-[^-]*$/, ''))
            })
            crumb.path = this.$route.path
            crumb.name = this.$i18n.t('route.' + this.$route.name, [
              crumb.path.match(/[^/]*$/)[0]
            ])
          }
          crumb.classes = 'is-active'
        }

        crumbs.push(crumb)
      })

      return crumbs
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ a {
  @include transition();
}
</style>

Show dynamic breadcrumb based on preservedRouteParameters for MvcSiteMapProvider

The only thing particularly wrong with your approach is that you are not encoding the value from the URL before displaying it in your HTML. This means that some malicious user could potentially inject HTML and/or JavaScript into your page by manipulating the URL.

However, the most common way to provide a dynamic title is to use the SiteMapTitleAttribute, which uses a value from your Model or a value in your ViewData to populate the title dynamically.

[SiteMapTitle("Name")]
public ViewResult UniversityDetails(string university) { 
   var model = _repository.Find(university);

   // Name is a string property of 
   // the university model object.
   return View(model); 
}

[SiteMapTitle("Name", Target = AttributeTarget.ParentNode)]
public ViewResult CourseDetails(string university) { 
   var model = _repository.Find(university);

   // Name is a string property of 
   // the university model object.
   return View(model); 
}

---

Related Topics