Admin Breadcrumb Dropdown Idea

[Pixrael]

Hi guys!

What do you think about something like this? Because I use this option regularly in the Windows File Explorer breadcrumb and it's very useful. The drop-down menu can display only published/visible child pages. I've tried to find how to do it as a module, but I'm not a coder with enough skills for that ... or I don't know if I can use hooks to do that ...

[BitPoet]

Actually, that's quite similar to the breadcrumb dropdown I built for our new intranet layout, so I totally agree . I don't think there's a good place to hook into, but making AdminThemeUikit::renderBreadcrumb hookable shouldn't be too expensive. It might be worth adding a feature request in the issue tracker.

[teppo]

Wouldn't mind having this feature in the core either. Just saying

Admittedly my first impression was "oh man, not again". Some sites (Basecamp, Dropbox) have recently implemented their own flavors of "breadcrumb dropdowns", and in my opinion both get it wrong. In Basecamp clicking what seems like a link to the previous item actually opens a dropdown with that item and its children, while in Dropbox deeper down all but the last two levels are removed from the breadcrumbs and the first item turns into a dropdown.

Both make sense in their own ways, but a) break the "open this link in a new tab" feature and b) are totally unexpected and confusing, at least to me. Your approach makes use of the spacer items, which not only makes more sense in this context, but also doesn't break the familiar breadcrumb pattern. Thumbs up for this 

[Noel Boss]

Great concept. Im not sure its obvious wnough to click on the arrows since these almost never have any functions associated eithout a more visual indication... in this regard i think a dropdown on a link would increase the usability for an average user.

 

btw, what theme (opetions) arre you using here?

[Pixrael]

Good point about usability, maybe something like a outlined button could work. I would not like to replace the current link with a dropdown menu because it would be better to preserve the function of the current link and add the new function. The theme is the regular Reno that comes with PW installation, you can access it in the admin profile.

 

[tpr]

Looks a bit too much for me, how about a dotted underline only?

[rick]

 

I would say keep the interface the same as other comboboxes for consistency. Adding sub-menu options to an existing breadcrumb is in effect a combobox. So why not change the breadcrumbs to a sequence of comboboxes separating each as you would normally. The visual ques remain the same for the user. Just a thought. 

[BitPoet]

Ryan made AdminThemeUikit::renderBreadcrumbs hookable in the last update, so it's time to try out different ideas.

[Noel Boss]

I use this hook to inject edit icons into the breadcrumb. Unfortunately the options exposed by $this->wire('breadcrumbs') are not great, no page id's etc… so it's kind of a hack…

	public function init()
	{
		wire()->addHookAfter('AdminThemeUikit::renderBreadcrumbs', $this, 'renderBreadcrumbs');
	}


	/**
	 * Render a list of breadcrumbs (list items), excluding the containing <ul>.
	 *
	 * @return string
	 */
	public function renderBreadcrumbs(HookEvent $event)
	{
		if (!$event->return) {
			return;
		}

		$process = $this->wire('page')->process;
		if ($process == 'ProcessPageList') {
			return '';
		}
		$breadcrumbs = $this->wire('breadcrumbs');
		$out = '';

		// don't show breadcrumbs if only one of them (subjective)
		if (count($breadcrumbs) < 2 && $process != 'ProcessPageEdit') {
			return '';
		}

		if (strpos($this->layout, 'sidenav') === false) {
			$out = '<li>'.$event->object->renderQuickTreeLink().'</li>';
		}

		foreach ($breadcrumbs as $breadcrumb) {
			$title = $breadcrumb->get('titleMarkup');
			if (!$title) {
				$title = $this->wire('sanitizer')->entities1($this->_($breadcrumb->title));
			}

			$edit = '';
			$icon = $event->object->renderIcon('pencil');
			if (strpos($breadcrumb->url, 'open=') > 0) {
				$pageid = explode('open=', $breadcrumb->url);
				$pageid = end($pageid);
				if (wire('pages')->get($pageid)->editable()) {
					$edit = "&nbsp;&nbsp;<a href='../edit/?id=$pageid'>$icon</a>";
				}
			} elseif (strpos($breadcrumb->url, '../') !== false && wire('process')) {
				$pageid = wire('process')->getPage()->parent->id;
				if (wire('pages')->get($pageid)->editable()) {
					$edit = "&nbsp;&nbsp;<a href='../edit/?id=$pageid'>$icon</a>";
				}
				// modify open
				$breadcrumb->url = "../?open=$pageid";
			}
			$out .= "<li><a href='$breadcrumb->url'>$title</a>$edit</li>";
		}

		if ($out) {
			$out = "<ul class='uk-breadcrumb'>$out</ul>";
		}

		$event->return = $out;
	}

@ryan maybe this would be a useful addition to AdminThemeUikit?

 

[Noel Boss]

I have implemented this breadcrumb in my new theme:

 

[Doug G]

Kinda OT, but thanks for posting this idea.  I had no idea you could click the arrows in windows file explorer and get a dropdown!  Learn something new every day.

 

[Ivan Gretsky]

This is how it works in Bitrix, popular Russian proprietary CMS:

[Robin S]

I released a module that adds dropdown menus to the breadcrumbs in Page Edit.

[Gideon So]

WOW. It is great!!

Gideon