Home Category Navigation

Updated: November 10, 2017
SAPUI5 Version 1.56

Category Navigation

Intro

Category navigation is a rarely used pattern which can be used to replace tree-like structures with only a few levels in a responsive environment. The breadcrumb control replaces the title control in the category navigation pattern.

Usage

Use category navigation if:

  • You need to show categorized data in a responsive environment.
  • You need to replace a tree table on tablets and smartphones, and the tree table has a maximum of five levels.
  • You need to show hierarchical data with different details at each level, and thus a tree table cannot be used.

Do not use category navigation if:

  • You need only two levels, and the upper level identifies the category. In this case, use a grouped responsive table instead.
  • You need more than five levels. In this case, use a tree table.
    On a smartphone or tablet device, try to display the data on just five levels. You can do this in one of two ways:

    • Remove unnecessary root levels.
    • Offer the same items in different branches.

Responsiveness

The pattern is based on a responsive table. In contrast to the standard usage of the responsive table, the title is used for providing a breadcrumb showing the current level.

The breadcrumb control determines the text of the current/last element in the breadcrumb path. It only consists of text (string element).

The responsiveness is handled by the control: As soon as the breadcrumb gets truncated, it provides a dropdown menu to access further navigation levels.

Category navigation - Size S
Category navigation - Size S
Category navigation - Size M
Category navigation - Size M
Category navigation - Size L
Category navigation - Size L

Layout

The breadcrumb appears in the toolbar, and replaces the table title.

At any given level, the responsive table contains the individual line items, including their column header, as well as the categories available for further drilldown.

Category navigation - Layout
Category navigation - Layout

Components

Use the breadcrumb control to implement the category navigation pattern. Display the navigation levels as text. Use links for the title of all levels above the current level to provide a fast navigation option over the levels.

A breadcrumb showing three levels
A breadcrumb showing three levels

Thus, showing the root level does not include a link at all.

A breadcrumb showing the root level only
A breadcrumb showing the root level only

As soon as text of the breadcrumb gets truncated, the breadcrumb control provides a dropdown functionality to reach hidden navigation levels. The currently selected level shows the title of the current level.

Change breadcrumb to dropdown menu if running out of screen real estate
Change breadcrumb to dropdown menu if running out of screen real estate

Use one or several responsive tables for listing the items of the different levels, depending on the columns shown on each level.

Responsive table
Responsive table

Within the responsive table, use the navigation mode of the items on container items.

Navigable container item
Navigable container item

Do not use the navigation mode on leaf items.

Leaf item not meant for navigation
Leaf item not meant for navigation

Behavior and Interaction

Initially, this pattern looks like a standard responsive table with control items.

Initial state
Initial state

Drill-in on Item

Clicking an item drills into it in one of the following ways:

  • The content of the responsive table is changed (if all columns are the same on the second level).
  • The entire responsive table is changed (if there are different columns on the second level).
State after navigating to the second level
State after navigating to the second level

Navigate

The user can navigate further by using navigable items.

The breadcrumb adapts accordingly. Leafs are shown without a navigation indicator.

State after navigating to the third level
State after navigating to the third level

Guidelines

Drill-in on Item

Adapt the title to a breadcrumb.

Show navigation indicators if there are more levels.

State after navigating to the second level
State after navigating to the second level

Navigate

Navigate further by using control items.

Make sure that the breadcrumb adapts accordingly. Please be aware that leafs are shown without a navigation indicator.

State after navigating to the third level
State after navigating to the third level

Navigate backwards by using one of the links inside the breadcrumb. If going backwards, show the exact same state as before.

If navigating back, show the former state
If navigating back, show the former state

As soon as there is not enough screen real estate to show the entire breadcrumb, the control provides a dropdown functionality to reach further navigation levels.

Show a dropdown menu within the breadcrumb control on small screen sizes
Show a dropdown menu within the breadcrumb control on small screen sizes

Within the dropdown menu, show all parent nodes below the current node.

Show the levels of the breadcrumb inside the dropdown menu (select)
Show the levels of the breadcrumb inside the dropdown menu (select)

If navigating, just change the responsive table and the breadcrumb. Do not change anything else.

Do not navigate to another page.

 

Example: Drilldown with Breadcrumb Display

Placement

Place the breadcrumb control in a way that makes sense to the user. For example, if used in comination with segmented buttons, place the breadcrumb on top of the toolbar. The segmented buttons should be displayed on the very left of the toolbar. In this case, the page navigation is on an higher level as the the view switch.

Together with a tab pattern, the breadcrumb should replace the table title and and should be displayed under the tabs.

Breadcrumb with segmented buttons in hierarchy
Breadcrumb with segmented buttons in hierarchy
Breadcrumb with tabs
Breadcrumb with tabs

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation