Skip to content

Navigation Consistency Updates

Overview

The proposed Navigation Consistency Updates aim to enhance the user experience by providing a coherent navigation system within the Mathesar application.

GitHub Issue

User Experience

Default State Logged In User

  • Mathesar Logo: Always visible; acts as home button.

User has multiple databases (database connections list page)

image

  • Database Connections Breadcrumb Button:
  • On click, dropdown lists all database connections.
  • An option to “Manage Connections” is also available.

User has one database (database connection page)

image

  • Database Name with Icon: Directs to database connection page.
  • Schemas Breadcrumb Button: Opens a list of schemas in the database.

From the Schema Page

image

  • Retain elements from the database connection page.
  • Add Schema Name and Icon.
  • Introduce Tables Breadcrumb Button:
  • Lists tables and explorations in the schema when clicked.
  • Add Links to Import Table and Data Explorer pages.

From the Table Page

image

  • Include Table Name and Icon.
  • Add Records List Button: Opens a dropdown of table records.

From the Record Page

image

  • Append Record Name and Icon for context after the ‘record list’ button.

From the Exploration Page

  • Add Exploration Name and Icon.
  • Exclude records list button since it is not relevant to exploration.

For unsaved explorations:

image

  • The label should be Data Explorer with the exploration icon.

For saved explorations:

image

  • The label should be Exploration Name with the exploration icon.

For saved explorations in edit mode:

image

  • The label should be Exploration Name with the edit icon.

From the Import Page

image

  • Display Import Name and Icon after the schema breadcrumb button.

From the Administration Pages

image

  • No dropdown menus will be on the admin pages because they’re at a higher level and don’t need to help with data navigation. This keeps the menu behavior the same everywhere, which is less confusing for users.
  • Icons in this section will adopt the primary color to distinguish it as a separate area.

Additional UI Details

image

The menu needs to be divided into sections: - Main navigation links (Import and Data Explorer) that remain constant. This area will be fixed. - Lists (Tables and Explorations) which can expand with numerous items. This part will have independent scrolling from the fixed area, ensuring that users don’t lose sight of the main navigation links while scrolling through a long list.

State Representation

Active Breadcrumb Step

  • The active breadcrumb step needs to be highlighted to indicate that it is the current page. The text will be bolder and the in white color.