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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By BitPoet
      Inspired by this thread with a little nugget based on AOS by @benbyf to visually distinguish development systems from production ones, I wrote a small module that does the same and lets you adapt colors and text.
      Link to the github repo:
      AdminDevModeColors
      Version 0.0.1 is still very alpha and only tested on PW 3.0.124.
      Description
      This module lets you change the color for the top toolbar and add a small piece of text for development systems, so you are immediately you aren't working on production (and vice versa). The adaptions are made through pure CSS and applied if either the "Enable DEV mode" checkbox in the module's configuration is checked or the property $config->devMode is set to true in site/config.php.
      Works with Default, Reno and Uikit admin themes (though probably needs a lot of testing with different versions still).
      Since a screenshot says more than thousand words...
      Production system (unchanged):

      Dev system (Default admin theme):

      Dev system (Reno admin theme):

      Dev system (Uikit admin theme):

      Feel free to leave any feedback here and report any problems either in this thread or the github issue tracker.
       
    • By SwimToWin
      The basic Processwire workflow assumes that I (as an Editor) want to save new Pages in draft mode - and therefore new pages are always set to unpublished by default. To publish the page, it is necessary to actively press "Publish", otherwise the Page will not be visible.
      The workflow is:
      Add new Page Status is now "Unpublished: Not visible on site." Press Publish - the page is now visible on site I want to publish pages right away (without having to press Publish).
      Where is that configured?
      ProcessWire 3.0.123
      Uikit v3 admin theme (0.3.0)
    • By SwimToWin
      I have a website that allows users to create their personal "website" (a page with sub-pages).
      Users shall be able to:
      Log in (frontend and/or admin), Edit "their" page(s) - I am using the "Page Edit Per User"-module (https://modules.processwire.com/modules/page-edit-per-user/) to grant access to the relevant pages Create child pages - possible? Users shall not be able to see other pages in the admin interface - "Admin Restrict Page Tree" may do the trick (https://modules.processwire.com/modules/admin-restrict-page-tree/)? Frontend editing shall be possible - I am considering "Fredi" (https://modules.processwire.com/modules/fredi/) for this. The challenge is that it takes a lot of modules and configuration.
      Is there a way to set this up that doesn't require a lot of configuration for each new user?
    • By Noel Boss
      Admin Theme Boss
      A light and clear theme based on Uikit 3
      Features
      Four unique color options Beautifully redesigned login screens Modern typografy using Roboto Condensed Extended breadcrumb with edit links Extends AdminThemeUikit, so you can continue using all current and future AdminThemeUikit features Option to activate theme for all users   Updated and Releases
      There is a shiny new release page where you can subscribe to updates for new releases of AdminThemeBoss.   Color Variants:
      ProcessWire Blue


       
      Dark Black


       
      Vibrant Blue

       
      Happy Pink

      Requirements
      Requires a current ProcessWire version with AdminThemeUikit installed and activated.
      Installation
      Make sure AdminThemeUikit is activated Go to “Modules > Site > Add New“ Paste the Module Class Name “AdminThemeBoss“ into the field “Add Module From Directory“ Click “Download And Install“ On the overview, click “Download And Install“ again… On the following screen, click “Install Now“

      Manual Installation
      Make sure the above requirements are met Download the theme files from GitHub or the ProcessWire Modules Repository. Copy all of the files for this module into /site/modules/AdminThemeBoss/ Go to “Modules > Refresh” in your admin Click “Install“ on the “AdminThemeBoss“ Module
    • By benbyf
      I always seem to get this warning on every new install of PW on my Ubuntu 14 box with Digital Ocean. The servers are usually based in the UK and I was wondering if I should be adding something other than the below in the config? Is there a UK based locale code? Quick Google didnt come up with much.
      Warning: your server locale is undefined and may cause issues. Please add this to /site/config.php file (adjust “en_US.UTF-8” as needed): setlocale(LC_ALL,'en_US.UTF-8');
      Added to the config file:
      setlocale(LC_ALL,'en_US.UTF-8');  
×
×
  • Create New...