Jump to content
Pixrael

Admin Breadcrumb Dropdown Idea

Recommended Posts

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 ...

breadcrumb-paths.gif.f9940179324ffbbb81a0b32f600af264.gif

  • Like 13

Share this post


Link to post
Share on other sites

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.

  • Like 5

Share this post


Link to post
Share on other sites

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 :)

  • Like 4

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

 

drop.png

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

 

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. 

Share this post


Link to post
Share on other sites

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…

634830168_ScreenShot2018-06-06at17_24_29.png.925b18bb089f37750c7a5a7b30585abd.png

	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?

 

  • Like 3

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

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

dropdowns.gif.7b463ed7b5fac2185badd62162a9c10b.gif

  • Like 4

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By DanielKit
      Hi. I'm currently stuck at the login page in my project. Once I enter my admin username and my password and press login, nothing happens. The page just reloads. However, the URL changes from http://myipaddress/processwire to http://myipaddress/processwire/?login=1. I've checked all of my server settings, and to my knowledge, all seems to be fine there. I don't know where to go from here.. Thanks in advance!
    • By modifiedcontent
      Small annoyance: I get a horizontal scrollbar in UIkit admin area - or actually Admin Theme Boss based on Uikit 3. I tried to fix it with CSS, but had trouble isolating/targeting it and don't want to mess with module or core files. I think this issue has been reported before. Is there a recommended fix? 
    • By codevark
      The Minimal Site works fine, but if I try to login as admin, I have no idea what the credentials are.
      I did not do the "install" process myself. The OVA came with everything set up, but there's no mention of the PW admin credentials being set to some initial value.
      Wondering if anyone else has tried the Bitnami OVA and if there's a simple answer.
      --Pete
    • By vwatson
      I don't have any fontawesome icons in the admin section. Not sure what's wrong. They used to appear. I've tried all the user profiles and they're gone in all of them.
      Using the browser inspector tool, I see this message:
      Access to font at 'https://www.domain.com/wire/templates-admin/styles/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0' from origin 'http://domain.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
      I'm not sure why this is occurring or how to fix it. Any help would be greatly appreciated. 
    • By Andi
      Getting a little deeper into the ProcessWire state-of-mind here. I seriously think I wouldn't have come back to webdev if it wasn't for this wonderful little gem of a CMS.
      I have an "Options" field added to all users on a site. If the user has anything other then "default" selected, I would like to show a permanent message in the admin like the one in the screenshot, only so that the user can't close it. As a friendly reminder that he changed that option from default to something crazy 🙂
      I've read up on how to send messages to users, but where would I hook into to make this show up all the time in the backend?
      https://processwire.com/api/ref/wire/message/
      Thanks in advance!

×
×
  • Create New...