blazor-adminlte icon indicating copy to clipboard operation
blazor-adminlte copied to clipboard

Bread Crumbs / Page Title

Open sjefvanleeuwen opened this issue 4 years ago • 3 comments

@jbennink

Refering to our online discussion.

For bread crumbs the idea right now, is to include a Title Propery as part of a PageBase where all pages inherit from. A global service is injected in startup.cs as part of the Service Collection initialized in the services.AddAdminLte() extension. This has two positive effects:

  1. The breadcrumb then shows the /home/{title} of the page.
  2. The ContentHeader, as is available in the sample pages, can also reuse the Page Title property from the PageBase

Your thoughts?

sjefvanleeuwen avatar Aug 16 '20 11:08 sjefvanleeuwen

I have log since wondered about breadcrumbs. The definition of a breadcrumb gives two types.

  • A complete history how the user got to the current page
  • The parent pages of the current page.

The first will get long and useless very quick. The second definition would use the hierarchical relationship between pages, not necessarily the url parts to the current page.

I know I started with the latter in the sense that you would display the url in it's segments. But not every segment has a useful definition. Ie. The AdminLte uses /UI/General and in facts the demo site have a deeper nesting where UI is not in the root level.

The Charts\Flot menu option navigates to charts/flot where the Page title is "Flot charts" but the breadcrumb is Home / Flot which seems to disregard the charts part in the url. I would have expected charts / Flot

You already have all routes and if you (the developer) keep the routes tidy the could be used to construct the breadcrumb. As you stated giving every page a Title is beneficial, but I would use it in the ContentHeader for @sjefvanleeuwen Header.

Using your suggestion 1 would duplicate the title. I would use the route parts here. And as you suggest in option 2 a Page Title can be used as @Header

summer600 avatar Aug 16 '20 19:08 summer600

Ok, I have done the content header. and added a PageTitle component, which also changes the page title in the browser through javascript interop. There are three formats to distinguish (only (1) rest is not implemented yet)

  1. The Page Title in the header

  2. The Title in the browser tab (probably needs to show a condensed title, indicating something like Site :: SubCat :: Title for bookmarks, When you look for example on http://www.retrogamescollector.com/ you can see the Sub Category becomes the first item in the Tab Title description once you get into a menu item, so they get inverted, as there's not a lot of space on a tab for a description to show.

  3. The Bread Crumb which shows more of a hierachy, that doesnt fit well in the browser tab.

See commit: https://github.com/sjefvanleeuwen/blazor-adminlte/commit/c769db1b254db52528e8b27b50ab3ec7f7e87a1a for now.

sjefvanleeuwen avatar Aug 16 '20 20:08 sjefvanleeuwen

Quick note; make a backlog item that the head section (page title) can be modified without interop when .net5 is released.

MarijnPessers avatar Aug 16 '20 22:08 MarijnPessers