Make navigation header behave more consistently

[seancolsen]

Problem

Good

I like how the navigation header has these "selectors". This is an example of a good page because it has selectors everywhere in the breadcrumb that it possibly can:

Bad

But some of our pages omit breadcrumb selectors where they could otherwise be included. For example:

From a usability perspective I find this behavior to be really frustrating because I want to rely on the breadcrumb for navigation. If it doesn't work everywhere that it should work, then I can't rely on it, so I don't build my behavior around it. Our current design steers me away from using the selector feature — even on pages where it exists — simply because I end up developing other habits.

Proposed solution

The breadcrumb selectors should be present wherever possible.

Specifically, the selectors should be present in the red circles within my screenshots above.

See spec: Navigation Consistency Updates

Additional context

When we implemented the breadcrumb navigation, I made a case for using exactly the behavior I'm now proposing. However @pavish and @ghislaineguerin wanted the breadcrumb to be simpler so we ended up omitted the selectors in some cases.

Now that I've been using Mathesar more, I want to revisit our design and advocate more strongly for including the selectors everywhere. For me, the selectors make Mathesar easier to use so I would like to use them wherever we can.

[zaidmstrr]

can i work on it.

[seancolsen]

@zaidmstrr This issue is not eligible for community contribution. Please see our Contributor Guide which states:

❌ Issues are not appropriate if they meet any of the following criteria:

• already assigned to someone
• labeled with a restricted: ... label
• labeled with any status: ... label other than status: ready

[seancolsen]

We discussed this during today's product approval meeting. Everyone agrees that we should move forward with this.

This ticket requires the following UX work before we can move forward:

• Specify how the content within the dropdowns will incorporate links to "Import", and "Data Explorer".

  Note: Be sure to specify that those links are rendered in an active state when on those pages, just as we do for schemas and tables

[pavish]

I would like to add a point I mentioned in the meeting, which the UX work needs to account for.

• Make sure we differentiate the current active page in the breadcrumb.
  • Since the proposed solution adds an arrow mark dropdown at the end, we need to make it extra clear that the current open page is not within the last item, but is the last item..
  • For eg., The breadcrumb would show: Mathesar > mathesar_tables > Library > when in the Library schema. We need to differentiate the color of Library in the breadcrumb to denote that it is the current active page.